• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# rating
2
3>  **说明：**
4> 从API version 4开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
5
6评分条，表示用户使用感受的衡量标准条。
7
8
9## 权限列表
10
11无
12
13
14## 子组件
15
16不支持。
17
18
19## 属性
20
21除支持[通用属性](../arkui-js/js-components-common-attributes.md)外，还支持如下属性：
22
23| 名称 | 类型 | 默认值 | 必填 | 描述 |
24| -------- | -------- | -------- | -------- | -------- |
25| numstars | number | 5 | 否 | 设置评分条的星级总数。 |
26| rating | number | 0 | 否 | 设置评分条当前评星数。 |
27| stepsize | number | 0.5 | 否 | 设置评分条的评星步长。 |
28| indicator | boolean | false | 否 | 设置评分条是否作为一个指示器，此时用户不可操作。 |
29
30
31## 样式
32
33除支持[通用样式](../arkui-js/js-components-common-styles.md)外，还支持如下样式：
34
35| 名称 | 类型 | 默认值 | 必填 | 描述 |
36| -------- | -------- | -------- | -------- | -------- |
37| star-background | string | - | 否 | 设置单个星级未选中的背景图片，只支持本地路径图片，图片格式为png和jpg。 |
38| star-foreground | string | - | 否 | 设置单个星级选中的前景图片，只支持本地路径图片，图片格式为png和jpg。 |
39| star-secondary | string | - | 否 | 设置单个星级部分选中的次级背景图片，该图片会覆盖背景图片，只支持本地路径图片，图片格式为png和jpg。 |
40| width | &lt;length&gt;\|&lt;percentage&gt; | 120px<br/>60px（不可操作） | 否 | 默认值是在未设置自定义资源和评分星数时，使用5个星和默认资源下的宽度值。 |
41| height | &lt;length&gt;\|&lt;percentage&gt; | 24px<br/>12px（不可操作） | 否 | 默认值是在未设置自定义资源和评分星数时，使用5个星和默认资源下的高度值。 |
42| rtl-flip | boolean | true | 否 | 在RTL文字方向下是否自动翻转图源。 |
43
44>  **说明：**
45> star-background，star-secondary，star-foreground三个星级图源必须全部设置，否则默认的星级颜色为灰色，以此提示图源设置错误。
46
47
48## 事件
49
50除支持[通用事件](../arkui-js/js-components-common-events.md)外，还支持如下事件：
51
52| 名称 | 参数 | 描述 |
53| -------- | -------- | -------- |
54| change | {&nbsp;rating:&nbsp;&nbsp;number&nbsp;} | 评分条的评星发生改变时触发该回调。 |
55
56
57## 方法
58
59支持[通用方法](../arkui-js/js-components-common-methods.md)。
60
61
62## 示例
63
64```html
65<!-- xxx.hml -->
66<div class="container">
67  <rating numstars="5" rating="5" @change="changeRating" id="rating">
68  </rating>
69</div>
70```
71
72```css
73/* xxx.css */
74.container {
75  display: flex;
76  justify-content: center;
77  align-items: center;
78}
79rating {
80  width: 200px;
81}
82```
83
84```js
85// xxx.js
86import promptAction from '@ohos.promptAction';
87export default {
88    changeRating(e){
89        promptAction.showToast({
90            message: e.rating
91        });
92    }
93}
94```
95
96![zh-cn_image_0000001198670487](figures/zh-cn_image_0000001198670487.png)
97