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。<br />从API version 10开始，该参数支持[$$](../../../quick-start/arkts-two-way-sync.md)双向绑定变量。 | 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.1的值时，按默认值显示。<br/>取值范围为[0.1, stars]。 | 35| starStyle | {<br/>backgroundUri: string,<br/>foregroundUri: string,<br/>secondaryUri?: string<br/>} | backgroundUri：未选中的星级的图片链接，可由用户自定义或使用系统默认图片。<br/>foregroundUri：选中的星级的图片路径，可由用户自定义或使用系统默认图片。<br/>secondaryUri：部分选中的星级的图片路径，可由用户自定义或使用系统默认图片。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>startStyle属性所支持的图片类型能力参考[Image](ts-basic-components-image.md)组件。<br/>支持加载本地图片和网络图片，暂不支持PixelMap类型和Resource资源。<br/>默认图片加载方式为异步，暂不支持同步加载。<br/>backgroundUri或者foregroundUri设置为undefined或者空字符串时，rating会选择加载系统默认星型图源。<br/>secondaryUri不设置或者设置的值为undefined或者空字符串时，优先设置为backgroundUri，效果上等同于只设置了foregroundUri、backgroundUri。 | 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|------------|-----------------------------| 53| Tab | 组件间切换焦点。 | 54| 左右方向键 | 评分预览增加/减少（步长为step），不改变实际分值。 | 55| Home | 移动到第一个星星， 不改变实际分值。 | 56| End | 移动到最后一个星星， 不改变实际分值。 | 57| Space/Enter | 根据当前评分提交评分结果。 | 58 59## 示例 60 61### 示例1 62 63```ts 64// xxx.ets 65@Entry 66@Component 67struct RatingExample { 68 @State rating: number = 3.5 69 70 build() { 71 Column() { 72 Column() { 73 Rating({ rating: this.rating, indicator: false }) 74 .stars(5) 75 .stepSize(0.5) 76 .margin({ top: 24 }) 77 .onChange((value: number) => { 78 this.rating = value 79 }) 80 Text('current score is ' + this.rating) 81 .fontSize(16) 82 .fontColor('rgba(24,36,49,0.60)') 83 .margin({ top: 16 }) 84 }.width(360).height(113).backgroundColor('#FFFFFF').margin({ top: 68 }) 85 86 Row() { 87 Image('common/testImage.jpg') 88 .width(40) 89 .height(40) 90 .borderRadius(20) 91 .margin({ left: 24 }) 92 Column() { 93 Text('Yue') 94 .fontSize(16) 95 .fontColor('#182431') 96 .fontWeight(500) 97 Row() { 98 Rating({ rating: 3.5, indicator: false }).margin({ top: 1, right: 8 }) 99 Text('2021/06/02') 100 .fontSize(10) 101 .fontColor('#182431') 102 } 103 }.margin({ left: 12 }).alignItems(HorizontalAlign.Start) 104 105 Text('1st Floor') 106 .fontSize(10) 107 .fontColor('#182431') 108 .position({ x: 295, y: 8 }) 109 }.width(360).height(56).backgroundColor('#FFFFFF').margin({ top: 64 }) 110 }.width('100%').height('100%').backgroundColor('#F1F3F5') 111 } 112} 113``` 114 115 116 117### 示例2 118 119```ts 120// xxx.ets 121@Entry 122@Component 123struct RatingExample { 124 @State rating: number = 3.5 125 126 build() { 127 Column() { 128 Rating({ rating: this.rating, indicator: false }) 129 .stars(5) 130 .stepSize(0.5) 131 .starStyle({ 132 backgroundUri: '/common/imag1.png', // common目录与pages同级 133 foregroundUri: '/common/imag2.png', 134 secondaryUri: '/common/imag3.png' 135 }) 136 .margin({ top: 24 }) 137 .onChange((value: number) => { 138 this.rating = value 139 }) 140 Text('current score is ' + this.rating) 141 .fontSize(16) 142 .fontColor('rgba(24,36,49,0.60)') 143 .margin({ top: 16 }) 144 }.width('100%').height('100%').backgroundColor('#F1F3F5') 145 } 146} 147``` 148 149
