選擇評分的組件

2024-01-22 17:24 更新

提供在給定范圍內(nèi)選擇評分的組件。

說明

該組件從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標單獨標記該內(nèi)容的起始版本。

子組件

接口

Rating(options?: { rating: number, indicator?: boolean })

從API version 9開始,該接口支持在ArkTS卡片中使用。

參數(shù):

參數(shù)名

參數(shù)類型

必填

參數(shù)描述

rating

number

設(shè)置并接收評分值。

默認值:0

取值范圍: [0, stars]

小于0取0,大于stars取最大值stars。

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的方式。

事件

名稱

功能描述

onChange(callback:(value: number) => void)

操作評分條的評星發(fā)生改變時觸發(fā)該回調(diào)。

從API version 9開始,該接口支持在ArkTS卡片中使用。

示例

示例1

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct RatingExample {
  5. @State rating: number = 3.5
  6. build() {
  7. Column() {
  8. Column() {
  9. Rating({ rating: this.rating, indicator: false })
  10. .stars(5)
  11. .stepSize(0.5)
  12. .margin({ top: 24 })
  13. .onChange((value: number) => {
  14. this.rating = value
  15. })
  16. Text('current score is ' + this.rating)
  17. .fontSize(16)
  18. .fontColor('rgba(24,36,49,0.60)')
  19. .margin({ top: 16 })
  20. }.width(360).height(113).backgroundColor('#FFFFFF').margin({ top: 68 })
  21. Row() {
  22. Image('common/testImage.jpg')
  23. .width(40)
  24. .height(40)
  25. .borderRadius(20)
  26. .margin({ left: 24 })
  27. Column() {
  28. Text('Yue')
  29. .fontSize(16)
  30. .fontColor('#182431')
  31. .fontWeight(500)
  32. Row() {
  33. Rating({ rating: 3.5, indicator: false }).margin({ top: 1, right: 8 })
  34. Text('2021/06/02')
  35. .fontSize(10)
  36. .fontColor('#182431')
  37. }
  38. }.margin({ left: 12 }).alignItems(HorizontalAlign.Start)
  39. Text('1st Floor')
  40. .fontSize(10)
  41. .fontColor('#182431')
  42. .position({ x: 295, y: 8 })
  43. }.width(360).height(56).backgroundColor('#FFFFFF').margin({ top: 64 })
  44. }.width('100%').height('100%').backgroundColor('#F1F3F5')
  45. }
  46. }

示例2

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct RatingExample {
  5. @State rating: number = 3.5
  6. build() {
  7. Column() {
  8. Rating({ rating: this.rating, indicator: false })
  9. .stars(5)
  10. .stepSize(0.5)
  11. .starStyle({
  12. backgroundUri: '/common/imag1.png', // common目錄與pages同級
  13. foregroundUri: '/common/imag2.png',
  14. secondaryUri: '/common/imag3.png'
  15. })
  16. .margin({ top: 24 })
  17. .onChange((value: number) => {
  18. this.rating = value
  19. })
  20. Text('current score is ' + this.rating)
  21. .fontSize(16)
  22. .fontColor('rgba(24,36,49,0.60)')
  23. .margin({ top: 16 })
  24. }.width('100%').height('100%').backgroundColor('#F1F3F5')
  25. }
  26. }

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號