绚烂夏花之技——初识HarmonyOS自定义组件原创

夏花如梦

发布于 2024-11-13 19:34

浏览

0收藏

亲爱的小伙伴们，在这个充满无限可能的璀璨日子里，让我们一同走进HarmonyOS的世界，探索那些能够让我们的App绽放个性光彩的自定义组件。这些小宝贝们不仅能够让我们的应用界面更加整洁，还能赋予它们更强大的功能。无论你是刚刚踏上编程之旅的新手，还是已经积累了一定经验的进阶者，这里都有适合你的知识宝藏。

新手上路：基础须知

首先，我们要了解自定义组件究竟是什么。简单来说，它们就像是一盒五彩斑斓的蜡笔，你可以用它们在应用的画布上绘制出任何你想要的图案。这些组件不仅能够重复使用，还能通过状态变量来控制它们的行为。

自定义组件的三板斧

@Component：这个装饰器就像是给HarmonyOS的一个信号，告诉它“嘿，这是一个自定义组件”。
build()函数：这是自定义组件的心脏，里面定义了组件的UI结构。
状态变量：比如@State，@Prop，这些变量的变化会触发组件的重新渲染。

进阶之路：注意事项和坑点

对于已经有一定基础的小伙伴们，这里有一些你需要注意的事项和容易踩到的坑。

状态变量和UI更新

状态变量的更新是驱动UI变化的核心。当你改变一个状态变量的值时，HarmonyOS会重新渲染依赖于这个变量的UI部分。这就是数据驱动UI更新的魅力所在。

性能优化

在自定义组件中，性能优化是一个重要的议题。你需要注意以下几点：

避免不必要的重新渲染：只有当状态变量真正改变时，才应该触发UI更新。
合理使用生命周期函数：比如aboutToAppear和aboutToDisappear，它们可以帮助你在合适的时机进行资源的分配和回收。
避免在build()中使用复杂逻辑：这会拖慢UI的渲染速度。

代码实现细节

下面是一个自定义组件的简单实现，包含了状态变量和事件处理：

// 导入必要的模块
import { Component, State } from '@ohosarkui';

// 定义自定义组件
@Component
struct MyCustomComponent {
  @State private message: string = 'Hello, World!';

  // 事件处理函数
  private onMessageTap() {
    this.message = 'Hello, ArkUI!';
  }

  // 构建函数
  build() {
    Column() {
      Text(this.message)
        .fontSize(16)
        .fontWeight(FontWeight.Bold)
        .onClick(() => this.onMessageTap());
    }
  }
}

在这个例子中，我们有一个状态变量message，当用户点击文本时，它会更新，并且触发UI的重新渲染。

进阶者须知：高级技巧

对于已经小有成就的进阶者来说，可能已经熟悉了基本的自定义组件创建和使用，但是还有一些高级技巧可以让你的组件更加强大。

自定义布局

如果你需要更精细的控制子组件的布局，可以使用onMeasureSize和onPlaceChildren这两个接口。这两个接口允许你自定义子组件的大小和位置。

@Component
struct CustomLayoutComponent {
  @Builder
  doLayoutBuilder(): void {}

  onMeasureSize(availableSize: Size): Size {
    // 计算子组件的大小
    return {
      width: availableSize.width,
      height: availableSize.height,
    };
  }

  onPlaceChildren(finalSize: Size, children: Array<Layoutable>): void {
    // 设置子组件的位置
    children.forEach((child) => {
      child.layout({ x: 0, y: 0 });
    });
  }

  build() {
    this.doLayoutBuilder();
  }
}

避免常见的坑

不要在build()中直接修改状态变量：这会导致无限循环渲染。
不要在UI描述中使用console.info：这会影响性能，并且不会在UI上显示。
不要使用switch语句：HarmonyOS更倾向于使用if-else逻辑。

代码汇总

// 新手参考
// 导入必要的模块
import { Component, State } from '@ohosarkui';

// 定义自定义组件
@Component
struct MyCustomComponent {
  @State private message: string = 'Hello, World!';

  // 事件处理函数
  private onMessageTap() {
    this.message = 'Hello, ArkUI!';
  }

  // 构建函数
  build() {
    Column() {
      Text(this.message)
        .fontSize(16)
        .fontWeight(FontWeight.Bold)
        .onClick(() => this.onMessageTap());
    }
  }
}

// 进阶者参考
@Component
struct CustomLayoutComponent {
  @Builder
  doLayoutBuilder(): void {}

  onMeasureSize(availableSize: Size): Size {
    // 计算子组件的大小
    return {
      width: availableSize.width,
      height: availableSize.height,
    };
  }

  onPlaceChildren(finalSize: Size, children: Array<Layoutable>): void {
    // 设置子组件的位置
    children.forEach((child) => {
      child.layout({ x: 0, y: 0 });
    });
  }

  build() {
    this.doLayoutBuilder();
  }
}