1# Rating 2 3提供在给定范围内选择评分的组件。 4 5> **说明：** 6> 7> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12无 13 14 15## 接口 16 17Rating(options?: RatingOptions) 18 19**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 20 21**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 22 23**系统能力：** SystemCapability.ArkUI.ArkUI.Full 24 25**参数：** 26 27| 参数名 | 类型 | 必填 | 说明 | 28| ------- | ----------------------------------------- | ---- | -------------- | 29| options | [RatingOptions](#ratingoptions18对象说明) | 否 | 设置评分组件。 | 30 31## 属性 32 33### stars 34 35stars(value: number) 36 37设置评分总数。设置为小于等于0的值时，按默认值显示。 38 39**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 40 41**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 42 43**系统能力：** SystemCapability.ArkUI.ArkUI.Full 44 45**参数：** 46 47| 参数名 | 类型 | 必填 | 说明 | 48| ------ | ------ | ---- | ---------------------------- | 49| value | number | 是 | 设置评分总数。<br/>默认值：5 | 50 51### stars<sup>18+</sup> 52 53stars(starCount: Optional\<number>) 54 55设置评分总数。设置为小于等于0的值时，按默认值显示。与[stars](#stars)相比，starCount参数新增了对undefined类型的支持。 56 57**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 58 59**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 60 61**系统能力：** SystemCapability.ArkUI.ArkUI.Full 62 63**参数：** 64 65| 参数名 | 类型 | 必填 | 说明 | 66| --------- | ------------------------------------------------------------ | ---- | ---------------------------------------------------------- | 67| starCount | [Optional](ts-universal-attributes-custom-property.md#optional12)\<number> | 是 | 设置评分总数。<br/>当starCount的值为undefined时，默认值：5 | 68 69### stepSize 70 71stepSize(value: number) 72 73设置操作评级的步长。设置为小于0.1的值时，按默认值显示。 74 75**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 76 77**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 78 79**系统能力：** SystemCapability.ArkUI.ArkUI.Full 80 81**参数：** 82 83| 参数名 | 类型 | 必填 | 说明 | 84| ------ | ------ | ---- | ----------------------------------------------------------- | 85| value | number | 是 | 操作评级的步长。<br/>默认值：0.5<br/>取值范围：[0.1, stars] | 86 87### stepSize<sup>18+</sup> 88 89stepSize(size: Optional\<number>) 90 91设置操作评级的步长。设置为小于0.1的值时，按默认值显示。与[stepSize](#stepsize)相比，size参数新增了对undefined类型的支持。 92 93**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 94 95**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 96 97**系统能力：** SystemCapability.ArkUI.ArkUI.Full 98 99**参数：** 100 101| 参数名 | 类型 | 必填 | 说明 | 102| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 103| size | [Optional](ts-universal-attributes-custom-property.md#optional12)\<number> | 是 | 操作评级的步长。<br/>当size的值为undefined时，默认值：0.5<br/>取值范围：[0.1, stars] | 104 105### starStyle 106 107starStyle(options: StarStyleOptions) 108 109设置评分的样式。该属性所支持的图片类型能力参考[Image](ts-basic-components-image.md)组件。 110 111支持加载本地图片和网络图片，暂不支持PixelMap类型和Resource资源。 112 113默认图片加载方式为异步，暂不支持同步加载。 114 115**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 116 117**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 118 119**系统能力：** SystemCapability.ArkUI.ArkUI.Full 120 121**参数：** 122 123| 参数名 | 类型 | 必填 | 说明 | 124| ------- | ----------------------------------------------- | ---- | ------------------------------------------------------------ | 125| options | [StarStyleOptions](#starstyleoptions18对象说明) | 是 | 评分的样式。<br/>**说明：** <br/>backgroundUri或者foregroundUri或者secondaryUri设置的图片路径错误时，图片不显示。<br/>backgroundUri或者foregroundUri设置为undefined或者空字符串时，rating会选择加载系统默认星型图源。<br/>secondaryUri不设置或者设置的值为undefined或者空字符串时，优先设置为backgroundUri，效果上等同于只设置了foregroundUri、backgroundUri。 | 126 127### starStyle<sup>18+</sup> 128 129starStyle(options: Optional\<StarStyleOptions>) 130 131设置评分的样式。该属性所支持的图片类型能力参考[Image](ts-basic-components-image.md)组件。 132 133支持加载本地图片和网络图片，暂不支持PixelMap类型和Resource资源。 134 135默认图片加载方式为异步，暂不支持同步加载。 136 137与[starStyle](#starstyle)相比，options参数新增了对undefined类型的支持。 138 139**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 140 141**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 142 143**系统能力：** SystemCapability.ArkUI.ArkUI.Full 144 145**参数：** 146 147| 参数名 | 类型 | 必填 | 说明 | 148| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 149| options | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[StarStyleOptions](#starstyleoptions18对象说明)> | 是 | 评分的样式。<br/>**说明：** <br/>backgroundUri或者foregroundUri或者secondaryUri设置的图片路径错误时，图片不显示。<br/>backgroundUri或者foregroundUri设置为undefined或者空字符串时，rating会选择加载系统默认星型图源。<br/>secondaryUri不设置或者设置的值为undefined或者空字符串时，优先设置为backgroundUri，效果上等同于只设置了foregroundUri、backgroundUri。 | 150 151> **说明：** 152> 153> rating宽高为[width, height]时，单个图片的绘制区域为[width / stars, height]。 154> 155> 为了指定绘制区域为方形，建议自定义宽高时采取[height * stars, height], width = height * stars的方式。 156 157### contentModifier<sup>12+</sup> 158 159contentModifier(modifier: ContentModifier\<RatingConfiguration>) 160 161定制Rating内容区的方法。 162 163**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 164 165**系统能力：** SystemCapability.ArkUI.ArkUI.Full 166 167**参数：** 168 169| 参数名 | 类型 | 必填 | 说明 | 170| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 171| modifier | [ContentModifier\<RatingConfiguration>](#ratingconfiguration12对象说明) | 是 | 在Rating组件上，定制内容区的方法。<br/>modifier：内容修改器，开发者需要自定义class实现ContentModifier接口。 | 172 173### contentModifier<sup>18+</sup> 174 175contentModifier(modifier: Optional<ContentModifier\<RatingConfiguration>>) 176 177定制Rating内容区的方法。与[contentModifier](#contentmodifier12)相比，modifier参数新增了对undefined类型的支持。 178 179**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 180 181**系统能力：** SystemCapability.ArkUI.ArkUI.Full 182 183**参数：** 184 185| 参数名 | 类型 | 必填 | 说明 | 186| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 187| modifier | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[ContentModifier\<RatingConfiguration>](#ratingconfiguration12对象说明)> | 是 | 在Rating组件上，定制内容区的方法。<br/>modifier：内容修改器，开发者需要自定义class实现ContentModifier接口。<br/>当modifier的值为undefined时，不使用内容修改器。 | 188 189## 事件 190 191### onChange 192 193onChange(callback:(value: number) => void) 194 195操作评分条的评星发生改变时触发该回调。 196 197**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 198 199**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 200 201**系统能力：** SystemCapability.ArkUI.ArkUI.Full 202 203**参数：** 204 205| 参数名 | 类型 | 必填 | 说明 | 206| ------ | ------ | ---- | -------------- | 207| value | number | 是 | 评分条的评分。 | 208 209### onChange<sup>18+</sup> 210 211onChange(callback:Optional\<OnRatingChangeCallback>) 212 213操作评分条的评星发生改变时触发该回调。与[onChange](#onchange)相比，callback:参数新增了对undefined类型的支持。 214 215**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 216 217**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 218 219**系统能力：** SystemCapability.ArkUI.ArkUI.Full 220 221**参数：** 222 223| 参数名 | 类型 | 必填 | 说明 | 224| -------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 225| callback | [Optional](ts-universal-attributes-custom-property.md#optional12)\<[OnRatingChangeCallback](#onratingchangecallback18)> | 是 | 操作评分条的评星发生改变时触发该回调。<br/>当callback的值为undefined时，不使用回调函数。 | 226 227## OnRatingChangeCallback<sup>18+</sup> 228 229type OnRatingChangeCallback = (rating: number) => void 230 231操作评分条的评星发生改变时触发该回调。 232 233**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 234 235**系统能力：** SystemCapability.ArkUI.ArkUI.Full 236 237**参数：** 238 239| 参数名 | 类型 | 必填 | 说明 | 240| ------ | ------ | ---- | -------------- | 241| rating | number | 是 | 评分条的评分。 | 242 243## 键盘走焦规格 244| 按键 | 功能描述 | 245|------------|-----------------------------| 246| Tab | 组件间切换焦点。 | 247| 左右方向键 | 评分预览增加/减少（步长为step），不改变实际分值。 | 248| Home | 移动到第一个星星， 不改变实际分值。 | 249| End | 移动到最后一个星星， 不改变实际分值。 | 250| Space/Enter | 根据当前评分提交评分结果。 | 251 252## RatingConfiguration<sup>12+</sup>对象说明 253 254开发者需要自定义class实现ContentModifier接口。 255 256**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 257 258**系统能力：** SystemCapability.ArkUI.ArkUI.Full 259 260| 名称 | 类型 | 只读 | 可选 | 说明 | 261| ------ | ------ | ------ |-------------------------------- |-------------------------------- | 262| rating | number | 否 | 否 | 设置并接收评分值。<br/>默认值：0<br/>取值范围： [0, stars]<br/>小于0取0，大于[stars](#stars)取最大值stars。<br />该参数支持[$$](../../../ui/state-management/arkts-two-way-sync.md)双向绑定变量。<br />该参数支持[!!](../../../ui/state-management/arkts-new-binding.md#系统组件参数双向绑定)双向绑定变量。 | 263| indicator | boolean | 否 | 否 | 评分条是否作为一个指示器。值为true时，表示作为一个指示器，值为false时，表示不作为一个指示器。<br/>默认值：false | 264| stars | number | 否 | 否 |评分条的星级总数。<br/>默认值：5 | 265| stepSize | number | 否 | 否 |评分条的评分步长。<br/>默认值：0.5 | 266| triggerChange | Callback\<number> | 否 | 否 |触发评分数量变化。 | 267 268## RatingOptions<sup>18+</sup>对象说明 269 270**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 271 272**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 273 274**系统能力：** SystemCapability.ArkUI.ArkUI.Full 275 276| 名称 | 类型 | 必填 | 说明 | 277| ---------------------- | ------- | ---- | ------------------------------------------------------------ | 278| rating<sup>7+</sup> | number | 是 | 设置并接收评分值。<br/>默认值：0<br/>取值范围： [0, stars]<br/>小于0取0，大于[stars](#stars)取最大值stars。<br />该参数支持[$$](../../../ui/state-management/arkts-two-way-sync.md)双向绑定变量。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 279| indicator<sup>7+</sup> | boolean | 否 | 设置评分组件作为指示器使用，不可改变评分。<br/>默认值：false，可进行评分<br/>**说明：** <br/>indicator=true时，默认组件高度height=12.0vp，组件width=height * stars。 <br/>indicator=false时，默认组件高度height=28.0vp，组件width=height * stars。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 280 281## StarStyleOptions<sup>18+</sup>对象说明 282 283**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 284 285**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 286 287**系统能力：** SystemCapability.ArkUI.ArkUI.Full 288 289| 名称 | 类型 | 必填 | 说明 | 290| -------------------------- | ------ | ---- | ------------------------------------------------------------ | 291| backgroundUri<sup>7+</sup> | string | 是 | 未选中的星级的图片链接，可由用户自定义或使用系统默认图片。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 292| foregroundUri<sup>7+</sup> | string | 是 | 选中的星级的图片路径，可由用户自定义或使用系统默认图片。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 293| secondaryUri<sup>7+</sup> | string | 否 | 部分选中的星级的图片路径，可由用户自定义或使用系统默认图片。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 294 295## 示例 296 297### 示例1（设置默认评分样式） 298 299该示例为创建默认星型评分样式。 300 301```ts 302// xxx.ets 303@Entry 304@Component 305struct RatingExample { 306 @State rating: number = 3.5; 307 308 build() { 309 Column() { 310 Column() { 311 Rating({ rating: this.rating, indicator: false }) 312 .stars(5) 313 .stepSize(0.5) 314 .margin({ top: 24 }) 315 .onChange((value: number) => { 316 this.rating = value; 317 }) 318 Text('current score is ' + this.rating) 319 .fontSize(16) 320 .fontColor('rgba(24,36,49,0.60)') 321 .margin({ top: 16 }) 322 }.width(360).height(113).backgroundColor('#FFFFFF').margin({ top: 68 }) 323 324 Row() { 325 Image('common/testImage.jpg') 326 .width(40) 327 .height(40) 328 .borderRadius(20) 329 .margin({ left: 24 }) 330 Column() { 331 Text('Yue') 332 .fontSize(16) 333 .fontColor('#182431') 334 .fontWeight(500) 335 Row() { 336 Rating({ rating: 3.5, indicator: false }).margin({ top: 1, right: 8 }) 337 Text('2021/06/02') 338 .fontSize(10) 339 .fontColor('#182431') 340 } 341 }.margin({ left: 12 }).alignItems(HorizontalAlign.Start) 342 343 Text('1st Floor') 344 .fontSize(10) 345 .fontColor('#182431') 346 .position({ x: 295, y: 8 }) 347 }.width(360).height(56).backgroundColor('#FFFFFF').margin({ top: 64 }) 348 }.width('100%').height('100%').backgroundColor('#F1F3F5') 349 } 350} 351``` 352 353 354 355### 示例2（设置评分的样式） 356 357该示例通过配置starStyle实现自定义星级的图片链接。 358 359```ts 360// xxx.ets 361@Entry 362@Component 363struct RatingExample { 364 @State rating: number = 3.5; 365 366 build() { 367 Column() { 368 Rating({ rating: this.rating, indicator: false }) 369 .stars(5) 370 .stepSize(0.5) 371 .starStyle({ 372 backgroundUri: '/common/imag1.png', // common目录与pages同级 373 foregroundUri: '/common/imag2.png', 374 secondaryUri: '/common/imag3.png' 375 }) 376 .margin({ top: 24 }) 377 .onChange((value: number) => { 378 this.rating = value; 379 }) 380 Text('current score is ' + this.rating) 381 .fontSize(16) 382 .fontColor('rgba(24,36,49,0.60)') 383 .margin({ top: 16 }) 384 }.width('100%').height('100%').backgroundColor('#F1F3F5') 385 } 386} 387``` 388 389 390 391### 示例3（自定义评分条） 392该示例实现了自定义评分条的功能，每个圆圈表示0.5分。ratingIndicator为true时表示评分条作为一个指示器不可改变评分； 393为false时可以进行评分。ratingStars可改变评分总数。ratingStepsize可改变评分步长。 394 395```ts 396// xxx.ets 397class MyRatingStyle implements ContentModifier<RatingConfiguration> { 398 name: string = ""; 399 style: number = 0; 400 401 constructor(value1: string, value2: number) { 402 this.name = value1; 403 this.style = value2; 404 } 405 406 applyContent(): WrappedBuilder<[RatingConfiguration]> { 407 return wrapBuilder(buildRating); 408 } 409} 410 411@Builder 412function buildRating(config: RatingConfiguration) { 413 Column() { 414 Row() { 415 Circle({ width: 25, height: 25 }) 416 .fill(config.rating >= 0.4 ? Color.Black : Color.Red) 417 .onClick((event: ClickEvent) => { 418 if (!config.indicator) { 419 if (config.stepSize = 0.5) { 420 config.triggerChange(0.5); 421 return 422 } 423 if (config.stepSize = 1) { 424 config.triggerChange(1); 425 return 426 } 427 } 428 }).visibility(config.stars >= 1 ? Visibility.Visible : Visibility.Hidden) 429 Circle({ width: 25, height: 25 }) 430 .fill(config.rating >= 0.9 ? Color.Black : Color.Red) 431 .onClick((event: ClickEvent) => { 432 if (!config.indicator) { 433 config.triggerChange(1); 434 } 435 }).visibility(config.stars >= 1 ? Visibility.Visible : Visibility.Hidden) 436 Circle({ width: 25, height: 25 }) 437 .fill(config.rating >= 1.4 ? Color.Black : Color.Red) 438 .onClick((event: ClickEvent) => { 439 if (!config.indicator) { 440 if (config.stepSize = 0.5) { 441 config.triggerChange(1.5); 442 return 443 } 444 if (config.stepSize = 1) { 445 config.triggerChange(2); 446 return 447 } 448 } 449 }).visibility(config.stars >= 2 ? Visibility.Visible : Visibility.Hidden).margin({ left: 10 }) 450 Circle({ width: 25, height: 25 }) 451 .fill(config.rating >= 1.9 ? Color.Black : Color.Red) 452 .onClick((event: ClickEvent) => { 453 if (!config.indicator) { 454 config.triggerChange(2); 455 } 456 }).visibility(config.stars >= 2 ? Visibility.Visible : Visibility.Hidden) 457 Circle({ width: 25, height: 25 }) 458 .fill(config.rating >= 2.4 ? Color.Black : Color.Red) 459 .onClick((event: ClickEvent) => { 460 if (!config.indicator) { 461 if (config.stepSize = 0.5) { 462 config.triggerChange(2.5); 463 return 464 } 465 if (config.stepSize = 1) { 466 config.triggerChange(3); 467 return 468 } 469 } 470 }).visibility(config.stars >= 3 ? Visibility.Visible : Visibility.Hidden).margin({ left: 10 }) 471 Circle({ width: 25, height: 25 }) 472 .fill(config.rating >= 2.9 ? Color.Black : Color.Red) 473 .onClick((event: ClickEvent) => { 474 if (!config.indicator) { 475 config.triggerChange(3); 476 } 477 }).visibility(config.stars >= 3 ? Visibility.Visible : Visibility.Hidden) 478 Circle({ width: 25, height: 25 }) 479 .fill(config.rating >= 3.4 ? Color.Black : Color.Red) 480 .onClick((event: ClickEvent) => { 481 if (!config.indicator) { 482 if (config.stepSize = 0.5) { 483 config.triggerChange(3.5); 484 return 485 } 486 if (config.stepSize = 1) { 487 config.triggerChange(4); 488 return 489 } 490 } 491 }).visibility(config.stars >= 4 ? Visibility.Visible : Visibility.Hidden).margin({ left: 10 }) 492 Circle({ width: 25, height: 25 }) 493 .fill(config.rating >= 3.9 ? Color.Black : Color.Red) 494 .onClick((event: ClickEvent) => { 495 if (!config.indicator) { 496 config.triggerChange(4); 497 } 498 }).visibility(config.stars >= 4 ? Visibility.Visible : Visibility.Hidden) 499 Circle({ width: 25, height: 25 }) 500 .fill(config.rating >= 4.4 ? Color.Black : Color.Red) 501 .onClick((event: ClickEvent) => { 502 if (!config.indicator) { 503 if (config.stepSize = 0.5) { 504 config.triggerChange(4.5); 505 return 506 } 507 if (config.stepSize = 1) { 508 config.triggerChange(5); 509 return 510 } 511 } 512 }).visibility(config.stars >= 5 ? Visibility.Visible : Visibility.Hidden).margin({ left: 10 }) 513 Circle({ width: 25, height: 25 }) 514 .fill(config.rating >= 4.9 ? Color.Black : Color.Red) 515 .onClick((event: ClickEvent) => { 516 if (!config.indicator) { 517 config.triggerChange(5); 518 } 519 }).visibility(config.stars >= 5 ? Visibility.Visible : Visibility.Hidden) 520 } 521 522 Text("分值：" + config.rating) 523 } 524} 525 526@Entry 527@Component 528struct ratingExample { 529 @State rating: number = 0; 530 @State ratingIndicator: boolean = true; 531 @State ratingStars: number = 0; 532 @State ratingStepsize: number = 0.5; 533 @State ratingEnabled: boolean = true; 534 535 build() { 536 Row() { 537 Column() { 538 Rating({ 539 rating: 0, 540 indicator: this.ratingIndicator 541 }) 542 .stepSize(this.ratingStepsize) 543 .stars(this.ratingStars) 544 .backgroundColor(Color.Transparent) 545 .width('100%') 546 .height(50) 547 .onChange((value: number) => { 548 console.info('Rating change is' + value); 549 this.rating = value; 550 }) 551 .contentModifier(new MyRatingStyle("hello", 3)) 552 Button(this.ratingIndicator ? "ratingIndicator : true" : "ratingIndicator : false") 553 .onClick((event) => { 554 if (this.ratingIndicator) { 555 this.ratingIndicator = false; 556 } else { 557 this.ratingIndicator = true; 558 } 559 }).margin({ top: 5 }) 560 561 Button(this.ratingStars < 5 ? "ratingStars + 1, ratingStars =" + this.ratingStars : "ratingStars最大值为5") 562 .onClick((event) => { 563 if (this.ratingStars < 5) { 564 this.ratingStars += 1; 565 } 566 }).margin({ top: 5 }) 567 568 Button(this.ratingStars > 0 ? "ratingStars - 1, ratingStars =" + this.ratingStars : 569 "ratingStars小于等于0时默认等于5") 570 .onClick((event) => { 571 if (this.ratingStars > 0) { 572 this.ratingStars -= 1; 573 } 574 }).margin({ top: 5 }) 575 576 Button(this.ratingStepsize == 0.5 ? "ratingStepsize : 0.5" : "ratingStepsize : 1") 577 .onClick((event) => { 578 if (this.ratingStepsize == 0.5) { 579 this.ratingStepsize = 1; 580 } else { 581 this.ratingStepsize = 0.5; 582 } 583 }).margin({ top: 5 }) 584 } 585 .width('100%') 586 .height('100%') 587 .justifyContent(FlexAlign.Center) 588 } 589 .height('100%') 590 } 591} 592``` 593 594
