鸿蒙 next 生肖选择器来了我不允许你不会

前言导读

各位同学大家，有段时间没有跟大家见面了，因为最近一直在更新鸿蒙的那个实战课程所以就没有去更新文章实在是不好意思， 所以今天就给大家更新一期实战案例 评分组件 希望帮助到各位同学工作和学习

效果图

接口

Rating(options?: { rating: number, indicator?: boolean })

卡片能力： 从 API version 9 开始，该接口支持在 ArkTS 卡片中使用。

元服务 API： 从 API version 11 开始，该接口支持在元服务中使用。

参数：

属性

stars

stars(value: number)

设置评分总数。设置为小于等于 0 的值时，按默认值显示。

卡片能力： 从 API version 9 开始，该接口支持在 ArkTS 卡片中使用。

元服务 API： 从 API version 11 开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

stepSize

stepSize(value: number)

设置操作评级的步长。设置为小于 0.1 的值时，按默认值显示。

卡片能力： 从 API version 9 开始，该接口支持在 ArkTS 卡片中使用。

元服务 API： 从 API version 11 开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

starStyle

starStyle(value: { backgroundUri: string, foregroundUri: string, secondaryUri?: string })

设置评分的样式。该属性所支持的图片类型能力参考Image 组件。

支持加载本地图片和网络图片，暂不支持 PixelMap 类型和 Resource 资源。

默认图片加载方式为异步，暂不支持同步加载。

卡片能力： 从 API version 9 开始，该接口支持在 ArkTS 卡片中使用。

元服务 API： 从 API version 11 开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

说明

rating 宽高为[width, height]时，单个图片的绘制区域为[width / stars, height]。

为了指定绘制区域为方形，建议自定义宽高时采取[height * stars, height], width = height * stars 的方式。

contentModifier12+

contentModifier(modifier: ContentModifier)

定制 Rating 内容区的方法。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

事件

onChange

onChange(callback:(value: number) => void)

操作评分条的评星发生改变时触发该回调。

卡片能力： 从 API version 9 开始，该接口支持在 ArkTS 卡片中使用。

元服务 API： 从 API version 11 开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

键盘走焦规格

RatingConfiguration12+ 对象说明

开发者需要自定义 class 实现 ContentModifier 接口。

具体实现

/***
 *
 * 创建人：xuqing
 * 创建时间：2024年8月4日12:02:47
 * 类说明：评分组件
 *
 */
@Entry
@Component
struct RatingExample {
  @State rating: number = 3.5

  build() {
    Column() {
      Column() {
        Rating({ rating: this.rating, indicator: false })
          .stars(5)
          .stepSize(0.5)
          .margin({ top: 24 })
          .onChange((value: number) => {
            this.rating = value
          })
        Text('当前评分为 ' + this.rating)
          .fontSize(16)
          .fontColor('rgba(24,36,49,0.60)')
          .margin({ top: 16 })
      }.width(360).height(113).backgroundColor('#FFFFFF').margin({ top: 68 })

      Row() {
        Image($r('app.media.testImage'))
          .width(40)
          .height(40)
          .borderRadius(20)
          .margin({ left: 24 })
        Column() {
          Text('年')
            .fontSize(16)
            .fontColor('#182431')
            .fontWeight(500)
          Row() {
            Rating({ rating: 3.5, indicator: false }).margin({ top: 1, right: 8 })
            Text('2024/08/04')
              .fontSize(10)
              .fontColor('#182431')
          }
        }.margin({ left: 12 }).alignItems(HorizontalAlign.Start)

        Text('1楼')
          .fontSize(10)
          .fontColor('#182431')
          .position({ x: 295, y: 8 })
      }.width(360).height(56).backgroundColor('#FFFFFF').margin({ top: 64 })
    }.width('100%').height('100%').backgroundColor('#F1F3F5')
  }
}

最后总结：

鸿蒙 next 里面有自带评分组件 其实安卓原始和 ios 里面也有不过安卓 ios 更多是直接调用了系统评分库。这样弹出·位置样式都不能自定义更多时候还是要自己去实现 但是鸿蒙就提供了这个组件我们就可以跟进官方组件的属性来自定义我们更多的效果。今天的文章就讲到这个 有兴趣的同学可以继续研究 如果你觉得文章还不错麻烦给我三连 关注点赞和转发 如果了解更多鸿蒙开发的知识 可以关注坚果派公众号 。 谢谢

团队介绍

**团队介绍：坚果派由坚果等人创建，团队由 12 位华为 HDE 以及若干热爱鸿蒙的开发者和其他领域的三十余位万粉博主运营。专注于分享 HarmonyOS/OpenHarmony，ArkUI-X，元服务，仓颉，团队成员聚集在北京，上海，南京，深圳，广州，宁夏等地，目前已开发鸿蒙原生应用，三方库 60+，欢迎进行课程，项目等合作。**2