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