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布局如何打印日志?
122浏览 • 2回复 待解决
HarmonyOS相对布局问题
342浏览 • 1回复 待解决
HarmonyOS Flex 布局设置问题
330浏览 • 1回复 待解决
HarmonyOS Slider UI展示问题
302浏览 • 1回复 待解决
HarmonyOS 相对布局的高度问题
206浏览 • 1回复 待解决
HarmonyOS scroll 内控件布局问题
177浏览 • 1回复 待解决
HarmonyOS UI 单位适配问题
161浏览 • 1回复 待解决
【急】鸿蒙UI界面网格布局怎么设置?
16372浏览 • 4回复 待解决
HarmonyOS UI内部使用AppStorage问题
227浏览 • 1回复 待解决
HarmonyOS UI 未刷新问题
352浏览 • 0回复 待解决
HarmonyOS 原生应用的UI设计问题
303浏览 • 1回复 待解决
HarmonyOS 一个Button布局问题
270浏览 • 1回复 待解决
Text组件布局过界问题
993浏览 • 1回复 待解决
HarmonyOS 一个UI 优化方面的问题
231浏览 • 1回复 待解决
关于Java UI Checkbox的问题?
5724浏览 • 1回复 待解决