代码拉取完成，页面将自动刷新
在本教程中，我们将通过一个简单的样例，学习如何使用声明式UI编程框架的基础组件。本篇Codelab将会使用Image组件、Slider组件、Text组件共同实现一个可调节的风车动画，实现效果如图所示：
完成本篇Codelab我们首先要完成开发环境的搭建，本示例以RK3568开发板为例，参照以下步骤进行：
获取OpenHarmony系统版本：标准系统解决方案（二进制）。以3.2 Release版本为例：
搭建烧录环境。
搭建开发环境。
本篇Codelab只对核心代码进行讲解，完整代码可以直接从gitee获取。
├──entry/src/main/ets // 代码区
│ ├──common
│ │ └──Constants.ets // 常量
│ ├──entryability
│ │ └──EntryAbility.ts // 应用的入口
│ ├──pages
│ │ └──SliderPage.ets // 入口页面
│ └──view
│ └──PanelComponent.ets // 自定义组件
└──entry/src/main/resources // 资源文件目录
整个程序的页面构造十分简洁，由Image组件构成风车。自定义组件PanelComponent由Text组件和Slider组件构成，用来显示文本和控制图像，效果如图所示：
在SliderPage文件中，添加Image组件，给定使用图片的路径，并配置通用属性图形变换中的rotate属性和scale属性。自此，页面中已经有了风车的图像。
// SliderPage.ets
...
build() {
Column() {
Image($rawfile('windmill.png'))
.objectFit(ImageFit.Contain)
.height(Constants.IMAGE_SIZE)
.width(Constants.IMAGE_SIZE)
.rotate({
x: RotatePosition.X,
y: RotatePosition.Y,
z: RotatePosition.Z,
angle: this.angle
})
.scale({ x: this.imageSize, y: this.imageSize })
...
}
.justifyContent(FlexAlign.End)
.height(Constants.PERCENTAGE_100)
.backgroundColor($r('app.color.background_color'))
}
...
效果如图所示：
在speedChange()函数中，以固定的时间间隔调整rotate的角度，也就是参数angle。onPageShow是SliderPage页面的生命周期方法，在其中调用speedChange()函数，表示从程序启动时，便开始执行。自此我们已经实现了风车的旋转效果。代码如下：
// SliderPage.ets
...
speedChange(): void {
this.angle = Constants.ANGLE;
this.interval = setInterval(() => {
this.angle += this.speed;
}, Constants.DELAY_TIME)
}
onPageShow(): void {
clearInterval(this.interval);
this.speedChange();
}
...
在PanelComponent的构造参数中，给定调节转速的初始值和样式。在callback事件中，将子组件Slider滑动的value给到事先定义好的变量speed，实现Text组件的更新，并且通过调用speedChange()方法实现转速的改变。代码如下：
// SliderPage.ets
...
PanelComponent({
mode: SliderMode.SPEED,
title: $r('app.string.speed_text'),
text: this.speed.toFixed(Constants.FRACTION_DIGITS),
callback: ((value: number, mode: SliderChangeMode) => {
this.speed = value;
clearInterval(this.interval);
this.speedChange();
}),
options: {
value: this.speed,
min: SliderSpeed.MIN,
max: SliderSpeed.MAX,
step: SliderSpeed.STEP,
style: SliderStyle.InSet
}
})
...
在PanelComponent的构造参数中，给定调节大小的初始值和样式。在callback事件中，将子组件Slider滑动的value给到事先定义好的变量imageSize，实现Text组件的更新和调节风车大小。代码如下：
// SliderPage.ets
...
PanelComponent({
mode: SliderMode.SCALE,
title: $r('app.string.scale_text'),
text: this.imageSize.toFixed(Constants.FRACTION_DIGITS),
callback: ((value: number, mode: SliderChangeMode) => {
this.imageSize = value;
}),
options: {
value: this.imageSize,
min: SliderScale.MIN,
max: SliderScale.MAX,
step: SliderScale.STEP,
style: SliderStyle.InSet
}
})
.margin({
bottom: Constants.PANEL_MARGIN_BOTTOM,
top: Constants.PANEL_MARGIN_TOP
});
...
您已经完成了本次Codelab的学习，并了解到以下知识点：
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
