【每日学点HarmonyOS Next知识】嵌套组件、装饰器报错、迭代列表刷新、单位换算、tabs组件生命周期

1、HarmonyOS ArkUI 嵌套组件问题？

1、我想对组件进行一层包裹，该怎么做
2、我想对 @Component 修饰的 build()函数包裹一层，用来实现通用的loading和error展示。有好的封装方法吗？

参考如下demo：

import { CommComponent } from './CommComponent'
import { ComponentStatus } from './CommonEnums'

@Component
export struct Index2 {
  @State componentStatus: ComponentStatus = ComponentStatus.SUCCESS;
  build() {
    Column() {
      // 从调用的地方传入builder的内容
      CommComponent({componentStatus: this.componentStatus, builder: this.successBuild })
    }.height('50%').width('100%')


    // CommComponent(ComponentStatus.LOADING, this.successBuild)
  }

  @Builder
  successBuild() {

    Text('成功的展示')
      .fontSize(30)
      .width(100)
      .height(100)
      .borderWidth(2)
  }
}

// //CommComponent 的builder方法改成这个，componentStatus这个其实可以在调用时决定可以不传
build() {
  // console.log("MinePage")
  // hilog.info(0x0000, 'testTag', '%{public}s', 'it begin')
  this.builder()

}

2、HarmonyOS @Concurrent装饰器报错？

Concurrent装饰器始终报错：Decorator function return type is ‘void | TypedPropertyDescriptor<unknown>’ but is expected to be ‘void’ or ‘any’. Type ‘TypedPropertyDescriptor<unknown>’ is not assignable to type ‘void’. <ArkTSCheck>

参考代码：

import taskpool from '@ohos.taskpool';

@Concurrent
function testPromise(args1: number, args2: number): Promise<number> {
  return new Promise<number>((testFuncA, testFuncB) => {
    testFuncA(args1 + args2);
  });
}

export class FCDemoTest {
  public static instance: FCDemoTest = new FCDemoTest();

  private constructor() {
  }

  checkInfo() {
    let task1: taskpool.Task = new taskpool.Task(testPromise, 1, 2);
    taskpool.execute(task1).then((d: object) => {
      console.info("task1 res is: " + d)
    }).catch((e: object) => {
      console.info("task1 catch e: " + e)
    })
  }
}

3、HarmonyOS ForEach列表刷新问题？

列表的刷新后的发布时间没有更新，因为刷新后数据源确实完全一致，但发布时间是通过当前的时间和发布时间的差值计算出来的，例如刚刚发布，2分钟前，1小时前这种，由于forEach只判断数据源是否发生变化，所以刷新后不会更新

可以尝试将时间差值加进数据源中，刷新时更新时间差，并把时间差作为forEach中keyGenerator的键值。可以实现刷新时重新计算时间差，并更新数据源中的时间差，达到数据源的变化从而更新数据。也可以自定义keyGenerator的键值的差值来实现自定义keyGenerator键值和前面提到的用时间差作为键值是一个意思，也需要循环加入进数据源中。此外还有一种方法，创建两个相同的，切换刷新，具体代码如下：

@Entry
@Component
struct Index {
  @State one: boolean = true;
  @State two: boolean = true;

  build() {
    Row() {
      Column() {
        Row() {
          Text('A')
            .layoutWeight(1)
          if (this.two) {
            Toggle({ type: ToggleType.Switch, isOn: this.one })
              .enabled(!this.two)
              .onChange((isOn) => {
                this.one = isOn;
              })
          } else {
            Toggle({ type: ToggleType.Switch, isOn: this.one })
              .enabled(!this.two)
              .onChange((isOn) => {
                this.one = isOn;
              })
          }
        }

        Row() {
          Text('B')
            .layoutWeight(1)
          Toggle({ type: ToggleType.Switch, isOn: this.two })
            .onChange((isOn) => {
              this.two = isOn;
            })
        }
        .margin({ top: "25vp" })
      }
      .width('100%')
      .margin({ left: '24vp', right: '24vp' })
      .layoutWeight(1)

    }
    .height('100%')
  }
}

4、HarmonyOS RenderNode的单位换算？

如何转换这两个单位。drawRect的 right 和 bottom 值设置多少才能于 frame 框一致？

将vp和px进行一个换算，参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-pixel-units-V5

ArkUI为开发者提供4种像素单位，采用vp为基准数据单位。

5、HarmonyOS tab页面如果想让页面每次展示的时候都调用一遍，该如何实现，onPageShow方法不走？

tab页面如果想让页面每次展示的时候都调用一遍，该如何实现，onPageShow方法不走

tabs组件切换不执行onPageShow生命周期，因为onPageShow是页面级的生命周期，tabs切换触发的应该是子组件组件级的生命周期aboutToAppear()， 可以将showPage()放在该生命周期内调用。推荐 使用onTabBarClick(event: (index: number) => void)获取父组件当前点击的tabIndex，在父组件中通过@State定义一个currentTabIndex变量，在onTabBarClick回调中将index赋值给currentTabIndex，并将这个值传递给TabContent包裹的子组件。在子组件中通过@Props和@Watch来监听父组件传递值的不同，执行各个tabContent中的showPage方法。