HarmonyOS 文字和图片相对布局问题

需求是图片距离文字右侧一定间距,如果文字过长,文字截断,使得图片完全显示,如何设置布局?图片和文字都在RelativeContainer容器内。想要的效果是图片距离屏幕右侧固定距离、文字截断,如果文字比较短文字完全显示,图片显示在文字右侧文字和图片间距是固定的。

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
shlp

示例参考如下:

@Entry
@Component
struct TestDemoPage {
  @State imageWidth: number = 0

  build() {
    RelativeContainer() {
      Row() {
        //title
        Text('HarmonyOS Next HarmonyOS Next HarmonyOS Next HarmonyOS Next HarmonyOS Next HarmonyOS Next HarmonyOS Next HarmonyOS Next HarmonyOS Next'.split("")
          .join("\u200B"))
          .fontSize(16)
          .fontWeight(FontWeight.Medium)
          .fontColor('#222222')
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .constraintSize({ maxWidth: `calc(100% - ${this.imageWidth}vp)` })
          .height(22)
        // icon
        Image($r('app.media.startIcon'))
          .objectFit(ImageFit.ScaleDown)
          .height(16)
          .margin({ left: 8, right: 14 })
          .onAreaChange((oldValue: Area, newValue: Area) => {
            this.imageWidth = Number(newValue.width)
          })
      }
      .margin({ top: 14, left: 14, right: 14 })
      .id('title')
    }
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS相对布局问题
594浏览 • 1回复 待解决
HarmonyOS 相对布局的高度问题
394浏览 • 1回复 待解决
相对布局(RelativeContainer)
1440浏览 • 1回复 待解决
HarmonyOS 图片+文字排列问题
292浏览 • 1回复 待解决
找不到图片布局资源
12302浏览 • 8回复 待解决
HarmonyOS 相对定位动画
804浏览 • 1回复 待解决
HarmonyOS 容器控件的布局问题
226浏览 • 1回复 待解决
HarmonyOS gridlist混合布局问题
188浏览 • 1回复 待解决
HarmonyOS 文字显示问题
525浏览 • 1回复 待解决
HarmonyOS 如何给图片增加文字水印
169浏览 • 1回复 待解决
HarmonyOS 布局问题
223浏览 • 1回复 待解决
HarmonyOS 是否支持图片读取文字能力
123浏览 • 1回复 待解决