Rating
提供在給定范圍內(nèi)選擇評分的組件。
說明:
開發(fā)前請熟悉鴻蒙開發(fā)指導(dǎo)文檔 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md
]
該組件從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標單獨標記該內(nèi)容的起始版本。
子組件
無
接口
Rating(options?: { rating: number, indicator?: boolean })
從API version 9開始,該接口支持在ArkTS卡片中使用。
參數(shù)名 | 參數(shù)類型 | 必填 | 參數(shù)描述 |
---|---|---|---|
rating | number | 是 | 設(shè)置并接收評分值。 默認值:0 取值范圍: [0, stars] 小于0取0,大于stars取最大值stars。 從API version 10開始,該參數(shù)支持[$$]雙向綁定變量。 |
indicator | boolean | 否 | 設(shè)置評分組件作為指示器使用,不可改變評分。 默認值:false, 可進行評分**說明:**indicator=true時,默認組件高度height=12.0vp,組件width=height * stars。 indicator=false時,默認組件高度height=28.0vp,組件width=height * stars。 |
屬性
名稱 | 參數(shù)類型 | 描述 |
---|---|---|
stars | number | 設(shè)置評分總數(shù)。 默認值:5 從API version 9開始,該接口支持在ArkTS卡片中使用。**說明:**設(shè)置為小于等于0的值時,按默認值顯示。 |
stepSize | number | 操作評級的步長。 默認值:0.5 從API version 9開始,該接口支持在ArkTS卡片中使用。**說明:**設(shè)置為小于0.1的值時,按默認值顯示。 取值范圍為[0.1, stars]。 |
starStyle | { backgroundUri: string, foregroundUri: string, secondaryUri?: string } | backgroundUri:未選中的星級的圖片鏈接,可由用戶自定義或使用系統(tǒng)默認圖片。 foregroundUri:選中的星級的圖片路徑,可由用戶自定義或使用系統(tǒng)默認圖片。 secondaryUri:部分選中的星級的圖片路徑,可由用戶自定義或使用系統(tǒng)默認圖片。 從API version 9開始,該接口支持在ArkTS卡片中使用。**說明:**startStyle屬性所支持的圖片類型能力參考[Image]組件。 支持加載本地圖片和網(wǎng)絡(luò)圖片,暫不支持PixelMap類型和Resource資源。 默認圖片加載方式為異步,暫不支持同步加載。 設(shè)置值為undefined或者空字符串時,rating會選擇加載系統(tǒng)默認星型圖源。 |
說明:
rating寬高為[width, height]時,單個圖片的繪制區(qū)域為[width / stars, height]。
為了指定繪制區(qū)域為方形,建議自定義寬高時采取[height * stars, height], width = height * stars的方式。
事件
名稱 | 功能描述HarmonyOS與OpenHarmony鴻蒙文檔籽料:mau123789是v直接拿 |
---|---|
onChange(callback:(value: number) => void) | 操作評分條的評星發(fā)生改變時觸發(fā)該回調(diào)。 從API version 9開始,該接口支持在ArkTS卡片中使用。 |
示例
示例1
// xxx.ets
@Entry
@Component
struct RatingExample {
@State rating: number = 3.5
build() {
Column() {
Column() {
Rating({ rating: this.rating, indicator: false })
.stars(5)
.stepSize(0.5)
.margin({ top: 24 })
.onChange((value: number) = > {
this.rating = value
})
Text('current score is ' + this.rating)
.fontSize(16)
.fontColor('rgba(24,36,49,0.60)')
.margin({ top: 16 })
}.width(360).height(113).backgroundColor('#FFFFFF').margin({ top: 68 })
Row() {
Image('common/testImage.jpg')
.width(40)
.height(40)
.borderRadius(20)
.margin({ left: 24 })
Column() {
Text('Yue')
.fontSize(16)
.fontColor('#182431')
.fontWeight(500)
Row() {
Rating({ rating: 3.5, indicator: false }).margin({ top: 1, right: 8 })
Text('2021/06/02')
.fontSize(10)
.fontColor('#182431')
}
}.margin({ left: 12 }).alignItems(HorizontalAlign.Start)
Text('1st Floor')
.fontSize(10)
.fontColor('#182431')
.position({ x: 295, y: 8 })
}.width(360).height(56).backgroundColor('#FFFFFF').margin({ top: 64 })
}.width('100%').height('100%').backgroundColor('#F1F3F5')
}
}
示例2
// xxx.ets
@Entry
@Component
struct RatingExample {
@State rating: number = 3.5
build() {
Column() {
Rating({ rating: this.rating, indicator: false })
.stars(5)
.stepSize(0.5)
.starStyle({
backgroundUri: '/common/imag1.png', // common目錄與pages同級
foregroundUri: '/common/imag2.png',
secondaryUri: '/common/imag3.png'
})
.margin({ top: 24 })
.onChange((value: number) = > {
this.rating = value
})
Text('current score is ' + this.rating)
.fontSize(16)
.fontColor('rgba(24,36,49,0.60)')
.margin({ top: 16 })
}.width('100%').height('100%').backgroundColor('#F1F3F5')
}
}
審核編輯 黃宇
-
組件
+關(guān)注
關(guān)注
1文章
512瀏覽量
17817 -
鴻蒙
+關(guān)注
關(guān)注
57文章
2345瀏覽量
42822
發(fā)布評論請先 登錄
相關(guān)推薦
評論