HarmonyOS鸿蒙Next中怎么解决自定义Span组件在NavDestination下无法显示问题

【问题现象】

包含Span组件的自定义组件，包含在Text组件下，使得该Text组件置于NavDestination页面下，结果该自定义组件Span里的内容：Span自定义组件内容，没有显示。如下图：

【背景知识】

• Text组件：Text是文本组件，通常用于展示用户视图，如显示文章的文字。
• NavDestination组件：设置系统状态栏的样式组件。

【定位思路】

• Page会把全部的自定义组件都展开，Text组件解析到了自定义组件下。
• NavDestination机制不会全部展开自定义组件依赖后续组件内部自行展开，Text组件非容器组件，没有在解析子组件时做展开自定义操作。

【解决方案】

（1）Text不支持自定义组件，且Span组件作为Text、ContainerSpan组件的子组件，只能在这两个组件内使用，把Text和其下的Span抽离出来成单独的组件。

代码示例如下：

@Component
export struct pageOne{
  build() {
    NavDestination(){
      Column(){
        Text() {
          Span('Text直接包含的Span子组件1\n')
          Span('Text直接包含的Span子组件2\n')
          Span('Span自定义组件内容')
        }
      }.height('100%')
      .justifyContent(FlexAlign.Center)
    }
  }
}

@Entry
@Component
struct Index {
  pageInfos: NavPathStack = new NavPathStack()

  aboutToAppear(): void {
    console.info('nav index')
  }

  [@Builder](/user/Builder)
  pages() {
    pageOne()
  }

  build() {
    Navigation(this.pageInfos){
      Column(){
        Button('点击跳转到NavDestination页面')
          .onClick(()=>{
            this.pageInfos.pushPath({ name: 'pageOne' })
          })
      }.height('100%')
      .justifyContent(FlexAlign.Center)

    }.navDestination(this.pages)
  }
}

最终效果：

（2）如果Span组件是一组公共的特性，则可以通过@Builder装饰器把公共的部分抽取出来。

代码示例如下：

@Component
export struct pageOne{
  build() {
    NavDestination(){
      Column(){
        Text() {
          this.newLocalBuilder()
        }
      }.height('100%')
      .justifyContent(FlexAlign.Center)
    }
  }

  [@Builder](/user/Builder)
  newLocalBuilder() {
    Span('Text直接包含的Span子组件1\n')
    Span('Text直接包含的Span子组件2\n')
    Span('Span自定义组件内容')
  }
}

@Entry
@Component
struct Index {
  pageInfos: NavPathStack = new NavPathStack()

  aboutToAppear(): void {
    console.info('nav index')
  }

  [@Builder](/user/Builder)
  pages() {
    pageOne()
  }

  build() {
    Navigation(this.pageInfos){
      Column(){
        Button('点击跳转到NavDestination页面')
          .onClick(()=>{
            this.pageInfos.pushPath({ name: 'pageOne' })
          })
      }.height('100%')
      .justifyContent(FlexAlign.Center)

    }.navDestination(this.pages)
  }
}

最终效果：

（3）如果需要使用自定义组件，应该选择支持自定义子组件的组件，比如Column组件。

代码示例如下：

@Component
export struct CustomSpan{

  aboutToAppear(): void {
    console.info('nav custom span')
  }
  build() {
    Text('Span自定义组件内容')
  }
}

@Component
export struct pageOne{
  build() {
    NavDestination(){
      Column(){
        Text() {
          Span('Text直接包含的Span子组件1\n')
          Span('Text直接包含的Span子组件2\n')
        }
        CustomSpan()
      }.height('100%')
      .justifyContent(FlexAlign.Center)
    }
  }
}

@Entry
@Component
struct Index {
  pageInfos: NavPathStack = new NavPathStack()

  aboutToAppear(): void {
    console.info('nav index')
  }

  [@Builder](/user/Builder)
  pages() {
    pageOne()
  }

  build() {
    Navigation(this.pageInfos){
      Column(){
        Button('点击跳转到NavDestination页面')
          .onClick(()=>{
            this.pageInfos.pushPath({ name: 'pageOne' })
          })
      }.height('100%')
      .justifyContent(FlexAlign.Center)

    }.navDestination(this.pages)
  }
}

最终效果：

【总结】

• 组件下的子组件在使用时，首先要判断该组件支持的子组件类型，只有支持的子组件才能使用，才能保证所有场景都正确显示，比如Span组件只能在Text、ContainerSpan组件里使用。所以，最好按照组件规格说明来使用组件。
• 自定义组件在使用时，要判断其所在父组件是否支持自定义组件，如果不支持，则不应该包含自定义组件。比如Text组件不支持自定义组件，就不能在Text的子组件里使用自定义组件。否则，系统不能保证所有场景显示都符合预期。
• 自定义组件在使用时，也要判断自定义组件的最外层组件的使用范围。比如，自定义组件最外层是Span，而Span只能在Text和ContainerSpan里使用，如果用在Column里，则不会生效。