ArkTs-Text组件长度计算不对的问题

场景描述

1.当Text组件长度不固定，设置了ellipsisMode；文本长度很长，超出了显示的范围

2.需要和其他同级组件放置在同一个容器中

3.父容器长度不固定，通过weight计算得出

此时Text组件的长度计算有问题，会直接与父容器的大小一致，将其他组件顶到父容器外去显示。

问题解决

官方文档

ellipsisMode(value: EllipsisMode)

设置省略位置。ellipsisMode属性需要配合overflow设置为TextOverflow.Ellipsis以及maxLines使用，单独设置ellipsisMode属性不生效。

EllipsisMode.START和EllipsisMode.CENTER仅在单行超长文本生效。

！！！注意：当多个Text组件在Row容器内布局且没有设置具体的布局分配信息时，Text会以Row的最大尺寸进行布局。如果需要子组件主轴累加的尺寸不超过Row容器主轴的尺寸，可以设置layoutWeight或者是以Flex布局来约束子组件的主轴尺寸。

Flex api

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-flex-layout-V5

修改后代码：

@Component
struct DemoView {
    @State name: string = '';
    @State tag: string | Resource = '';

    build() {
        Flex() {
            // 此处为需要自适应宽度，且宽度超出最大后要简略显示的Text组件
            Text(this.name)
                // ellipsisMode需要设置以下三个
                .maxLines(1)
                .textOverflow({overflow: TextOverflow.Ellipsis})
                .ellipsisMode(EllipsisMode.END);
        }
        .flexBasis('auto')
        // 设置组件在父容器的剩余空间所占比例
        .flexGrow(1)
        // 设置父容器压缩尺寸分配给此属性所在组件的比例
        .flexShrink(1);
    }
}