介紹

在本教程中，我們將通過(guò)一個(gè)簡(jiǎn)單的樣例，學(xué)習(xí)如何使用聲明式UI編程框架的基礎(chǔ)組件。本篇Codelab將會(huì)使用Image組件、Slider組件、Text組件共同實(shí)現(xiàn)一個(gè)可調(diào)節(jié)的風(fēng)車(chē)動(dòng)畫(huà)，實(shí)現(xiàn)效果如圖所示：

相關(guān)概念

• [Text組件]：文本組件，用于呈現(xiàn)一段信息。
• [Image組件]：圖片組件，用來(lái)渲染展示圖片。
• [Slider組件]：滑動(dòng)條組件，用來(lái)快速調(diào)節(jié)設(shè)置值，如音量、亮度等。

環(huán)境搭建

軟件要求

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

硬件要求

• 開(kāi)發(fā)板類型：[潤(rùn)和RK3568開(kāi)發(fā)板]。
• OpenHarmony系統(tǒng)：3.2 Release。

環(huán)境搭建

完成本篇Codelab我們首先要完成開(kāi)發(fā)環(huán)境的搭建，本示例以RK3568開(kāi)發(fā)板為例，參照以下步驟進(jìn)行：

1. [獲取OpenHarmony系統(tǒng)版本]：標(biāo)準(zhǔn)系統(tǒng)解決方案（二進(jìn)制）。以3.2 Release版本為例：
   
2. 搭建燒錄環(huán)境。
   1. [完成DevEco Device Tool的安裝]
   2. [完成RK3568開(kāi)發(fā)板的燒錄](méi)
3. 搭建開(kāi)發(fā)環(huán)境。
   1. 開(kāi)始前請(qǐng)參考[工具準(zhǔn)備]，完成DevEco Studio的安裝和開(kāi)發(fā)環(huán)境配置。
   2. 開(kāi)發(fā)環(huán)境配置完成后，請(qǐng)參考[使用工程向?qū)創(chuàng)建工程（模板選擇“Empty Ability”）。
   3. 工程創(chuàng)建完成后，選擇使用[真機(jī)進(jìn)行調(diào)測(cè)]。
   4. 鴻蒙開(kāi)發(fā)指導(dǎo)文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

代碼結(jié)構(gòu)解讀

本篇Codelab只對(duì)核心代碼進(jìn)行講解，完整代碼可以直接從gitee獲取。

├──entry/src/main/ets             // 代碼區(qū)      
│  ├──common                        
│  │  └──Constants.ets            // 常量
│  ├──entryability
│  │  └──EntryAbility.ts          // 應(yīng)用的入口
│  ├──pages
│  │  └──SliderPage.ets           // 入口頁(yè)面
│  └──view                         
│     └──PanelComponent.ets       // 自定義組件
└──entry/src/main/resources       // 資源文件目錄

`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

頁(yè)面結(jié)構(gòu)

整個(gè)程序的頁(yè)面構(gòu)造十分簡(jiǎn)潔，由Image組件構(gòu)成風(fēng)車(chē)。自定義組件PanelComponent由Text組件和Slider組件構(gòu)成，用來(lái)顯示文本和控制圖像，效果如圖所示：

添加風(fēng)車(chē)

在SliderPage文件中，添加Image組件，給定使用圖片的路徑，并配置通用屬性[圖形變換]中的rotate屬性和scale屬性。自此，頁(yè)面中已經(jīng)有了風(fēng)車(chē)的圖像。

// 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'))
  }
...

效果如圖所示：

如何讓風(fēng)車(chē)動(dòng)起來(lái)

在speedChange()函數(shù)中，以固定的時(shí)間間隔調(diào)整rotate的角度，也就是參數(shù)angle。onPageShow是SliderPage頁(yè)面的生命周期方法，在其中調(diào)用speedChange()函數(shù)，表示從程序啟動(dòng)時(shí)，便開(kāi)始執(zhí)行。自此我們已經(jīng)實(shí)現(xiàn)了風(fēng)車(chē)的旋轉(zhuǎn)效果。代碼如下：

// 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();
  }
...

調(diào)節(jié)風(fēng)車(chē)的轉(zhuǎn)速

在PanelComponent的構(gòu)造參數(shù)中，給定調(diào)節(jié)轉(zhuǎn)速的初始值和樣式。在callback事件中，將子組件Slider滑動(dòng)的value給到事先定義好的變量speed，實(shí)現(xiàn)Text組件的更新，并且通過(guò)調(diào)用speedChange()方法實(shí)現(xiàn)轉(zhuǎn)速的改變。代碼如下：

// 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
  }
})
...

調(diào)節(jié)風(fēng)車(chē)的大小

在PanelComponent的構(gòu)造參數(shù)中，給定調(diào)節(jié)大小的初始值和樣式。在callback事件中，將子組件Slider滑動(dòng)的value給到事先定義好的變量imageSize，實(shí)現(xiàn)Text組件的更新和調(diào)節(jié)風(fēng)車(chē)大小。代碼如下：

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