鸿蒙实战开发-如何使用声明式UI编程框架的基础组件

介绍

在本教程中，我们将通过一个简单的样例，学习如何使用声明式UI编程框架的基础组件。本篇Codelab将会使用Image组件、Slider组件、Text组件共同实现一个可调节的风车动画，实现效果如图所示

环境搭建

软件要求

DevEco Studio版本：DevEco Studio 3.1 Release。
OpenHarmony SDK版本：API version 9。

硬件要求

开发板类型：润和RK3568开发板。
OpenHarmony系统：3.2 Release。

环境搭建

完成本篇Codelab我们首先要完成开发环境的搭建，本示例以RK3568开发板为例，参照以下步骤进行：

获取OpenHarmony系统版本：标准系统解决方案（二进制）。以3.2 Release版本为例：

2.搭建烧录环境。

完成DevEco Device Tool的安装
完成RK3568开发板的烧录

3.搭建开发环境。

开始前请参考工具准备，完成DevEco Studio的安装和开发环境配置。
开发环境配置完成后，请参考使用工程向导创建工程（模板选择“Empty Ability”）。
工程创建完成后，选择使用真机进行调测。

代码结构解读

本篇Codelab只对核心代码进行讲解。

├──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
});
...