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布局问题 --胡宏松
30浏览 • 1回复 待解决
HarmonyOS UI布局如何打印日志?
286浏览 • 2回复 待解决
HarmonyOS LazyForEach问题刷新UI问题
35浏览 • 1回复 待解决
HarmonyOS相对布局问题
454浏览 • 1回复 待解决
HarmonyOS Slider UI展示问题
435浏览 • 1回复 待解决
HarmonyOS UI 单位适配问题
302浏览 • 1回复 待解决
HarmonyOS Flex 布局设置问题
453浏览 • 1回复 待解决
HarmonyOS 横屏后布局问题
52浏览 • 1回复 待解决
HarmonyOS 相对布局的高度问题
283浏览 • 1回复 待解决
HarmonyOS scroll 内控件布局问题
281浏览 • 1回复 待解决
HarmonyOS UI内部使用AppStorage问题
357浏览 • 1回复 待解决
HarmonyOS 开发ui图尺寸问题
25浏览 • 1回复 待解决
HarmonyOS UI 未刷新问题
547浏览 • 0回复 待解决
【急】鸿蒙UI界面网格布局怎么设置?
16514浏览 • 4回复 待解决
HarmonyOS Flex组件存在问题UI不对
25浏览 • 1回复 待解决
HarmonyOS 原生应用的UI设计问题
425浏览 • 1回复 待解决
HarmonyOS 一个Button布局问题
406浏览 • 1回复 待解决