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 
})
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.

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

这种问题该如何解决?

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%') 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
分享
微博
QQ
微信
回复
2024-09-03 15:06:01
相关问题
HarmonyOS row的子控件超出row的范围
1254浏览 • 1回复 待解决
HarmonyOS 文字在Row不居中
726浏览 • 1回复 待解决
HarmonyOS Row 怎么设置中间最大宽度
564浏览 • 1回复 待解决
HarmonyOS Row组件怎么居中
568浏览 • 1回复 待解决
HarmonyOS Row()为什么不能添加圆角
828浏览 • 1回复 待解决
spark Dataset<Row>如何按行获取数据?
2933浏览 • 1回复 待解决