第九节HarmonyOS 常用基础组件27-Rating

news/2024/7/21 8:55:04 标签: harmonyos, openHarmony, 华为

1、描述

提供在给定范围内选择评分的组件。

2、接口

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

3、参数

参数名

参数类型

必填

描述

rating

number

设置并接收评分值。默认值:0;取值范围[0, stars],小于0取0,大于stars取最大值stars。

indicator

boolean

设置评分组件作为指示器使用,不可改变评分。默认值:false,可进行评分。

4、属性

名称

参数类型

描述

stars

number

设置评分总数。默认值:5。设置为小于0的值时,按默认值显示。

stepSize

number

操作评级的步长。默认值:0.5。设置小于0的值时,按默认值显示。取值范围为[0.1, stars]。

starStyle

{

backgroundUri:string,

foregroundUri: string,

secondaryUri: string

}

backgroundUri:未选中的星级的图片链接,可由用户自定义或使用系统默认图片。

foregroundUri:选中的星级的图片路径,可由用户自定义或者使用系统默认图片。

secondaryUri:部分选中的星级的图片路径,可由用户自定义或者使用系统默认图片。

5、事件

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

功能描述:操作评分条的评星发生改变时触发该回调。

6、示例

import router from '@ohos.router'

@Entry
@Component
struct RatingPage {
  @State message: string = '提供在给定范围内选择评分的组件。'
  @State ratingSize: number = 0;
  @State ratingCount: number = 0;

  build() {
    Row() {
      Scroll() {
        Column() {
          Text(this.message)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .width("96%")

          Rating({ rating: 0, indicator: false })
            .stars(5)// 设置评分总数,默认值5
            .stepSize(0.5)//操作评级的步长,默认0.5
            .onChange((value: number) => {
              this.ratingSize = value;
            })

          Text(this.ratingSize.toString())
            .fontSize(20)
            .fontWeight(FontWeight.Bold)


          Rating({ rating: 0, indicator: false })
            .stars(10)// 设置评分总数,默认值5
            .stepSize(1)//操作评级的步长,默认0.5
            .onChange((value: number) => {
              this.ratingCount = value;
            })

          Text(this.ratingCount.toString())
            .fontSize(20)
            .fontWeight(FontWeight.Bold)


          Rating({ rating: 0, indicator: true })// indicator为true时评分不可修改
            .stars(5)// 设置评分总数,默认值5
            .stepSize(1) //操作评级的步长,默认0.5

          Rating({ rating: 0, indicator: false })
            .stars(5)
            .stepSize(1)
            .starStyle({
              backgroundUri: '/common/rating_default.png', // common目录与pages同级
              foregroundUri: '/common/rating_selected.png',
              secondaryUri: '/common/rating_selected.png'
            })

          Button("Rating文本文档")
            .fontSize(20)
            .backgroundColor('#007DFF')
            .width('96%')
            .onClick(() => {
              // 处理点击事件逻辑
              router.pushUrl({
                url: "pages/baseComponent/rating/RatingDesc",
              })
            })
            .margin({ top: 20 })

        }
        .width('100%')
      }
    }
    .padding({ top: 12, bottom: 12 })
  }
}

7、效果图


http://www.niftyadmin.cn/n/5389677.html

相关文章

基于JAVA(Springboot)后台微信美食菜谱小程序系统设计与实现

博主介绍:黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程&#xff…

单片机02_寄存器_GPIO设置__点灯

芯片概述 C51:0口、1口、2口、3口,P00~p07、P10~P17、P20~P27、P30~P37 STM32:A口、B口、C口、D口,PA0~PA15/PA5 GPIOA.5 STM32F407ZGT6有7组GPIO端口,分别是:A B C D E F G,每组均有16个GPIO端…

社区发现之标签传播算法(LPA)

在Graph领域,社区发现(Community detection)是一个非常热门且广泛的话题,后面会写一个系列,该问题实际上是从子图分割的问题演变而来,在真实的社交网络中,有些用户之间连接非常紧密,有些用户之间的连接较为稀疏,连接紧密的用户群体可以看做一个社区,在风控问题中,可…

助力智慧水务数据管理革新,TDengine 达成新签约!

在智慧水务系统中,通常需要对设备产生的液位、电流、水量等实时指标数据进行存储、分析和监控,这些数据属于典型的时序数据。随着设备数量的增加,数据量可能达到了百万甚至千万级别,传统的实时数据库或关系型数据库已经无法满足业…

使用.NET 升级助手工具将.net framework4.8 MVC项目升级到net6

1 新建.net framework4.8 MVC项目 随便添加一个可以访问的界面用于测试 2 对当前项目进行升级 注意:若要进行升级,首先确保本地已安装相应的sdk,例如:dotnet-sdk-6.0.402-win-x64.exe1.运行cmd命令窗口,进入项目所在…

FFmpeg——avio_reading实例(学习)

目录 前言一、源码二、分析1、av_file_map函数2、avformat_alloc_context函数3、avio_alloc_context函数4、avformat_open_input函数5、avformat_find_stream_info函数 前言 avio_reading是关于对音视频流内存读取操作的应用实例,将文件中获取的数据流映射到内存再…

【软件架构】01-架构的概述

1、定义 软件架构就是软件的顶层结构 RUP(统一过程开发)4 1 视图 1)逻辑视图: 描述系统的功能、组件和它们之间的关系。它主要关注系统的静态结构,包括类、接口、包、模块等,并用于表示系统的组织结构…

十二、线性代数二-二次型:

目录 1、二次型的定义: 2、二次矩阵与二次型的理解: 3、二次型矩阵的性质: 4、二次型的标准型: 5、二次型的正定型: ①正定型的概念: ②二次型正定型的判定: