Row布局中,给Row设置margin左右各16,Row中如果有超长文本自动转行,文本可能会超出Row边界导致margin失效

Row布局中,给Row设置margin左右各16,但Row中如果有超长文本自动转行,文本可能会超出Row边界导致margin失效

咨询场景描述:

代码如下:

Row(){ 
  Image($r('app.media.icon')) 
    .width('15') 
    .height('15') 
 
  Text('我是超长的文案我是超长的文案我是超长的文案我是超长的文案我是超长的文案我是超长的文案') 
 
} 
.alignItems(VerticalAlign.Center) 
.justifyContent(FlexAlign.Center) 
.margin({ 
  left:16, 
  right:16 
})

实际运行效果和图层看附件。

这种问题该如何解决?

Row布局中,给Row设置margin左右各16,Row中如果有超长文本自动转行,文本可能会超出Row边界导致margin失效-鸿蒙开发者社区

Row布局中,给Row设置margin左右各16,Row中如果有超长文本自动转行,文本可能会超出Row边界导致margin失效-鸿蒙开发者社区

HarmonyOS
2024-09-03 10:47:05
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

您可以使用Flex布局,避免子元素超出父元素边界:

@Entry 
@Component 
struct Index{ 
  @State message: string = 'Hello World'; 
 
  build() { 
    Column() { 
      Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 
        Image($r('app.media.app_icon')) 
          .width('15') 
          .height('15') 
 
        Text('我是超长的文案我是超长的文案我是超长的文案我是超长的文案我是超长的文案我是超长的文案') 
      } 
      .backgroundColor('#eca') 
      .margin({ 
        left: 16, 
        right: 16 
      }) 
    } 
    .height('100%') 
    .width('100%') 
  } 
}
分享
微博
QQ
微信
回复
2024-09-03 15:06:01
相关问题
spark Dataset<Row>如何按行获取数据?
2147浏览 • 1回复 待解决
span组件使用margin属性失效
1917浏览 • 1回复 待解决