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

2025-03-15
北京
本文字数：2214 字
阅读完需：约 7 分钟

1、HarmonyOS ArkUI 嵌套组件问题？

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

参考如下 demo：

import { CommComponent } from './CommComponent'import { ComponentStatus } from './CommonEnums'
@Componentexport 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';
@Concurrentfunction 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@Componentstruct 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 方法。

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/fa12201c7a4aad87d0af6d206】。文章转载请联系作者。