介紹

在本教程中，我們將通過一個簡單的樣例，學習如何使用聲明式UI編程框架的基礎組件。本篇Codelab將會使用Image組件、Slider組件、Text組件共同實現一個可調節的風車動畫，實現效果如圖所示：

相關概念

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

環境搭建

軟件要求

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

硬件要求

• 開發板類型：[潤和RK3568開發板]。
• OpenHarmony系統：3.2 Release。

環境搭建

完成本篇Codelab我們首先要完成開發環境的搭建，本示例以RK3568開發板為例，參照以下步驟進行：

1. [獲取OpenHarmony系統版本]：標準系統解決方案（二進制）。以3.2 Release版本為例：
   
2. 搭建燒錄環境。
   1. [完成DevEco Device Tool的安裝]
   2. [完成RK3568開發板的燒錄]
3. 搭建開發環境。
   1. 開始前請參考[工具準備]，完成DevEco Studio的安裝和開發環境配置。
   2. 開發環境配置完成后，請參考[使用工程向導]創建工程（模板選擇“Empty Ability”）。
   3. 工程創建完成后，選擇使用[真機進行調測]。
   4. 鴻蒙開發指導文檔：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

代碼結構解讀

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

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

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

頁面結構

整個程序的頁面構造十分簡潔，由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
});
...