「Mac暢玩鴻蒙與硬件45」UI互動應用篇22

「Mac暢玩鴻蒙與硬件45」UI互動應用篇22 - 評分統計工具

本篇將帶你實現一個評分統計工具，用戶可以對多個選項進行評分。應用會實時更新每個選項的評分結果，并統計平均分。這一功能適合用于問卷調查或評分統計的場景。
在這里插入圖片描述

關鍵詞

UI互動應用
評分統計
狀態管理
數據處理
多目標評分

一、功能說明

評分統計工具允許用戶對多個選項（如電影、餐廳或商品）分別評分，應用實時顯示每個選項的評分，并計算和顯示所有選項的平均評分。

二、所需組件

@Entry 和 @Component 裝飾器
Column 和 Row 布局組件
Text 組件用于顯示評分結果
Button 組件用于評分選擇
@State 修飾符用于狀態管理
Image 組件用于展示示例圖片

三、項目結構

項目名稱：RatingStatisticsApp
自定義組件名稱：RatingStatisticsPage
代碼文件：RatingStatisticsPage.ets、Index.ets

四、代碼實現

// 文件名：RatingStatisticsPage.ets@Component
export struct RatingStatisticsPage {@State ratings: number[] = [0, 0, 0]; // 每個選項的評分options: string[] = ['選項 1', '選項 2', '選項 3']; // 選項列表build() {Column({ space: 20 }) {// 示例圖片Image($r('app.media.cat')).width(226).height(266).alignSelf(ItemAlign.Center);// 顯示評分選項及評分按鈕ForEach(this.options, (option: string, index: number) => {Column({ space: 10 }) {Text(`${option} 當前評分: ${this.ratings[index]} / 5`).fontSize(20).alignSelf(ItemAlign.Start);Row({ space: 5 }) {ForEach([1, 2, 3, 4, 5], (score: number) => {Button(`${score}`).fontSize(18).backgroundColor(this.getButtonColor(index, score)) // 動態設置按鈕背景顏色.fontColor(Color.White).onClick(() => {this.setRating(index, score);});});}};});// 顯示平均評分Text(`平均評分: ${this.calculateAverage().toFixed(1)} / 5`).fontSize(22).fontWeight(FontWeight.Bold).alignSelf(ItemAlign.Center);}.padding(20).width('100%').height('100%');}// 設置評分private setRating(index: number, rating: number) {this.ratings[index] = rating;}// 動態獲取按鈕顏色private getButtonColor(index: number, score: number): Color {return this.ratings[index] >= score ? Color.Pink : Color.Gray; // 選中評分及其以下的按鈕變色}// 計算平均評分private calculateAverage(): number {const total = this.ratings.reduce((sum, rating) => sum + rating, 0);return total / this.ratings.length;}
}

// 文件名：Index.etsimport { RatingStatisticsPage } from './RatingStatisticsPage';@Entry
@Component
struct Index {build() {Column() {RatingStatisticsPage() // 調用評分統計工具頁面}.padding(20)}
}

效果示例：用戶可以為每個選項打分，評分實時更新，并計算和顯示平均評分。評分按鈕選中后及以下的按鈕會變為粉色，其余保持默認灰色。界面上還展示了示例圖片。

五、代碼解讀

狀態管理
- 通過 @State 修飾符管理 ratings 數組，實現評分的實時更新。
評分按鈕顏色動態變化
- 使用 getButtonColor 方法判斷當前評分按鈕的背景顏色。
- 被選中及以下的按鈕會變為粉色，未選中的保持默認灰色。
動態布局
- 使用 ForEach 遍歷 options 和評分值，動態生成評分按鈕及顯示當前評分的文本。
平均評分計算
- 通過 reduce 方法對所有選項的評分求和，計算出平均值。
示例圖片
- 使用 Image($r('app.media.cat')) 添加示例圖片，增強界面視覺效果。