HarmonyOS API：基础组件

joytrian

发布于 2023-3-29 16:04

浏览

0收藏

版本：v3.1 Beta

progress

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

说明

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

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

权限列表

无

子组件

不支持。

属性

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

名称	类型	默认值	必填	描述
type	string	horizontal	否	设置进度条的类型，该属性不支持动态修改，可选值为： - horizontal：线性进度条； - circular：loading样式进度条； - ring：圆环形进度条； - scale-ring：带刻度圆环形进度条 - arc：弧形进度条。 - eclipse5+：圆形进度条，展现类似月圆月缺的进度展示效果。

不同类型的进度条还支持不同的属性：

类型为horizontal、ring、scale-ring时，支持如下属性：

名称	类型	默认值	必填	描述
percent	number	0	否	当前进度。取值范围为0-100。
secondarypercent	number	0	否	次级进度。取值范围为0-100。

类型为ring、scale-ring时，支持如下属性：

名称	类型	默认值	必填	描述
clockwise	boolean	true	否	圆环形进度条是否采用顺时针。

类型为arc、eclipse5+时，支持如下属性：

名称	类型	默认值	必填	描述
percent	number	0	否	当前进度。取值范围为0-100。

样式

除支持通用样式外，还支持如下样式：

type=horizontal

名称	类型	默认值	必填	描述
color	<color>	#ff007dff	否	设置进度条的颜色。
stroke-width	<length>	4px	否	设置进度条的宽度。
background-color	<color>	-	否	设置进度条的背景色。
secondary-color	<color>	-	否	设置次级进度条的颜色。

type=circular

名称	类型	默认值	必填	描述
color	<color>	-	否	loading进度条上的圆点颜色。

type=ring, scale-ring

名称	类型	默认值	必填	描述
color	<color> \| <linear-gradient>	-	否	环形进度条的颜色，ring类型支持线性渐变色设置。线性渐变色仅支持两个颜色参数设置格式，如color = linear-gradient(#ff0000, #00ff00)。
background-color	<color>	-	否	环形进度条的背景色。
secondary-color	<color>	-	否	环形次级进度条的颜色。
stroke-width	<length>	10px	否	环形进度条的宽度。
scale-width	<length>	-	否	带刻度的环形进度条的刻度粗细，类型为scale-ring生效。
scale-number	number	120	否	带刻度的环形进度条的刻度数量，类型为scale-ring生效。

type=arc

名称	类型	默认值	必填	描述
color	<color>	-	否	弧形进度条的颜色。
background-color	<color>	-	否	弧形进度条的背景色。
stroke-width	<length>	4px	否	弧形进度条的宽度，始终在半径区域内。进度条宽度越大，进度条越靠近圆心。
start-angle	<deg>	240	否	弧形进度条起始角度，以时钟0点为基线，取值范围为0到360（顺时针）。
total-angle	<deg>	240	否	弧形进度条总长度，范围为-360到360，负数标识起点到终点为逆时针。
center-x	<length>	弧形进度条宽度的一半	否	弧形进度条中心位置，坐标原点为组件左上角顶点。该样式需要和center-y和radius一起使用。
center-y	<length>	弧形进度条高度的一半	否	弧形进度条中心位置，坐标原点为组件左上角顶点。该样式需要和center-x和radius一起使用。
radius	<length>	弧形进度条宽高最小值的一半	否	弧形进度条半径，该样式需要和center-x和center-y一起使用。

type=eclipse⁵⁺

名称	类型	默认值	必填	描述
color	<color>	-	否	圆形进度条的颜色。
background-color	<color>	-	否	弧形进度条的背景色。

事件

支持通用事件。

方法

支持通用方法。

示例

<!--xxx.hml -->
<div class="container">
  <progress class="min-progress" type="scale-ring"  percent= "10" secondarypercent="50"></progress>
  <progress class="min-progress" type="horizontal" percent= "10" secondarypercent="50"></progress>
  <progress class="min-progress" type="arc" percent= "10"></progress>
  <progress class="min-progress" type="ring" percent= "10" secondarypercent="50"></progress>
</div>

/* xxx.css */
.container {
  flex-direction: column;
  height: 100%;
  width: 100%;
  align-items: center;
}
.min-progress {
  width: 300px;
  height: 300px;
}

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

qrcode

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

说明

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

生成并显示二维码。

权限列表

无

子组件

不支持。

属性

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

名称	类型	默认值	必填	描述
value	string	-	是	用来生成二维码的内容。
type	string	rect	否	二维码类型。可能选项有： - rect：矩形二维码。 - circle：圆形二维码。

样式

除支持通用样式外，还支持如下样式：

名称	类型	默认值	必填	描述
color	<color>	#000000	否	二维码颜色。
background-color	<color>	#ffffff	否	二维码背景颜色。

说明

width和height不一致时，取二者较小值作为二维码的边长。且最终生成的二维码居中显示。
width和height只设置一个时，取设置的值作为二维码的边长。都不设置时，使用200px作为默认边长。

事件

支持通用事件。

方法

支持通用方法。

示例

<!-- xxx.hml -->
<div class="container">
  <qrcode value="{{qr_value}}" type="{{qr_type}}"
  style="color: {{qr_col}};background-color: {{qr_bcol}};width: {{qr_size}};height: {{qr_size}};margin-bottom: 70px;"></qrcode>
  <text class="txt">Type</text>
  <switch showtext="true" checked="true" texton="rect" textoff="circle" onchange="settype"></switch>
  <text class="txt">Color</text>
  <select onchange="setcol">
    <option for="{{col_list}}" value="{{$item}}">{{$item}}</option>
  </select>
  <text class="txt">Background Color</text>
  <select onchange="setbcol">
    <option for="{{bcol_list}}" value="{{$item}}">{{$item}}</option>
  </select>
</div>

/* xxx.css */
.container {
  width: 100%;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.txt {
  margin: 30px;
  color: orangered;
}
select{
  margin-top: 40px;
  margin-bottom: 40px;
}

/* index.js */
export default {
  data: {
    qr_type: 'rect',
    qr_size: '300px',
    qr_col: '#87ceeb',
    col_list: ['#87ceeb','#fa8072','#da70d6','#80ff00ff','#00ff00ff'],
    qr_bcol: '#f0ffff',
    bcol_list: ['#f0ffff','#ffffe0','#d8bfd8']
  },
  settype(e) {
    if (e.checked) {
      this.qr_type = 'rect'
    } else {
      this.qr_type = 'circle'
    }
  },
  setcol(e) {
    this.qr_col = e.newValue
  },
  setbcol(e) {
    this.qr_bcol = e.newValue
  }
}

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

rating

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

说明

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

评分条，表示用户使用感受的衡量标准条。

权限列表

无

子组件

不支持。

属性

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

名称	类型	默认值	必填	描述
numstars	number	5	否	设置评分条的星级总数。
rating	number	0	否	设置评分条当前评星数。
stepsize	number	0.5	否	设置评分条的评星步长。
indicator	boolean	false	否	设置评分条是否作为一个指示器，此时用户不可操作。

样式

除支持通用样式外，还支持如下样式：

名称	类型	默认值	必填	描述
star-background	string	-	否	设置单个星级未选中的背景图片，只支持本地路径图片，图片格式为png和jpg。
star-foreground	string	-	否	设置单个星级选中的前景图片，只支持本地路径图片，图片格式为png和jpg。
star-secondary	string	-	否	设置单个星级部分选中的次级背景图片，该图片会覆盖背景图片，只支持本地路径图片，图片格式为png和jpg。
width	<length>\|<percentage>	120px 60px（不可操作）	否	默认值是在未设置自定义资源和评分星数时，使用5个星和默认资源下的宽度值。
height	<length>\|<percentage>	24px 12px（不可操作）	否	默认值是在未设置自定义资源和评分星数时，使用5个星和默认资源下的高度值。
rtl-flip	boolean	true	否	在RTL文字方向下是否自动翻转图源。

说明

star-background，star-secondary，star-foreground三个星级图源必须全部设置，否则默认的星级颜色为灰色，以此提示图源设置错误。

事件

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

名称	参数	描述
change	{ rating: number }	评分条的评星发生改变时触发该回调。

方法

支持通用方法。

示例

<!-- xxx.hml -->
<div class="container">
  <rating numstars="5" rating="5" @change="changeRating" id="rating">
  </rating>
</div>

/* xxx.css */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
rating {
  width: 200px;
}

// xxx.js
import promptAction from '@ohos.promptAction';
export default {
    changeRating(e){
        promptAction.showToast({
            message: e.rating
        });
    }
}

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

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

分类

卡片开发

三方库

标签

HarmonyOS API

已于2023-3-29 16:04:25修改

51CTO

51CTO博客

51CTO学堂

HarmonyOS API：基础组件

progress

权限列表

子组件

属性

样式

事件

方法

示例

qrcode

权限列表

子组件

属性

样式

事件

方法

示例

rating

权限列表

子组件

属性

样式

事件

方法

示例

目录

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