鸿蒙Next Text内容超出父容器?

2025-06-27 22:42:48
105次阅读
0个评论

当我们在布局中使用Text展示文本内容时,如果父布局是固定宽高,当Text展示的内容过长并且没有限制时,会超出父容器,这点和安卓中是不一样的,安卓中会自动截取超出部分。 因此我们在开发过程中,如果Text内容长度不固定,我们要提前设置好边界,以防内容超出。 以下是展示及解决办法: 演示.png

@Entry
@Component
struct test{
  build() {
    Column({space:10}){
      Row(){
        Column(){
          Text('HarmonyOS开发者笔记')
          Row(){
            Text('有一部分超出去父容器了,但是被下面的挡住了')
          }.width('100%').height('100%').backgroundColor(Color.Blue)
        }.height('100%').width(100).backgroundColor(Color.Grey)

        Row(){
          Text('关注')
          Text('HarmonyOS开发者笔记?????????????超出了')
        }.width('100%').height('100%').backgroundColor(Color.Yellow)
        .justifyContent(FlexAlign.SpaceBetween)
      }.width('100%').height(100)

      Row(){
        Column(){
          Text('HarmonyOS开发者笔记')
          Row(){}.width('100%').layoutWeight(1).backgroundColor(Color.Pink)
        }.height('100%').width(100).backgroundColor(Color.Green)

        Row(){
          Text('充满dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd下边又超出去了?').width('70%')
          Text('HarmonyOS开发者笔记又被挡住了??????????????????')
        }.layoutWeight(1).height('100%').backgroundColor(Color.Yellow)
        .justifyContent(FlexAlign.SpaceBetween)
      }.width('100%').height(100)

      Row(){
        Text('HarmonyOS开发者笔记HarmonyOS开发者笔记HarmonyOS开发者笔记')
          .width(50).height(100)
        Text('关注1关注2关注3关注关注关注关注关注关注关注关注关注关注关注关注关注关注关注关注关注关注关注')
          .width(50).maxLines(4)
      }.width(300).height(100).backgroundColor(Color.Orange).justifyContent(FlexAlign.SpaceBetween)
    }
  }
}

总结: 1.Text父容器在Column/Row内时,如果想充满剩余空间要使用layoutWeight(1),设置width('100%') 有可能超出父容器,这样Text也有可能超出布局 2.当Text父容器宽高正常显示时,如果Text内容长度不能确定,我们需要指定Text的宽和最大行数这两个参数,这样就可以避免内容超出父容器了

收藏00

登录 后评论。没有帐号? 注册 一个。