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相对布局问题
270浏览 • 1回复 待解决
HarmonyOS Flex 布局设置问题
288浏览 • 1回复 待解决
HarmonyOS Slider UI展示问题
248浏览 • 1回复 待解决
HarmonyOS UI 单位适配问题
117浏览 • 1回复 待解决
HarmonyOS 相对布局的高度问题
149浏览 • 1回复 待解决
HarmonyOS scroll 内控件布局问题
125浏览 • 1回复 待解决
HarmonyOS UI内部使用AppStorage问题
156浏览 • 1回复 待解决
【急】鸿蒙UI界面网格布局怎么设置?
16293浏览 • 4回复 待解决
HarmonyOS UI 未刷新问题
273浏览 • 0回复 待解决
HarmonyOS 原生应用的UI设计问题
261浏览 • 1回复 待解决
HarmonyOS 一个Button布局问题
238浏览 • 1回复 待解决
Text组件布局过界问题
907浏览 • 1回复 待解决
HarmonyOS 一个UI 优化方面的问题
209浏览 • 1回复 待解决
关于Java UI Checkbox的问题?
5673浏览 • 1回复 待解决