Text组件布局过界问题

在row组件中使用text展示文本内容时,经常会遇到单个text内容展示和多个text内容展示的情况。当text内容较多,布局过界时,在使用单个text可正常换行,而使用多个text时,多出的内容会超出父布局,导致展示问题。

Text组件布局过界问题-鸿蒙开发者社区

row中包含的text内容越界,单个text和两个text内容越界时,内容换行的逻辑不一样:

1、单个text时,内容是以父布局为边界进行换行。

2、两个text时,第二个text内容是以整个屏幕边缘为边界进行换行,就会导致以父布局为限制进行展示的时候,展示内容截取不合理。

HarmonyOS
2024-05-26 17:27:37
1000浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
计算机编程小强

给Text组件加上父组件Column,设置flexShrink(1),外层的Row设置width('100%')。

参考代码

@Entry 
@Component 
export struct RowTest { 
  @State message: string = 'Hello World'; 
 
  build() { 
    Row() { 
      Column() { 
 
        Row() { 
          Text('今天共有七').fontSize(28).maxLines(1) 
          Column(){ 
            Text('今天共有七节课课课课课课课课111112222333333444444445555555666666') 
              .fontSize(30) 
              .border({ width: 1, color: Color.Green }) 
              .backgroundColor(Color.Green) 
          }.flexShrink(1) 
        }.padding({ left: 15 }).width('100%') 
        .border({ width: 1, color: Color.Red }) 
      } 
      .width('100%') 
    } 
    .height('100%') 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.

实现效果:

分享
微博
QQ
微信
回复
2024-05-27 22:07:09


相关问题
HarmonyOS Text组件富文本解析问题
832浏览 • 1回复 待解决
HarmonyOS 布局问题
681浏览 • 1回复 待解决
ArkTS布局组件实现瀑布流式布局
1822浏览 • 1回复 待解决
HarmonyOS Text/Span使用问题
1065浏览 • 1回复 待解决
HarmonyOS UI布局问题
1263浏览 • 1回复 待解决
鸿蒙 | Text 内容显示问题
11148浏览 • 5回复 待解决
HarmonyOS相对布局问题
1013浏览 • 1回复 待解决
HarmonyOS Text 组件 UI样式
710浏览 • 1回复 待解决
HarmonyOS text组件设置copyOption
654浏览 • 1回复 待解决
HarmonyOS Text 中使用 ImageSpan 问题
1164浏览 • 1回复 待解决
HarmonyOS 网格式布局问题
568浏览 • 1回复 待解决
HarmonyOS 布局尺寸的问题
817浏览 • 1回复 待解决
HarmonyOS Flex 布局设置问题
1448浏览 • 1回复 待解决