1# Rating 2 3提供在给定范围内选择评分的组件。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12无 13 14 15## 接口 16 17Rating(options?: { rating: number, indicator?: boolean }) 18 19从API version 9开始，该接口支持在ArkTS卡片中使用。 20 21**参数：** 22 23| 参数名 | 参数类型 | 必填 | 参数描述 | 24| --------- | ------- | ---- | ---------------------------------------- | 25| rating | number | 是 | 设置并接收评分值。<br/>默认值：0<br/>取值范围： [0, stars]<br/>小于0取0，大于stars取最大值stars。 | 26| indicator | boolean | 否 | 设置评分组件作为指示器使用，不可改变评分。<br/>默认值：false, 可进行评分<br/>**说明：** <br/>indicator=true时，默认组件高度height=12.0vp，组件width=height*stars。<br/>indicator=false时，默认组件高度height=28.0vp，组件width=height*stars。 | 27 28 29## 属性 30 31| 名称 | 参数类型 | 描述 | 32| --------- | ---------------------------------------- | ---------------------------------------- | 33| stars | number | 设置评分总数。<br/>默认值：5 <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>设置为小于0的值时，按默认值显示。 | 34| stepSize | number | 操作评级的步长。<br/>默认值：0.5 <br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>设置为小于0的值时，按默认值显示。<br/>取值范围为[0.1, stars]。 | 35| starStyle | {<br/>backgroundUri: string,<br/>foregroundUri: string,<br/>secondaryUri?: string<br/>} | backgroundUri：未选中的星级的图片链接，可由用户自定义或使用系统默认图片。<br/>foregroundUri：选中的星级的图片路径，可由用户自定义或使用系统默认图片。<br/>secondaryUir：部分选中的星级的图片路径，可由用户自定义或使用系统默认图片。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>startStyle属性所支持的图片类型能力参考[Image](ts-basic-components-image.md)组件。<br/>支持加载本地图片和网络图片，暂不支持PixelMap类型和Resource资源。<br/>默认图片加载方式为异步，暂不支持同步加载。<br/>设置值为undefined或者空字符串时，rating会选择加载系统默认星型图源。 | 36 37> **说明：** 38> 39> rating宽高为[width, height]时，单个图片的绘制区域为[width / stars, height]。 40> 41> 为了指定绘制区域为方形，建议自定义宽高时采取[height * stars, height], width = height * stars的方式。 42 43 44## 事件 45 46| 名称 | 功能描述 | 47| ---------------------------------------- | ---------------------------------------- | 48| onChange(callback:(value: number) => void) | 操作评分条的评星发生改变时触发该回调。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 49 50## 示例 51 52### 示例1 53 54```ts 55// xxx.ets 56@Entry 57@Component 58struct RatingExample { 59 @State rating: number = 3.5 60 61 build() { 62 Column() { 63 Column() { 64 Rating({ rating: this.rating, indicator: false }) 65 .stars(5) 66 .stepSize(0.5) 67 .margin({ top: 24 }) 68 .onChange((value: number) => { 69 this.rating = value 70 }) 71 Text('current score is ' + this.rating) 72 .fontSize(16) 73 .fontColor('rgba(24,36,49,0.60)') 74 .margin({ top: 16 }) 75 }.width(360).height(113).backgroundColor('#FFFFFF').margin({ top: 68 }) 76 77 Row() { 78 Image('common/testImage.jpg') 79 .width(40) 80 .height(40) 81 .borderRadius(20) 82 .margin({ left: 24 }) 83 Column() { 84 Text('Yue') 85 .fontSize(16) 86 .fontColor('#182431') 87 .fontWeight(500) 88 Row() { 89 Rating({ rating: 3.5, indicator: false }).margin({ top: 1, right: 8 }) 90 Text('2021/06/02') 91 .fontSize(10) 92 .fontColor('#182431') 93 } 94 }.margin({ left: 12 }).alignItems(HorizontalAlign.Start) 95 96 Text('1st Floor') 97 .fontSize(10) 98 .fontColor('#182431') 99 .position({ x: 295, y: 8 }) 100 }.width(360).height(56).backgroundColor('#FFFFFF').margin({ top: 64 }) 101 }.width('100%').height('100%').backgroundColor('#F1F3F5') 102 } 103} 104``` 105 106 107 108### 示例2 109 110```ts 111// xxx.ets 112@Entry 113@Component 114struct RatingExample { 115 @State rating: number = 3.5 116 117 build() { 118 Column() { 119 Rating({ rating: this.rating, indicator: false }) 120 .stars(5) 121 .stepSize(0.5) 122 .starStyle({ 123 backgroundUri: '/common/imag1.png', // common目录与pages同级 124 foregroundUri: '/common/imag2.png', 125 secondaryUri: '/common/imag3.png' 126 }) 127 .margin({ top: 24 }) 128 .onChange((value: number) => { 129 this.rating = value 130 }) 131 Text('current score is ' + this.rating) 132 .fontSize(16) 133 .fontColor('rgba(24,36,49,0.60)') 134 .margin({ top: 16 }) 135 }.width('100%').height('100%').backgroundColor('#F1F3F5') 136 } 137} 138``` 139 140
