鴻蒙開發(fā)ArkUI優(yōu)秀實踐—Rating組件
??想了解更多關(guān)于開源的內(nèi)容，請訪問：??
本節(jié)講解評分條組件Rating的兩種基本使用方法：用作表單組件和用作展示組件。
首先我們看下Rating組件的接口、屬性和事件的說明：
/**
* 3.9 Rating組件
* 評分條組件。
*
* 接口:
* Rating(options?: { rating: number, indicator?: boolean })
* rating:number 默認值0，設(shè)置并接收評分值。
* indicator:boolean 默認值false，僅作為指示器使用，不可操作。
*
* 屬性:
* .stars(number) 默認值5，設(shè)置評星總數(shù)。
* .stepSize(number) 默認值0.5，操作評級的步長。
* .starStyle({
* backgroundUri: string, // 未選中的星級的圖片路徑
* foregroundUri: string, // 選中的星級的圖片路徑
* secondaryUri?: string // 部分選中的星級的圖片路徑
* })
* 圖片路徑可由用戶自定義或使用系統(tǒng)默認圖片，僅支持本地。
*
* 事件:
* onChange(callback:(value: number) => void) 操作評分條的評星發(fā)生改變時觸發(fā)該回調(diào)。
*/
1、用作表單組件
Rating組件用作表單組件時，通常需要配合onChange事件獲得評分后的值，用于后續(xù)表單提交的參數(shù)值。接口參數(shù)rating是必須提供的，indicator參數(shù)不需要提供。屬性.stars、.stepSize和.starStyle的默認值能滿足我們絕大部分場景下的需要，所以也不需要提供。示范代碼如下：
H8({text:'1.用作表單組件'})
Row(){
TextBody1({text: '請給客服評分'})
Blank()
Rating({rating: 0})
.onChange((value: number) => {
console.log('評分結(jié)果為：' + value.toString())
})
}.width('100%')
實際項目中可以將上述H8和TextBody1的文本改為文本資源調(diào)用(string.json)，以適應(yīng)多語言顯示的需要。運行效果如下：
2、用作展示組件
將Rating組件用作展示組件時，需要設(shè)置接口參數(shù)indicator為true，使Rating組件不可操作。示范代碼如下：
H8({text:'2.用作展示組件'})
Row(){
TextBody1({text: '客服綜合評分'})
Blank()
Rating({rating: 3.7, indicator: true}) // 作為指示器使用
.onChange((value: number) => {
console.log('評分結(jié)果為：' + value.toString())
})
}.width('100%')
運行效果如下：
這里有三個小問題：
1.評分組件展示的顆粒度最小為0.5，無法表現(xiàn)3.7分，只能“四舍五入”后展示。3.7分和3.5分效果相同，3.8分和4分效果相同。
2.indicator賦值true后，雖然點擊后不會改變評分值，但是“五角星”變得很小了。
3.上述代碼中我故意使用了onChange事件，發(fā)現(xiàn)仍然可以捕捉評分值，但永遠是3.5(最接近3.7的分值)。當(dāng)然，實際應(yīng)用中，如果Rating組件用作展示組件，不要寫onChange事件。
基于上述Beta版組件的不足，我的使用建議是不要使用indicator參數(shù)，而是用enabled屬性實現(xiàn)效果。代碼如下：
Row(){
TextBody1({text: '客服綜合評分'})
Blank()
Rating({rating: 3.7}) // 不使用indicator參數(shù)
.enabled(false) // 使用enabled參數(shù)
.onChange((value: number) => {
console.log('評分結(jié)果為：' + value.toString())
})
}.width('100%')
現(xiàn)在，外觀恢復(fù)正常了，onChange事件也徹底失效了。效果如下：
OK，上面是個小插曲，現(xiàn)在正式演示Rating組件作為展示組件的完整用法，代碼如下：
H8({text:'綜合評分'})
Row(){
TextBody1({text: '商品評分（4.4）'})
Blank()
Rating({rating: 4.4})
.enabled(false)
.stars(5) // 設(shè)置評星總數(shù)
.stepSize(0.5) // 操作評級的步長
.starStyle({
backgroundUri:'/common/images/star_bg.png', // 未選中的星級的圖片路徑
foregroundUri:'/common/images/star_fg.png', // 選中的星級的圖片路徑
secondaryUri:'/common/images/star_2.png' // 部分選中的星級的圖片路徑
})
}.width('100%')
Row(){
TextBody1({text: '物流評分（3.7）'})
Blank()
Rating({rating: 3.7})
.enabled(false)
.stars(5)
.stepSize(0.5)
.starStyle({
backgroundUri:'/common/images/star_bg.png',
foregroundUri:'/common/images/star_fg.png',
secondaryUri:'/common/images/star_2.png'
})
}.width('100%')
Row(){
TextBody1({text: '客服評分（4.8）'})
Blank()
Rating({rating: 4.8})
.enabled(false)
.stars(5)
.stepSize(0.5)
.starStyle({
backgroundUri:'/common/images/star_bg.png',
foregroundUri:'/common/images/star_fg.png',
secondaryUri:'/common/images/star_2.png'
})
}.width('100%')
效果如下：
最后，提醒一點，當(dāng)前評分總數(shù)建議不要設(shè)置(使用默認值5即可)。如果設(shè)置為10，你會發(fā)現(xiàn)，Rating組件寬度不變，圖片會被壓縮變形。
源碼地址：https://gitee.com/cloudev/harmonyos3/tree/master/3.0/BaseComponent 。
