HarmonyOS UI布局问题

左边文字 右边图片,图片可能存在,可能不存在,左边文字布局方式该如何处理?

HarmonyOS
2024-09-03 09:20:57
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
FengTianYa

您可以使用flex布局,让文本占满剩余空间,可以使用 textOverflow 和 maxLines 让文本超出隐藏,案例如下:

@Entry 
@Component 
struct Index { 
  @State flag: boolean = true; 
 
  build() { 
    Column() { 
      Button('图片显隐').onClick(()=>{ 
        this.flag = !this.flag 
      }) 
      Flex() { 
        Row(){ 
          Text('文字文字文字文字文字为你做字文字文字为你做字文字文字为你做字文字文字为你做') 
            .fontSize(24) 
            // .textOverflow({ overflow: TextOverflow.Ellipsis}) 
            // .maxLines(2) 
            .fontColor(Color.White) 
        } 
        .width('100%') 
        .backgroundColor(Color.Gray) 
        if(this.flag){ 
          Image($r('app.media.startIcon')) 
            .width(40) 
        } 
      } 
      .width(300) 
      .backgroundColor(Color.Red) 
    } 
    .height('100%') 
  } 
}

参考链接:

flex:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-flex-V5

Text:

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-text-V5

分享
微博
QQ
微信
回复
2024-09-03 17:03:54
相关问题
HarmonyOS UI布局水平居中问题
1227浏览 • 1回复 待解决
HarmonyOS 关于ui布局问题 --胡宏松
755浏览 • 1回复 待解决
HarmonyOS UI布局如何打印日志?
1470浏览 • 2回复 待解决
HarmonyOS UI问题
1057浏览 • 1回复 待解决
HarmonyOS 布局问题
920浏览 • 1回复 待解决
HarmonyOS LazyForEach问题刷新UI问题
1325浏览 • 1回复 待解决
HarmonyOS UI布局子控件超出父控件宽度
1297浏览 • 1回复 待解决
HarmonyOS相对布局问题
1230浏览 • 1回复 待解决
HarmonyOS UI测试框架问题
1507浏览 • 1回复 待解决
HarmonyOS UI 单位适配问题
1377浏览 • 1回复 待解决
HarmonyOS ui自适应问题
987浏览 • 1回复 待解决
HarmonyOS UI测试API问题
1122浏览 • 1回复 待解决
HarmonyOS Slider UI展示问题
1779浏览 • 1回复 待解决
HarmonyOS UI组件使用问题
1098浏览 • 1回复 待解决
HarmonyOS 网格式布局问题
819浏览 • 1回复 待解决
HarmonyOS Flex 布局设置问题
1848浏览 • 1回复 待解决
HarmonyOS 布局尺寸的问题
1186浏览 • 1回复 待解决
HarmonyOS 开发ui图尺寸问题
1069浏览 • 1回复 待解决
HarmonyOS UI不刷新问题
1176浏览 • 1回复 待解决
HarmonyOS @Builder UI刷新问题
1062浏览 • 1回复 待解决
HarmonyOS UI 未刷新问题
1798浏览 • 1回复 待解决