• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# rating开发指导
2
3
4rating为评分条组件，表示用户使用感受的衡量标准条。具体用法请参考[rating](../reference/arkui-js/js-components-basic-rating.md)。
5
6
7## 创建rating组件
8
9在pages/index目录下的hml文件中创建一个rating组件。
10
11
12```html
13<!-- xxx.hml -->
14<div class="container">
15  <rating></rating>
16</div>
17```
18
19
20```css
21/* xxx.css */
22.container {
23  width: 100%;
24  height: 100%;
25  display: flex;
26  justify-content: center;
27  align-items: center;
28  background-color: #F1F3F5;
29}
30rating {
31  width: 80%;
32  height: 150px;
33}
34```
35
36![zh-cn_image_0000001227701031](figures/zh-cn_image_0000001227701031.gif)
37
38
39## 设置评分星级
40
41rating组件通过设置numstars和rating属性设置评分条的星级总数和当前评星数。
42
43
44```html
45<!-- xxx.hml -->
46<div class="container">
47  <rating numstars="6" rating="5">
48  </rating>
49</div>
50```
51
52
53```css
54/* xxx.css */
55.container {
56  width: 100%;
57  height: 100%;
58  display: flex;
59  justify-content: center;
60  align-items: center;
61  background-color: #F1F3F5;
62}
63rating {
64  width: 80%;
65  height: 150px;
66}
67```
68
69![zh-cn_image_0000001227422709](figures/zh-cn_image_0000001227422709.gif)
70
71
72## 设置评分样式
73
74rating组件通过star-background、star-foreground和star-secondary属性设置单个星级未选择、选中和选中的次级背景图片。
75
76
77```html
78<!-- xxx.hml -->
79<div class="container">
80  <div style="width: 500px;height: 500px;align-items: center;justify-content: center;flex-direction: column;;">
81    <rating numstars="5" rating="1" class="myrating" style="width: {{ratewidth}}; height:{{rateheight}};
82    star-background: {{backstar}}; star-secondary: {{secstar}};star-foreground: {{forestar}};rtl-flip: true;">
83    </rating>
84  </div>
85</div>
86```
87
88
89```css
90/* xxx.css */
91.container {
92  width: 100%;
93  height: 100%;
94  flex-direction: column;
95  align-items: center;
96  justify-content: center;
97  background-color: #F1F3F5;
98}
99```
100
101
102```js
103// index.js
104export default {
105  data: {
106    backstar: 'common/love.png',
107    secstar: 'common/love.png',
108    forestar: 'common/love1.png',
109    ratewidth: '400px',
110    rateheight: '150px'
111  },
112  onInit(){
113  }
114}
115```
116
117![zh-cn_image_0000001178685854](figures/zh-cn_image_0000001178685854.gif)
118
119> **说明：**
120> - star-background、star-secondary、star-foreground属性的星级图源必须全部设置，否则默认的星级颜色为灰色，提示图源设置错误。
121>
122> - star-background、star-secondary、star-foreground属性只支持本地路径图片，图片格式为png和jpg。
123
124
125## 绑定事件
126
127向rating组件添加change事件，打印当前评分。
128
129
130```html
131<!-- xxx.hml -->
132<div class="container">
133  <rating numstars="5" rating="0" onchange="showrating"></rating>
134</div>
135```
136
137
138```css
139/* xxx.css */
140.container {
141  width: 100%;
142  height: 100%;
143  display: flex;
144  justify-content: center;
145  align-items: center;
146  background-color: #F1F3F5;
147}
148rating {
149  width: 80%;
150  height: 150px;
151}
152```
153
154
155```js
156// xxx.js
157import promptAction from '@ohos.promptAction';
158export default {
159  showrating(e) {
160    promptAction.showToast({
161      message: '当前评分' + e.rating
162    })
163  }
164}
165```
166
167![zh-cn_image_0000001181823160](figures/zh-cn_image_0000001181823160.gif)
168
169
170## 场景示例
171
172开发者可以通过改变开关状态切换星级背景图，通过改变滑动条的值调整星级总数。
173
174
175```html
176<!-- xxx.hml -->
177<div style="width: 100%;height:100%;flex-direction: column;align-items: center;background-color: #F1F3F5;">
178  <div style="width: 500px;height: 500px;align-items: center;justify-content: center;flex-direction: column;;">
179    <rating numstars="{{stars}}" rating="{{rate}}" stepsize="{{step}}" onchange="showrating" class="myrating"
180    style="width: {{ratewidth}};height:{{rateheight}};star-background: {{backstar}};star-secondary: {{secstar}};
181    star-foreground: {{forestar}};rtl-flip: true;"></rating>
182  </div>
183  <div style="flex-direction: column;width: 80%;align-items: center;">
184    <div style="width: 100%;height: 100px;align-items: center;justify-content: space-around;">
185      <text>替换自定义图片</text>
186      <switch checked="false" showtext="true" onchange="setstar"></switch>
187    </div>
188    <div style="width: 100%;height:120px;margin-top: 50px;margin-bottom: 50px;flex-direction: column;align-items: center;
189    justify-content: space-around;">
190      <text>numstars   {{stars}}</text>
191      <slider id="sli1" min="-1" max="10" value="5" step="1" onchange="setnumstars"></slider>
192    </div>
193    <div style="width: 100%;height:120px;flex-direction: column;align-items: center;justify-content: space-around;">
194      <text>rating   {{rate}}</text>
195      <slider id="sli2" min="-1" max="10" value="0" step="1" onchange="setrating"></slider>
196    </div>
197  </div>
198</div>
199```
200
201
202```css
203/* xxx.css */
204.myrating:active {
205  width: 500px;
206  height: 100px;
207}
208switch{
209  font-size: 40px;
210}
211```
212
213
214```js
215// xxx.js
216import promptAction from '@ohos.promptAction';
217export default {
218  data: {
219    backstar: '',
220    secstar: '',
221    forestar: '',
222    stars: 5,
223    ratewidth: '300px',
224    rateheight: '60px',
225    step: 0.5,
226    rate: 0
227  },
228  onInit(){
229  },
230  setstar(e) {
231    if (e.checked == true) {
232      this.backstar = 'common/love.png'
233      this.secstar = 'common/love.png'
234      this.forestar = 'common/love1.png'
235    } else {
236      this.backstar = ''
237      this.secstar = ''
238      this.forestar = ''
239    }
240  },
241  setnumstars(e) {
242    this.stars = e.progress
243    this.ratewidth = 60 * parseInt(this.stars) + 'px'
244  },
245  setstep(e) {
246    this.step = e.progress
247  },
248  setrating(e){
249    this.rate = e.progress
250  },
251  showrating(e) {
252    promptAction.showToast({
253      message: '当前评分' + e.rating
254    })
255  }
256}
257```
258
259![zh-cn_image_0000001224086459](figures/zh-cn_image_0000001224086459.gif)
260