介紹

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

相關(guān)概念

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

環(huán)境搭建

軟件要求

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

硬件要求

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

環(huán)境搭建

完成本篇Codelab我們首先要完成開發(fā)環(huán)境的搭建，本示例以RK3568開發(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開發(fā)板的燒錄]
3. 搭建開發(fā)環(huán)境。
   1. 開始前請參考[工具準(zhǔn)備]，完成DevEco Studio的安裝和開發(fā)環(huán)境配置。
   2. 開發(fā)環(huán)境配置完成后，請參考[使用工程向?qū)創(chuàng)建工程（模板選擇“Empty Ability”）。
   3. 工程創(chuàng)建完成后，選擇使用[真機(jī)進(jìn)行調(diào)測]。
   4. 鴻蒙開發(fā)指導(dǎo)文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

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

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

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

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

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

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

添加風(fēng)車

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

// 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)車動起來

在speedChange()函數(shù)中，以固定的時間間隔調(diào)整rotate的角度，也就是參數(shù)angle。onPageShow是SliderPage頁面的生命周期方法，在其中調(diào)用speedChange()函數(shù)，表示從程序啟動時，便開始執(zhí)行。自此我們已經(jīng)實(shí)現(xiàn)了風(fēng)車的旋轉(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)車的轉(zhuǎn)速

在PanelComponent的構(gòu)造參數(shù)中，給定調(diào)節(jié)轉(zhuǎn)速的初始值和樣式。在callback事件中，將子組件Slider滑動的value給到事先定義好的變量speed，實(shí)現(xiàn)Text組件的更新，并且通過調(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)車的大小

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

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