HarmonyOS Span的封装问题

我希望可以封装单独的Span组件，用于在不同的text中解析表情包、解析话题等等。

问题：测试发现，如果是在List中，按下面代码封装Span，Span显示不出来。如果不是List中的话，是正常的。

测试代码

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State array: Array<String> = new Array()

  aboutToAppear(): void {
    let i = 0
    while (i < 30) {
      this.array.push("测试" + i)
      i++
    }
  }

  build() {
    Column() {
      List() {
        ForEach(this.array, (item: string, index: number) => {
          ListItem() {
            Text() {
              TestSpan({ content: item })
            }.height(50)
          }
        })
      }
    }
    .height('100%')
    .width('100%')
  }
}

@Component
struct TestSpan {
  @Prop
  content: string = ""
  build() {
    Span(this.content)
  }
}
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.
37.
38.
39.

HarmonyOS

Heiang

2025-01-09 14:18:04

701浏览

回答 1

按赞同

按时间

zbw_apple

Span只能作为Text、ContainerSpan的子组件显示，使用自定义组件包裹Span会受渲染时机影响导致显示异常，建议不要单独封装Span

本身Span只支持设置一些文本属性，可以考虑通过attributeModifier进行封装，参考：

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

//demo.ets
class MySpanModifier implements AttributeModifier<SpanAttribute> {
  //...
}

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State array: Array<String> = new Array()

  aboutToAppear(): void {
    console.log('start')
    let i = 0
    while (i < 10) {
      this.array.push("测试" + i)
      i++
    }
  }

  build() {
    Column() {
      List() {
        ForEach(this.array, (item: string, index: number) => {
          ListItem() {
            Text() {
              ForEach(this.array,(item:string)=>{
                Span(item).attributeModifier(new MySpanModifier())
              })
            }.height(50)
          }
        })
      }
    }
    .height('100%')
    .width('100%')
  }
}
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.
37.
38.

2025-01-09 17:00:17

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

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Span的封装问题

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