HarmonyOS Text子组件中Span、ImageSpan显示如何优化?

Text(){  
          Span(this.device.isGroup ? this.device.deviceGroupName : this.device.deviceName)  
            .fontColor($r('app.color.color_1B1815'))  
            .fontSize($r('app.float.fp_14'))  
            .fontWeight(FontWeight.Bold)  
          ImageSpan(this.deviceViewModel.getDeviceIconFlag(this.device))  
            .width($r('app.float.vp_24'))  
            .height($r('app.float.vp_24'))  
            .objectFit(ImageFit.Auto)  
            .verticalAlign(ImageSpanAlignment.CENTER)  
        }  
          .textOverflow({  
            overflow: TextOverflow.Ellipsis  
          })  
          .ellipsisMode(EllipsisMode.END)  
          .maxLines(1)  
          .alignRules({  
            left: { anchor: '__container__', align: HorizontalAlign.Start},  
            right: { anchor: '__container__', align: HorizontalAlign.End},  
            top: { anchor: 'row1', align: VerticalAlign.Bottom}  
          })  
          .margin({  
            left: $r('app.float.vp_16'),  
            right: $r('app.float.vp_16'),  
            top: $r('app.float.vp_16')  
          })  
          .id('row3')

如何设置Span超长内容时不隐藏ImageSpan?

HarmonyOS
2024-10-18 10:59:47
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
put_get

可以把Text和Image组件的父组件Row代替成Flex,并且设置交叉轴对齐方式ItemAlign.Center。其他保持不变就可以实现效果。

@Entry  
@Component  
struct Page6 {  
  private str: string = "我是测试文本测试文本测试文本测试文本测试文本测试文本"  
  
  build() {  
    Column() {  
      Flex({ alignItems: ItemAlign.Center }) {  
        Text() {  
          Span(this.str)  
            .fontWeight(FontWeight.Bold)  
        }  
        .textOverflow({  
          overflow: TextOverflow.Ellipsis  
        })  
        .ellipsisMode(EllipsisMode.END)  
        .maxLines(1)  
        .alignRules({  
          left: { anchor: 'container', align: HorizontalAlign.Start },  
          right: { anchor: 'container', align: HorizontalAlign.End },  
          top: { anchor: 'row1', align: VerticalAlign.Bottom }  
        })  
        .id('row3')  
    Image($r("app.media.icon"))  
      .width(24)  
      .height(24)  
      .objectFit(ImageFit.Auto)  
  }  
  .margin({  
    left: 16,  
    right: 16,  
    top: 16  
  })  
}  
  }  
}
分享
微博
QQ
微信
回复
2024-10-18 17:55:22
相关问题
HarmonyOS TextImageSpanSpan
522浏览 • 1回复 待解决
HarmonyOS TextSpan显示问题
533浏览 • 1回复 待解决
HarmonyOS Text 中使用 ImageSpan 问题
487浏览 • 1回复 待解决
HarmonyOS Text/Span使用问题
442浏览 • 1回复 待解决
HarmonyOS Text如何显示 emjo 表情?
265浏览 • 1回复 待解决
HarmonyOS 使用Text里套Span标签使用问题
319浏览 • 1回复 待解决
Text组件是否支持多行显示
2020浏览 • 1回复 待解决
HarmonyOS如何使Text的单词折行显示
510浏览 • 1回复 待解决
HarmonyOS span如何设置圆角
471浏览 • 1回复 待解决
循环显示包含图片的组件
839浏览 • 1回复 待解决