HarmonyOS—ArkUI组件使用_arkui组件如何接收参数-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45147818/article/details/143719272

ArkUI组件

TextInput

需要接收用户输入，就可以使用输入组件来完成

基本代码

TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextInputController})

常用参数

参数名	类型	是否必填	说明
placeholder	ResourceStr	否	设置无输入时的提示文本。
text	ResourceStr	否	设置输入框当前的文本内容。从API version 10开始，该参数支持$$双向绑定变量。

常用属性

名称	参数类型	描述
type	InputType	设置输入框类型。默认值：InputType.Normal
showUnderline	boolean	设置是否开启下划线。下划线默认颜色为’#33182431’，默认粗细为1px，文本框尺寸48vp（下划线只支持InputType.Normal类型）。默认值：false
passwordIcon	PasswordIcon	onIconSrc:输入状态时图标offIconSrc:隐藏状态时图标
placeholderColor	ResourceColor	设置placeholder文本颜色。默认值跟随主题。

InputType部分枚举值

名称	描述
Normal	基本输入模式。可输入数字、字母、下划线、空格、特殊字符。
Password	密码输入模式。支持输入数字、字母、下划线、空格、特殊字符。密码显示小眼睛图标并且默认会将文字变成圆点。密码输入模式不支持下划线样式。在已启用密码保险箱的情况下，支持用户名、密码的自动保存和自动填充。
Email	邮箱地址输入模式。支持数字，字母，下划线，.字符，以及@字符（只能存在一个@字符）。
Number	纯数字输入模式。

TextArea

用来设置多行文本，用法和TextInput基本一致

基础代码

TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: TextAreaController})

常用参数

参数名	类型	是否必填	说明
placeholder	ResourceStr	否	设置无输入时的提示文本。
text	ResourceStr	否	设置输入框当前的文本内容。从API version 10开始，该参数支持$$双向绑定变量。

常用属性

名称	参数类型	描述
type	TextAreaType	设置输入框类型。默认值：InputType.Normal
placeholderColor	ResourceColor	设置placeholder文本颜色。默认值跟随主题。
showCounter	value: boolean, options11+?: InputCounterOptions	参数value为true时，才能设置options，文本框开启计数下标功能，需要配合maxlength（设置最大字符限制）一起使用。
maxLength	number	设置文本的最大输入字符数。默认不设置最大输入字符数限制。到达文本最大字符限制，将无法继续输入字符，同时边框变为红色。

多选框

Checkbox

多选框组件

基础代码
```
Checkbox(options?: CheckboxOptions)
```

参数CheckboxOptions说明

名称	参数类型	描述
select	boolean	设置多选框是否选中。默认值：false 从API version 9开始，该接口支持在ArkTS卡片中使用。从API version 10开始，该属性支持$$双向绑定变量。
selectedColor	ResourceColor	设置多选框选中状态颜色。说明：默认值：$r(‘sys.color.ohos_id_color_text_primary_activated’)。异常值按照默认值处理。从API version 9开始，该接口支持在ArkTS卡片中使用。
unselectedColor	ResourceColor	设置多选框非选中状态边框颜色。
shape	CheckBoxShape	设置CheckBox组件形状, 包括圆形和圆角方形。说明：默认值：CheckBoxShape.CIRCLE。

CheckboxGroup

如果要控制多个 Checkbox 的选中状态，可以通过CheckBoxGroup来实现

基础代码

CheckboxGroup(options?: CheckboxGroupOptions)

参数说明

名称	类型	必填	说明
group	string	否	群组名称。说明：多个相同群组名称的CheckboxGroup，仅第一个CheckboxGroup生效。

常用属性

名称	参数类型	描述
selectAll	boolean	设置是否全选。默认值：false，若同组的Checkbox设置了select属性，则Checkbox的优先级高。该属性支持$$,双向绑定变量。
selectedColor	ResourceColor	设置被选中或部分选中状态的颜色。
unselectedColor	ResourceColor	设置非选中状态边框颜色。

事件

名称	功能描述
onChange (callback: (event: CheckboxGroupResult) => void )	CheckboxGroup的选中状态或群组内的Checkbox的选中状态发生变化时，触发回调。

CheckboxGroupResult

名称类型描述

name Array<string> 群组内所有被选中的多选框名称。name 属性

名称	类型	描述
name	Array<string>	群组内所有被选中的多选框名称。name 属性

Button按钮

Button('按钮文本')

示例代码

// 控件组件之间的距离，可以给Column 设置 {space:间隙大小}
Column({space:20}){
      TextInput({
        placeholder:'请输入用户名' //输入框提示文字
      })
      TextInput({
        placeholder:'请输入密码'
      })
        .type(InputType.Password)  //设置输入类型
      Button('登录')
        .width(200)
}

设计资源-svg图标

界面中展示图标 → 可以使用 svg 图标**(任意放大缩小不失真、可以改颜色)**

使用方式
- 设计师提供:基于项目设计的图标，拷贝到项目目录使用
- 图标库中选取:找合适的图标资源→下载(svg)→> 拷贝使用
  - HarmonyOS 主题图标库 | icon素材免费下载 | 华为开发者联盟 (huawei.com)
  - iconfont-阿里巴巴矢量图标库
- HarmonyOS 图标默认命名以 ic_ 开头，其他图标库下载的图标素材建议修改为与 HarmonyOS 命名规则相同。
- 使用方法同Image

Image 组件显示图标，添加 fillColor() 属性修改图标颜色

Image($r('app.media.ic_gallery_create'))
        .width(200)
        .fillColor(Color.Red)

Badge角标组件

可以附加在单个组件上用于信息标记的容器组件
组件名称：Badge
参数
- 角标数值：count -> 参数类型number
- 角标位置：position -> 参数类型BadgePosition
- 角标样式：style
  - fontSize 文字大小
  - badgeSize 圆形大小
  - badgeColor 圆形底色
代码示