ArkUI学习之常用系统组件（二）

七、二维码组件

二维码的使用场景，比如扫码添加好友，扫码骑车，扫码支付等等，ArkUI开发框架提供了 RQCode 组件生成一个二维码。

接口：

QRCode(value: string)

参数:

参数名	参数类型	必填	参数描述
value	string	是	二维码内容字符串。最大支持256个字符，若超出，则截取前256个字符。说明：该字符串内容确保有效，不支持null、undefined以及空内容。

属性：

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

名称	参数类型	描述
color	ResourceColor	设置二维码颜色。默认值：Color.Black从API version 9开始，该接口支持在ArkTS卡片中使用。
backgroundColor	ResourceColor	设置二维码背景颜色。默认值：Color.White从API version 9开始，该接口支持在ArkTS卡片中使用。

案例如下：

八、开关组件

ArkUI开发框架 Toggle组件提供勾选框样式、状态按钮样式及开关样式。

子组件：仅当ToggleType为Button时可包含子组件。

1.Toggle定义

Toggle(options: { type: ToggleType, isOn?: boolean })

参数:

参数名	参数类型	必填	参数描述
type	ToggleType	是	开关的样式。
isOn	boolean	否	开关是否打开，true：打开，false：关闭。默认值：false

ToggleType枚举说明，从API version 9开始，该接口支持在ArkTS卡片中使用。

名称	描述
Checkbox	提供单选框样式。说明：通用属性margin的默认值为：{top: 12 vp,right: 12 vp,bottom: 12 vp,left: 12 vp}
Button	提供状态按钮样式，如果子组件有文本设置，则相应的文本内容会显示在按钮内部。
Switch	提供开关样式。说明：通用属性margin的默认值为：{top: 14 vp,right: 6 vp,bottom: 6 vp,left: 14 vp}

按钮样式案例如下：

2.Toggle属性介绍

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

名称	参数	参数描述
selectedColor	ResourceColor	设置组件打开状态的背景颜色。从API version 9开始，该接口支持在ArkTS卡片中使用。
switchPointColor	ResourceColor	设置Switch类型的圆形滑块颜色。说明：仅对type为ToggleType.Switch生效。从API version 9开始，该接口支持在ArkTS卡片中使用。

修改之前的代码，设置按钮的颜色如下：

3.Toggle事件介绍

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

名称	功能描述
onChange(callback: (isOn: boolean) => void)	开关状态切换时触发该事件。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：isOn为true时，代表状态从关切换为开。isOn为false时，代表状态从开切换为关。

案例如下：

九、提示框组件

ArkUI开发框架提供了@ohos.promptAction (弹窗)，可以创建并显示文本提示框、对话框和操作菜单。

1. @ohos.promptAction (弹窗)定义

🌾导入模块：

import promptAction from '@ohos.promptAction'

🌾 promptAction.showToast，接口说明：

showToast(options: ShowToastOptions): void

🌾 参数：

参数名	类型	必填	说明
options	ShowToastOptions	是	文本弹窗选项。

ShowToastOptions选项说明

名称	类型	必填	说明
message	string| Resource9+	是	显示的文本信息。默认字体为'Harmony Sans'，不支持设置其他字体。
duration	number	否	默认值1500ms，取值区间：1500ms-10000ms。若小于1500ms则取默认值，若大于10000ms则取上限值10000ms。
bottom	string| number	否	设置弹窗边框距离屏幕底部的位置。

🌾错误码：以下错误码的详细介绍请参见ohos.promptAction(弹窗)错误码。

错误码ID	错误信息
100001	if UI execution context not found.

简答案例如下：

2. promptAction.showDialog

🌾 创建并显示对话框，对话框响应结果异步返回。

接口如下：

showDialog(options: ShowDialogOptions, callback: AsyncCallback<ShowDialogSuccessResponse>):void

🌾 参数：

参数名	类型	必填	说明
options	ShowDialogOptions	是	页面显示对话框信息描述。
callback	AsyncCallback	是	对话框响应结果回调。

ShowDialogOptions对话框的选项说明

名称	类型	必填	说明
title	string| Resource9+	否	标题文本。
message	string| Resource9+	否	内容文本。
buttons	[Button,Button?,Button?]	否	对话框中按钮的数组，结构为：{text:'button', color: '#666666'}，支持1-3个按钮。其中第一个为positiveButton；第二个为negativeButton；第三个为neutralButton。

🌾 ShowDialogSuccessResponse对话框的响应结果。

名称	类型	必填	说明
index	number	否	选中按钮在buttons数组中的索引。

案例如下：

3. promptAction.showActionMenu

🌾 创建并显示操作菜单，菜单响应结果异步返回。

接口：

showActionMenu(options: ActionMenuOptions, callback: AsyncCallback<ActionMenuSuccessResponse>):void

🌾 参数

参数名	类型	必填	说明
options	ActionMenuOptions	是	操作菜单选项。
callback	AsyncCallback	是	菜单响应结果回调。

options操作菜单的选项：

名称	类型	必填	说明
title	string| Resource9+	否	标题文本。
buttons	[Button,Button?,Button?,Button?,Button?,Button?]	是	菜单中菜单项按钮的数组，结构为：{text:'button', color: '#666666'}，支持1-6个按钮。大于6个按钮时弹窗不显示。

上面Button：菜单中的菜单项按钮的构成：

名称	类型	必填	说明
text	string| Resource9+	是	按钮文本内容。
color	string| Resource9+	是	按钮文本颜色。

🌾 返回值

ActionMenuSuccessResponse类型，操作菜单的响应结果。

名称	类型	必填	说明
index	number	否	选中按钮在buttons数组中的索引，从0开始。

案例如下：

十、滑动条组件

项目开发中可能会有设置设备音量大小，调节屏幕亮度等需求，实现类似需求一般都会使用到滑动条，ArkUI开发框架提供了滑动组件 Slider 来实现这些功能。

1. Slider定义介绍

接口：

Slider(options?:{value?: number, min?: number, max?: number, step?: number, style?: SliderStyle, direction?: Axis, reverse?: boolean})

参数：

参数名	参数类型	必填	参数描述
value	number	否	当前进度值。默认值：0
min	number	否	设置最小值。默认值：0
max	number	否	设置最大值。默认值：100
step	number	否	设置滑动条滑动步长。默认值：1
style	SliderStyle	否	设置滑动条的滑块样式。默认值：SliderStyle.OutSet
direction8+	Axis	否	设置滑动条滑动方向为水平或竖直方向。默认值：Axis.Horizontal
reverse8+	boolean	否	设置滑动条取值范围是否反向。说明：设置为false时，水平方向滑动条为从左向右滑动，竖直方向滑动条从上向下滑动，设置为true时，水平方向滑动条为从右向左滑动，竖直方向滑动条从下向上滑动。默认值：false

style滑块样式SliderStyle枚举说明

名称	描述
OutSet	滑块在滑轨上。
InSet	滑块在滑轨内。

案例演示如下：

2.属性

滑动场景属性如下：

名称	参数类型	描述
blockColor	ResourceColor	设置滑块的颜色。
trackColor	ResourceColor	设置滑轨的背景颜色。
selectedColor	ResourceColor	设置滑轨的已滑动颜色。
showSteps	boolean	设置当前是否显示步长刻度值。默认值：false
showTips	boolean	设置滑动时是否显示气泡提示百分比。默认值：false
trackThickness	Length	设置滑轨的粗细。
maxLabel（已废弃）	string	设置最大标签。
minLabel（已废弃）	string	设置最小标签。

🌾 案例1：设置滑块的颜色、设置滑轨的背景颜色、设置滑轨的已滑动颜色。

🌾 案例2：:设置当前显示步长刻度值、设置滑动时是否显示气泡提示百分比、设置滑动条粗细。

预览效果如下：设置了步长为10，显示步长

3.事件

通用事件仅支持：OnAppear，OnDisAppear。

名称	功能描述
onChange(callback: (value: number, mode: SliderChangeMode) => void)	Slider滑动时触发事件回调。value：当前进度值。mode：拖动状态。

SliderChangeMode枚举值为：

名称	值	描述
Begin	0	用户开始拖动滑块。
Moving	1	用户拖动滑块中。
End	2	用户结束拖动滑块。
Click	3	用户点击滑动条使滑块位置移动。

案例演示随着滚动条的拖动，修改图片显示的宽度，

如下：

十一、评分条组件

项目开发中可能会有设置评分的需求，比如给用户一个弹窗，让用户给当前 APP 设置评分等场景，ArkUI开发框架提供了评分条组件 Rating 来实现这个功能。

1.Rating定义

提供在给定范围内选择评分的组件。接口如下：

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

参数：

参数名	参数类型	必填	参数描述
rating	number	是	设置并接收评分值。默认值：0取值范围： [0, stars]小于0取0，大于stars取最大值stars。
indicator	boolean	否	设置评分组件作为指示器使用，不可改变评分。默认值：false, 可进行评分说明：indicator=true时，默认组件高度height=12.0vp，组件width=height * stars。indicator=false时，默认组件高度height=28.0vp，组件width=height * stars。

案例如下：

2.属性

名称	参数类型	描述
stars	number	设置评分总数。默认值：5从API version 9开始，该接口支持在ArkTS卡片中使用。说明：设置为小于0的值时，按默认值显示。
stepSize	number	操作评级的步长。默认值：0.5从API version 9开始，该接口支持在ArkTS卡片中使用。说明：设置为小于0.1的值时，按默认值显示。取值范围为[0.1, stars]。
starStyle	{backgroundUri: string,foregroundUri: string,secondaryUri?: string}	backgroundUri：未选中的星级的图片链接，可由用户自定义或使用系统默认图片。foregroundUri：选中的星级的图片路径，可由用户自定义或使用系统默认图片。secondaryUri：部分选中的星级的图片路径，可由用户自定义或使用系统默认图片。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：startStyle属性所支持的图片类型能力参考Image组件。支持加载本地图片和网络图片，暂不支持PixelMap类型和Resource资源。默认图片加载方式为异步，暂不支持同步加载。设置值为undefined或者空字符串时，rating会选择加载系统默认星型图源。

说明

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

案例如下：

3.Rating事件介绍

事件说明：

名称	功能描述
onChange(callback:(value: number) => void)	操作评分条的评星发生改变时触发该回调。从API version 9开始，该接口支持在ArkTS卡片中使用。

案例说明如下：