【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进制也是可以的，如下

ts 复制代码

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

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

尺寸

上图中，设置按钮尺寸和文字尺寸分别用了width、height和fontSize

其中weigth接收了一个百分比字符串，也可以接收带单位的字符串，当然他也是可以接收数字的：

ts 复制代码

.width(80)

如果这样设置不带单位的话，使用的单位就是vp，ArkUI推荐使用vp单位。

vp：屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素，在实际宽度为1440物理像素的屏幕上，1vp约等于3px。

fontSize也一样可以接收带单位的字符或者一个不带单位的数字,如果不设置该项目的话，默认大小为16fp。

当接收到一个不带单位的数字，默认使用fp作为单位。

ArkUI推荐使用fp作为文字尺寸的单位。

fp: 字体像素，与vp类似适用屏幕密度变化，随系统字体大小设置变化。

文字溢出省略号、行高

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

ts 复制代码

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

行高

ts 复制代码

.lineHeight(数字)

代码示例：

ts 复制代码

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

Image

作用：界面中展示图片

语法：Image(图片数据源) 支持网络图片资源和本地图片资源

下面演示怎么展示本地图片。

bash 复制代码

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

代码中的$ r 用于从资源文件中获取指定的资源，通过 ' r 用于从资源文件中获取指定的资源，通过 ` r用于从资源文件中获取指定的资源，通过'r('app.media.xxx')`我们可以获取到src/main/resources/base/media中的资源

输入框

使用方法

bash 复制代码

TextInput(value?: TextInputOptions)

通过传参，我们可以设置placeholder和绑定值text

除此之外还有一些常用的属性设置，如下

ts 复制代码

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参数也是常用的，可以来设置密码、数字、邮箱等常用输入框类型

ts 复制代码

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 默认的普通按钮。

ts 复制代码

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

Checkbox

多选组件

ts 复制代码

        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使用。

使用这个组件可以设置同一个群组下的多选框全选或者全不选

ts 复制代码

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

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

ts 复制代码

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)
            })
        }

总结

这里学习了一些常用的组件的用法、作为ArkUI的最小单位，熟悉了这些就能实现一些基本的页面。明天我打算再学习一些布局知识，这样就可以着手实现一个简单页面了。

arkUI提供的基础组件不止上面提到的这些，详情可以查看官方文档，提供了更多的诸如富文本渲染、日期选择、svg等多种组件，需要的时候在查看文档，边用边学即可，没必要一口气学完。