HarmonyOS API：基础组件

joytrian

发布于 2023-3-24 11:52

浏览

0收藏

版本：v3.1 Beta

Progress

更新时间: 2023-02-17 09:19

进度条组件，用于显示内容加载或操作处理等进度。

说明

该组件从API version7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

无

接口

Progress(options: {value: number, total?: number, type?: ProgressType})

创建进度组件，用于显示内容加载或操作处理进度。

参数:

参数名	参数类型	必填	参数描述
value	number	是	指定当前进度值。设置小于0的数值时置为0，设置大于total的数值时置为total。
total	number	否	指定进度总长。默认值：100
type⁸⁺	ProgressType	否	指定进度条类型。默认值：ProgressType.Linear
style^deprecated	ProgressStyle	否	指定进度条样式。该参数从API version8开始废弃，建议使用type替代。默认值：ProgressStyle.Linear

ProgressType枚举说明

名称	描述
Linear	线性样式。从API version9开始，高度大于宽度的时候自适应垂直显示。
Ring⁸⁺	环形无刻度样式，环形圆环逐渐显示至完全填充效果。
Eclipse⁸⁺	圆形样式，显示类似月圆月缺的进度展示效果，从月牙逐渐变化至满月。
ScaleRing⁸⁺	环形有刻度样式，显示类似时钟刻度形式的进度展示效果。从API version9开始，刻度外圈出现重叠的时候自动转换为环形无刻度进度条。
Capsule⁸⁺	胶囊样式，头尾两端圆弧处的进度展示效果与Eclipse相同；中段处的进度展示效果与Linear相同。高度大于宽度的时候自适应垂直显示。

ProgressStyle枚举说明

名称	描述
Linear	线性样式。
Ring	环形无刻度样式，环形圆环逐渐显示至完全填充效果。
Eclipse	圆形样式，显示类似月圆月缺的进度展示效果，从月牙逐渐变化至满月。
ScaleRing	环形有刻度样式，显示类似时钟刻度形式的进度展示效果。
Capsule	胶囊样式，头尾两端圆弧处的进度展示效果与Eclipse相同；中段处的进度展示效果与Linear相同。高度大于宽度的时候自适应垂直显示。

属性

名称	参数类型	描述
value	number	设置当前进度值。设置小于0的数值时置为0，设置大于total的数值时置为total。非法数值不生效。
color	ResourceColor	设置进度条前景色。
backgroundColor	ResourceColor	设置进度条底色。
style⁸⁺	{ strokeWidth?: Length, scaleCount?: number, scaleWidth?: Length }	定义组件的样式。 - strokeWidth: 设置进度条宽度（不支持百分比设置）。从API version9开始，环形进度条设置宽度大于等于半径时，默认修改宽度至半径值的二分之一。默认值：4.0Vp - scaleCount: 设置环形进度条总刻度数。默认值：120 - scaleWidth: 设置环形进度条刻度粗细（不支持百分比设置），刻度粗细大于进度条宽度时，为系统默认粗细。默认值：2.0Vp

示例

// xxx.ets
@Entry
@Component
struct ProgressExample {
  build() {
    Column({ space: 15 }) {
      Text('Linear Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Progress({ value: 10, type: ProgressType.Linear }).width(200)
      Progress({ value: 20, total: 150, type: ProgressType.Linear }).color(Color.Grey).value(50).width(200)



      Text('Eclipse Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row({ space: 40 }) {
        Progress({ value: 10, type: ProgressType.Eclipse }).width(100)
        Progress({ value: 20, total: 150, type: ProgressType.Eclipse }).color(Color.Grey).value(50).width(100)
      }

      Text('ScaleRing Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row({ space: 40 }) {
        Progress({ value: 10, type: ProgressType.ScaleRing }).width(100)
        Progress({ value: 20, total: 150, type: ProgressType.ScaleRing })
          .color(Color.Grey).value(50).width(100)
          .style({ strokeWidth: 15, scaleCount: 15, scaleWidth: 5 })
      }

      // scaleCount和scaleWidth效果对比
      Row({ space: 40 }) {
        Progress({ value: 20, total: 150, type: ProgressType.ScaleRing })
          .color(Color.Grey).value(50).width(100)
          .style({ strokeWidth: 20, scaleCount: 20, scaleWidth: 5 })
        Progress({ value: 20, total: 150, type: ProgressType.ScaleRing })
          .color(Color.Grey).value(50).width(100)
          .style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 3 })
      }

      Text('Ring Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row({ space: 40 }) {
        Progress({ value: 10, type: ProgressType.Ring }).width(100)
        Progress({ value: 20, total: 150, type: ProgressType.Ring })
          .color(Color.Grey).value(50).width(100)
          .style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 20 })
      }

      Text('Capsule Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
      Row({ space: 40 }) {
        Progress({ value: 10, type: ProgressType.Capsule }).width(100).height(50)
        Progress({ value: 20, total: 150, type: ProgressType.Capsule })
          .color(Color.Grey)
          .value(50)
          .width(100)
          .height(50)
      }
    }.width('100%').margin({ top: 30 })
  }
}

HarmonyOS API：基础组件-鸿蒙开发者社区

QRCode

更新时间: 2023-02-17 09:19

用于显示单个二维码的组件。

说明

该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

无

接口

QRCode(value: string)

参数:

参数名	参数类型	必填	参数描述
value	string	是	二维码内容字符串。

属性

除支持通用属性外，还支持以下属性。

名称	参数类型	描述
color	ResourceColor	设置二维码颜色。默认值：Color.Black
backgroundColor	ResourceColor	设置二维码背景颜色。默认值：Color.White

事件

通用事件仅支持点击事件。

示例

// xxx.ets
@Entry
@Component
struct QRCodeExample {
  private value: string = 'hello world'
  build() {
    Column({ space: 5 }) {
      Text('normal').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
      QRCode(this.value).width(200).height(200)

      // 设置二维码颜色
      Text('color').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
      QRCode(this.value).color(0xF7CE00).width(200).height(200)

      // 设置二维码背景色
      Text('backgroundColor').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
      QRCode(this.value).width(200).height(200).backgroundColor(Color.Orange)
    }.width('100%').margin({ top: 5 })
  }
}

HarmonyOS API：基础组件-鸿蒙开发者社区

Radio

更新时间: 2023-02-17 09:19

单选框，提供相应的用户交互选择项。

说明

该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

无

接口

Radio(options: {value: string, group: string})

参数:

参数名	参数类型	必填	参数描述
value	string	是	当前单选框的值。
group	string	是	当前单选框的所属群组名称，相同group的Radio只能有一个被选中。

属性

除支持通用属性外，还支持以下属性：

名称	参数类型	描述
checked	boolean	设置单选框的选中状态。默认值：false

事件

除支持通用事件外，还支持以下事件：

名称	功能描述
onChange(callback: (isChecked: boolean) => void)	单选框选中状态改变时触发回调。 -isChecked为true时，代表选中。 -isChecked为false时，代表未选中。

示例

// xxx.ets
@Entry
@Component
struct RadioExample {
  build() {
    Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
      Column() {
        Text('Radio1')
        Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true)
          .height(50)
          .width(50)
          .onChange((isChecked: boolean) => {
            console.log('Radio1 status is ' + isChecked)
          })
      }
      Column() {
        Text('Radio2')
        Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false)
          .height(50)
          .width(50)
          .onChange((isChecked: boolean) => {
            console.log('Radio2 status is ' + isChecked)
          })
      }
      Column() {
        Text('Radio3')
        Radio({ value: 'Radio3', group: 'radioGroup' }).checked(false)
          .height(50)
          .width(50)
          .onChange((isChecked: boolean) => {
            console.log('Radio3 status is ' + isChecked)
          })
      }
    }.padding({ top: 30 })
  }
}

HarmonyOS API：基础组件-鸿蒙开发者社区

Rating

更新时间: 2023-02-17 09:19

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

说明

该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

子组件

无

接口

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

参数：

参数名	参数类型	必填	参数描述
rating	number	是	设置并接收评分值。默认值：0
indicator	boolean	否	设置评分组件作为指示器使用，不可改变评分。默认值：false, 可进行评分

属性

名称	参数类型	描述
stars	number	设置评星总数。默认值：5
stepSize	number	操作评级的步长。默认值：0.5
starStyle	{ backgroundUri: string, foregroundUri: string, secondaryUri?: string }	backgroundUri：未选中的星级的图片链接，可由用户自定义或使用系统默认图片，仅支持本地图片。 foregroundUri：选中的星级的图片路径，可由用户自定义或使用系统默认图片，仅支持本地图片。 secondaryUir：部分选中的星级的图片路径，可由用户自定义或使用系统默认图片，仅支持本地图片。

事件

名称	功能描述
onChange(callback:(value: number) => void)	操作评分条的评星发生改变时触发该回调。

示例

示例1：

// xxx.ets
@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('current score is ' + 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('common/testImage.jpg')
          .width(40)
          .height(40)
          .borderRadius(20)
          .margin({ left: 24 })
        Column() {
          Text('Yue')
            .fontSize(16)
            .fontColor('#182431')
            .fontWeight(500)
          Row() {
            Rating({ rating: 3.5, indicator: true }).margin({ top: 1, right: 8 })
            Text('2021/06/02')
              .fontSize(10)
              .fontColor('#182431')
          }
        }.margin({ left: 12 }).alignItems(HorizontalAlign.Start)

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

HarmonyOS API：基础组件-鸿蒙开发者社区

示例2：

// xxx.ets
@Entry
@Component
struct RatingExample {
  @State rating: number = 3.5

  build() {
    Column() {
      Rating({ rating: this.rating, indicator: false })
        .stars(5)
        .stepSize(0.5)
        .starStyle({
          backgroundUri: '/common/imag1.png', // common目录与pages同级
          foregroundUri: '/common/imag2.png',
          secondaryUri: '/common/imag3.png'
        })
        .margin({ top: 24 })
        .onChange((value: number) => {
          this.rating = value
        })
      Text('current score is ' + this.rating)
        .fontSize(16)
        .fontColor('rgba(24,36,49,0.60)')
        .margin({ top: 16 })
    }.width('100%').height('100%').backgroundColor('#F1F3F5')
  }
}

HarmonyOS API：基础组件-鸿蒙开发者社区

文章转载自：https://developer.harmonyos.com/cn/docs/documentation/doc-references-V3/ts-basic-components-rating-0000001478341141-V3?catalogVersion=V3

分类

卡片开发

三方件

标签

HarmonyOS API

已于2023-3-24 11:52:36修改

51CTO

51CTO博客

51CTO学堂

HarmonyOS API：基础组件

Progress

子组件

接口

ProgressType枚举说明

ProgressStyle枚举说明

属性

示例

QRCode

子组件

接口

属性

事件

示例

Radio

子组件

接口

属性

事件

示例

Rating

子组件

接口

属性

事件

示例

目录

订阅鸿蒙技术特刊，精选内容抢先看