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
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
xdpan

给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%') 
  } 
}

实现效果:

分享
微博
QQ
微信
回复
2024-05-27 22:07:09
相关问题
ArkTS布局组件实现瀑布流式布局
365浏览 • 1回复 待解决
鸿蒙 | Text 内容显示问题
8712浏览 • 5回复 待解决
Text 组件如何加载Unicode字符
608浏览 • 1回复 待解决
Text组件是否支持多行显示
765浏览 • 1回复 待解决
Text 组件如何渲染图文动态混排
460浏览 • 1回复 待解决
Text组件是否支持小图片和表情包
751浏览 • 1回复 待解决
如何获取Text组件中文字的宽度
704浏览 • 1回复 待解决
关于text内容删除的问题有懂的吗?
1443浏览 • 1回复 待解决
适配OpenHarmony是否必须要XTS认证
829浏览 • 0回复 待解决
panel组件点击区域问题
3408浏览 • 1回复 待解决
web组件registerJavaScriptProxy的问题
591浏览 • 0回复 待解决
Image组件缓存清空问题
2700浏览 待解决
用的DirectionalLayout布局组件
7106浏览 • 3回复 待解决
未在华为应用市场发布的APP无法安装
28180浏览 • 1回复 待解决
相对布局(RelativeContainer)
398浏览 • 1回复 待解决