当我们在布局中使用 Text 展示文本内容时，如果父布局是固定宽高，当 Text 展示的内容过长并且没有限制时，会超出父容器，这点和安卓中是不一样的，安卓中会自动截取超出部分。
因此我们在开发过程中，如果 Text 内容长度不固定，我们要提前设置好边界，以防内容超出。
以下是展示及解决办法：
@Entry@Componentstruct 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 的宽和最大行数这两个参数，这样就可以避免内容超出父容器了
评论