写点什么

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

作者:黎燃
  • 2022-11-21
    内蒙古
  • 本文字数:2339 字

    阅读完需:约 8 分钟

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 修饰符的原因。

发布于: 刚刚阅读数: 4
用户头像

黎燃

关注

前端工程师 2022-05-06 加入

专注学习分享前端知识。

评论

发布
暂无评论
ArkUI框架基于鸿蒙系统的Scroll和Scroller和自定义组件之插槽的实战案例心得_前端_黎燃_InfoQ写作社区