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')1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

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

HarmonyOS

zbw_apple

2024-10-18 10:59:47

888浏览

回答 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  
  })  
}  
  }  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.

2024-10-18 17:55:22

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

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

订阅鸿蒙技术特刊，精选内容抢先看