ArkUI 框架基于鸿蒙系统的 Scroll 和 Scroller 和自定义组件之插槽的实战案例心得

Scroll、Scroller

作为一个可滚动的容器组件，Scroll 最多可以包含一个子组件。当子组件的布局尺寸在指定的滚动方向上超过“滚动”视图窗口时，子组件可以滚动。滚动方向仅支持水平和垂直滚动。作为滚动组件的控制器，滚动器可以控制滚动组件的某些行为，例如滚动到特定位置、滚动到边界等。

interface ScrollInterface {  (scroller?: Scroller): ScrollAttribute;}

Scroller：将滚动控制器绑定到滚动。控制器可以控制子组件的各种滚动能力。目前，滚动仅支持绑定到滚动和列表。

Scroll() {  Text('Text1')// 子组件的高度小于Scroll高度，不会触发滚动    .fontSize(26)    .size({width: 180, height: 40})    .backgroundColor('#aabbcc')}.width('100%').height(100).backgroundColor(Color.Pink)

结果如下

组件生命周期

ArkUI 开发框架为组件提供了独特的生命周期方法。对于系统组件，生命周期方法是 onAppear 和 onDisAppear。作者在第 3 章第 2 节中讨论了它们。我在这里不讨论它们，只讨论定制组件的生命周期。

组件的生命周期

使用 @Component 修饰的组件，ArkUI 开发框架将自动为其分配私有生命周期方法 aboutToAppear（）和 aboutToDisappear（（），用于通知开发人员自定义组件生命周期中的更改。AboutToAppear：该函数在创建自定义组件的新实例之后，在执行其 build（）函数之前执行。允许更改此函数中的状态变量，更改将在随后执行 build（）函数时生效。AboutToDisappear：该函数在销毁自定义组件之前执行。不允许更改此函数中的状态变量。特别是，修改 @Link 变量可能会导致应用程序行为不稳定。

页面的生命周期

页面本质上也是一个组件，但页面对组件有一个额外的修饰符@Entry。此修饰符表示当前组件是一个页面，需要在 config 中设置。对于 json 中的配置，除了组件的生命周期外，页面还具有自己独特的生命周期方法：OnPageShow：页面显示时触发一次，包括路由过程、应用程序访问前后控制台等场景。只有 @Entry 装饰的自定义组件生效。OnPageHide：当页面消失时触发一次，包括路由过程和应用程序进入前后控制台。只有 @Entry 修改的自定义组件才会生效。OnBackPress：当用户单击返回按钮时触发。只有 @Entry 修改的自定义组件才生效。此方法返回布尔类型值，如下所述：返回 true 表示页面本身处理返回逻辑，而不路由页面。返回 false 表示使用默认返回逻辑。未返回的值将被视为 false。部件寿命周期表比较如下：

📢： 这些回调函数是私有的，由开发框架在运行时的特定时间调用。无法从应用程序手动调用这些回调函数。📢： 允许在生命周期函数中使用 Promise 和异步回调函数，如网络资源获取、定时器设置等；生命周期函数中不允许异步等待。

可组合：允许开发人员组合内置组件和其他组件，以及公共属性和方法。可重用：可被其他组件重用，并作为不同父组件或容器中的不同实例使用；有一个生命周期：可以在组件中配置生命周期的回调方法，用于业务逻辑处理；数据驱动更新：可以由状态数据驱动，实现 UI 的自动更新。

Canvas 方式

画布在 API 版本 8 中正式提供。它提供了许多强大的绘图 API。我们可以使用 arc（）方法来绘制圆弧以实现环的效果。

@Component export struct Ring {  build() {  }}

@组件：表示环是组件。使用此修饰符时，必须实现 build（）方法。当组件创建或随后更新状态时，将调用此方法。我们只需要在 build（）方法中返回布局。导出：表示当前组件可以导出用于外部调用。

@Component export struct Ring {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  build() {    Canvas(this.context)      .width(90)      .height(90)      .onReady(() => {        this.context.lineWidth = 3;                   // 设置圆环的宽度        this.context.beginPath();                     // 开启路径        this.context.arc(45, 45, 45 - 3 / 2, 0, 6.28) // 绘制圆弧        this.context.stroke()                         // 刷新一下      })  }}

预览结果如下所示：

目前，环组件是通过画布绘制实现的，但无法设置环的颜色和大小。所以我们需要定义环的属性。

自定义组件之插槽

@BuilderParam 属性发现

在学习自定义组件时，我突然想到，如果自定义组件返回容器布局结构，那么直接向自定义组件添加子组件是否可行？因此，作者做了以下实验，首先定义了一个组件 CustomWidget，代码如下：

@Component struct CustomWidget {  build() {    Column() {    }    .width("100%")    .height(100)    .backgroundColor("#aabbcc")  }}

自定义组件 CustomWidget 返回带有背景颜色的 Column，因为它返回容器组件。作者理所当然地认为，子组件可以像其他容器组件一样直接添加到 CustomWidget 组件中，所以他尝试了。代码编写如下：

@Entry @Component struct CustomWidgetTest {  build() {    Column() {      CustomWidget() {   // 使用CustomWidget组件并给它添加了一个子组件Text        Text('测试子组件') // 添加子组件后编译报错      }    }    .width('100%')    .height('100%')  }}

打开预览器并准备查看运行效果。结果编译并报告错误。错误消息如下：

[Compile Result]  ETS:ERROR File: ***/entry/src/main/ets/MainAbility/pages/index.ets:4:7[Compile Result]  In the trailing lambda case, 'CustomWidget' must have one and only one property decorated with @BuilderParam, and its @BuilderParam expects no parameter.

根据错误消息提示，组件 CustomWidget 必须有且只有一个 @BuilderParam 修改的属性，该属性不需要参数。这就是作者找到 @BuilderParam 修饰符的原因。