鸿蒙实战开发-如何使用声明式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
});
...