【HarmonyOS】HarmonyOS NEXT学习日记：三、初识ArkUI

忘掉HTML和CSS，ArkUI里构建页面的最小单位就是 “组件”，所以今天的目标就是认识一些常用的基础组件，以及他们的用法，对ArkUI形成一个基本认识。

基本组成

了解UI之前我们先来重新认识一下ArkTS的基本组成，这里就要用到官网的经典图了，这里主要关注UI描述。
在这里插入图片描述
图中的Text(),Divider(),Button()就是三个组件，分别为文字、分割线、按钮。然后通过链式调用给每个组建设置属性和事件，即完成了组件的使用。

基本样式

以Button组件为例,如果我们想要修改他的样式,如果是写css,当然是调整他的width\height\background-color\font-size\color等，那么ArkUI怎么搞呢？
在这里插入图片描述

颜色

其中颜色使用了枚举值，当然颜色使用#开头的16进制也是可以的，如下

Button() {Text('Next').fontColor('#000000').fontSize(30).fontWeight(FontWeight.Bold)}

颜色值的两种设置方法在backgroundColor等设置颜色的方法中都通用。

尺寸

上图中，设置按钮尺寸和文字尺寸分别用了width、height和fontSize
其中weigth接收了一个百分比字符串，也可以接收带单位的字符串，当然他也是可以接收数字的：

.width(80)

如果这样设置不带单位的话，使用的单位就是vp，ArkUI推荐使用vp单位。
vp：屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素，在实际宽度为1440物理像素的屏幕上，1vp约等于3px。

fontSize也一样可以接收带单位的字符或者一个不带单位的数字,如果不设置该项目的话，默认大小为16fp。
当接收到一个不带单位的数字，默认使用fp作为单位。
ArkUI推荐使用fp作为文字尺寸的单位。
fp: 字体像素，与vp类似适用屏幕密度变化，随系统字体大小设置变化。

文字溢出省略号、行高

文字溢出省略（设置文本超长时的显示方式）

.textOverflow({overflow: TextOverflow.XXX//注意：需要配合 .maxLines(行数) 使用})

行高

.lineHeight(数字)

代码示例：

Text('测试文字测试文字测试文字测试文字测试文字测试文字')
.textOverflow({
overflow: TextOverflow.Ellipsis}).maxLines(1).fontSize(28).lineHeight(30)

在这里插入图片描述

Image

作用：界面中展示图片
语法：Image(图片数据源) 支持网络图片资源和本地图片资源
下面演示怎么展示本地图片。

Image($r('app.media.background')).width(100).height(100)

在这里插入图片描述
代码中的$ $r 用于从资源文件中获取指定的资源，通过 ‘$ r(‘app.media.xxx’)`我们可以获取到src/main/resources/base/media中的资源

输入框

使用方法

TextInput(value?: TextInputOptions)

通过传参，我们可以设置placeholder和绑定值text
除此之外还有一些常用的属性设置，如下

TextInput({ text: this.text, placeholder: 'input your word...'}).placeholderColor(Color.Red)//placeholder的颜色.placeholderFont({ size: 14, weight: 400 })//placeholder文字样式.caretColor(Color.Blue)//光标颜色.width('95%').height(40).margin(20).fontSize(14).fontColor(Color.Black).inputFilter('[a-z]', (e) => {//输入限制，这里只能输入小写字母console.log(JSON.stringify(e))}).onChange((value: string) => {//change事件this.text = value})

在这里插入图片描述

此外，还有一个type参数也是常用的，可以来设置密码、数字、邮箱等常用输入框类型

TextInput().type(InputType.Password).margin({top: 20})
TextInput().type(InputType.Number).margin({top: 20})
TextInput().type(InputType.Email).margin({top: 20})
TextInput().type(InputType.PhoneNumber).margin({top: 20})

Button

用法：Button(‘按钮文本’)
常用参数：type，接收Capsule 胶囊型按钮、Circle 圆形按钮、 Normal 默认的普通按钮。

Button('普通按钮').margin({top: 20})
Button('胶囊按钮').type(ButtonType.Capsule).margin({top: 20})
Button('圆形按钮').type(ButtonType.Circle).margin({top: 20})

在这里插入图片描述

Checkbox

多选组件

Checkbox({ name: 'checkbox1', group: 'checkboxGroup' })//name为多选框名称、group用来指定所属群组（没有使用CheckboxGroup时无效）.select(true)//初始化是否选中.selectedColor(0xed6f21)//选中时的颜色.shape(CheckBoxShape.CIRCLE)//形状，有CIRCLE和ROUNDED_SQUARE两种.onChange((value: boolean) => {console.info('Checkbox1 change is' + value)})Checkbox({ name: 'checkbox2', group: 'checkboxGroup' }).select(false).selectedColor(0x39a2db).shape(CheckBoxShape.ROUNDED_SQUARE).onChange((value: boolean) => {console.info('Checkbox2 change is' + value)})

在这里插入图片描述

CheckboxGroup

刚刚我们设置多选的时候，设置的group属性似乎无效，是因为没有搭配CheckboxGroup使用。
使用这个组件可以设置同一个群组下的多选框全选或者全不选

CheckboxGroup({ group: 'checkboxGroup' }).checkboxShape(CheckBoxShape.ROUNDED_SQUARE).selectedColor('#007DFF').onChange((itemName: CheckboxGroupResult) => {console.info("checkbox group content" + JSON.stringify(itemName))})Checkbox({ name: 'checkbox1', group: 'checkboxGroup' }).select(true).selectedColor(0xed6f21).shape(CheckBoxShape.CIRCLE).onChange((value: boolean) => {console.info('Checkbox1 change is' + value)})Checkbox({ name: 'checkbox2', group: 'checkboxGroup' }).select(false).selectedColor(0x39a2db).shape(CheckBoxShape.ROUNDED_SQUARE).onChange((value: boolean) => {console.info('Checkbox2 change is' + value)})

在这里插入图片描述

Radio

单选，同一个组的选项只会有有个被选中。

Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {Column() {Text('Radio1')Radio({ value: 'Radio1', group: 'radioGroup' }).checked(true).radioStyle({checkedBackgroundColor: Color.Pink//颜色}).height(50).width(50).onChange((isChecked: boolean) => {console.log('Radio1 status is ' + isChecked)})}Column() {Text('Radio2')Radio({ value: 'Radio2', group: 'radioGroup' }).checked(false).radioStyle({checkedBackgroundColor: Color.Pink}).height(50).width(50).onChange((isChecked: boolean) => {console.log('Radio2 status is ' + isChecked)})}