鸿蒙应用开发之UI框架方舟ArkUI使用参考

原创

已于 2024-08-07 21:22:17 修改 · 2.3k 阅读

标签

#harmonyos #ui #鸿蒙应用开发 #鸿蒙系统 #华为

于 2024-08-07 19:25:09 首次发布

内容提要

ArkUI框架概述
常用UI组件
路由管理
组件状态管理
组件生命周期

一、ArkUI框架概述

HarmonyOS提供了⼀套UI开发框架，即⽅⾈开发框架（ArkUI框架）。⽅⾈开发框架可为开发者提
供应⽤UI开发所必需的能⼒，⽐如多种组件、布局计算、动画能⼒、UI交互、绘制等。

⽅⾈开发框架针对不同⽬的和技术背景，提供两种开发⽅式：
基于ArkTS的声明式开发范式（简称“声明式开发范式”），这里以声明式为例进行解析。
兼容JS的类Web开发范式（简称“类Web开发范式”）。

说明：ArkUI声明式开发，其代码是嵌入到ArkTS中实现的。

1、组件分类

HarmonyOS为开发者提供应⽤程序界⾯所需的各种组件，将这些组件进⾏分类，⽅便开发者快速
上⼿。
常⽤的UI组件有：基础组件、容器组件与媒体组件三种。

2、组件通过属性

组件通⽤属性：所有组件都可以使⽤的属性。
通⽤的属性⾮常多，建议在使⽤的时候，再去官网查阅相关的API。

例如：尺⼨属性
width(宽)
height(⾼)
size(⾼宽尺⼨)
padding(内边距)
margin(外边距)
layoutWeight(⽗容器尺⼨确定时，设置了layoutWeight属性的⼦元素与兄弟元素占主轴尺⼨
按照权重进⾏分配，忽略元素本身尺⼨设置，表示⾃适应占满剩余空间)。
constraintSize(设置约束尺⼨，组件布局时，进⾏尺⼨范围限制。constraintSize的优先级⾼
于Width和Height。若设置的minWidth⼤于maxWidth，则minWidth⽣效，minHeight与
maxHeight同理)。

例如：⽂本样式
fontColor(设置字体颜⾊)
fontSize(设置字体⼤⼩,字体默认⼤⼩16。不⽀持设置百分⽐字符串)
fontStyle(设置字体样式)
fontWeight(设置⽂本的字体粗细，number类型取值[100, 900]，取值间隔为100，默认为
400，取值越⼤，字体越粗)
fontFamily(设置字体列表。默认字体'HarmonyOS Sans')
lineHeight(设置⽂本的⽂本⾏⾼，设置值不⼤于0时，不限制⽂本⾏⾼，⾃适应字体⼤⼩，
Length为number类型时单位为fp)。
decoration(设置⽂本装饰线样式及其颜⾊)

3、组件通用事件

组件通用事件：所有组件都可以使⽤的事件。

点击事件：onClick(event: (event?: ClickEvent) => void)

触摸事件：onTouch(event: (event?: TouchEvent) => void)

挂载卸载事件：

组件显示(挂载)事件：onAppear(event: () => void)

组件卸载事件：onDisAppear(event: () => void)

拖拽事件：

第⼀次拖拽此事件绑定的组件时：

onDragStart(event: (event?: DragEvent, extraParams?: string) => CustomBuilder | DragItemInfo)

拖拽进⼊组件范围内时：

onDragEnter(event: (event?: DragEvent, extraParams?: string) => void)

拖拽在组件范围内移动时：

onDragMove(event: (event?: DragEvent, extraParams?: string) => void)

拖拽离开组件范围内时：

onDragLeave(event: (event?: DragEvent, extraParams?: string) => void)

绑定此事件的组件可作为拖拽释放⽬标，当在本组件范围内停⽌拖拽⾏为时：

onDrop(event: (event?: DragEvent, extraParams?: string) => void)

按键事件：onKeyEvent(event: (event?: KeyEvent) => void)

焦点事件：

当前组件获取焦点时触发：onFocus(event: () => void)

当前组件失去焦点时触发：onBlur(event:() => void)

⿏标事件：

⿏标进⼊或退出组件时触发该回调：onHover(event: (isHover?: boolean) => void)

当前组件被⿏标按键点击时或者⿏标在组件上悬浮移动时，触发该回调：

onMouse(event: (event?: MouseEvent) => void)

组件区域变化事件：onAreaChange(event: (oldValue: Area, newValue: Area) => void)

组件可⻅区域变化事件：

onVisibleAreaChange(ratios: Array<number>, event: (isVisible: boolean,currentRatio: number) => void)

4、创建组件

ArkTS以声明⽅式组合和扩展组件来描述应⽤程序的UI，同时还提供了基本的属性、事件和⼦组件
配置⽅法，帮助开发者实现应⽤交互逻辑。

根据组件构造⽅法的不同，创建组件包含有参数和⽆参数两种⽅式（创建组件时不需要new运算
符）。
（1）⽆参数
如果组件的接⼝定义没有包含必选构造参数，则组件后⾯的“()”不需要配置任何内容。

例如，Divider组件不包含构造参数：

Column() {
Text('item 1')
Divider()
Text('item 2')
}
12345

（2）有参数
如果组件的接⼝定义包含构造参数，则在组件后⾯的“()”配置相应参数。

// Image组件的必选参数src
Image('https://xyz/test.jpg')
// Text组件的⾮必选参数content
// string类型的参数
Text('test')
// $r形式引⼊应⽤资源，可应⽤于多语⾔场景
Text($r('app.string.title_value'))
// ⽆参数形式
Text()

5、配置属性

属性⽅法以“.”链式调⽤的⽅式配置系统组件的样式和其他属性，建议每个属性⽅法单独写⼀⾏。

// 配置Text组件的字体⼤⼩
Text('test')
.fontSize(12)
// 配置组件的多个属性
Image('test.jpg')
.alt('error.jpg')
.width(100)
.height(100)
// 除了直接传递常量参数外，还可以传递变量或表达式。
Text('hello')
.fontSize(this.size)
Image('test.jpg')
.width(this.count % 2 === 0 ? 100 : 200)
.height(this.offset + 100)
// 对于系统组件，ArkUI还为其属性预定义了⼀些枚举类型供开发者调⽤
Text('hello')
.fontSize(20)
.fontColor(Color.Red)
.fontWeight(FontWeight.Bold)

6、配置事件

事件⽅法以“.”链式调⽤的⽅式配置系统组件⽀持的事件，建议每个事件⽅法单独写⼀⾏。

// 使⽤箭头函数配置组件的事件⽅法
Button('Click me')
.onClick(() => {
this.myText = 'ArkUI';
})
// 使⽤匿名函数表达式配置组件的事件⽅法，要求使⽤bind，以确保函数体中的this指向当前组
件。
Button('add counter')
.onClick(function(){
this.counter += 2;
}.bind(this))

7、配置⼦组件

如果组件⽀持⼦组件配置，则需在尾随闭包"{...}"中为组件添加⼦组件的UI描述。Column、Row、
Stack、Grid、List等组件都是容器组件。

// 以下是简单的Column组件配置⼦组件的示例
Column() {
Text('Hello')
.fontSize(100)
Divider()
Text(this.myText)
.fontSize(100)
.fontColor(Color.Red)
}
123456789

容器组件均⽀持⼦组件配置，可以实现相对复杂的多级嵌套。

二、常用UI组件介绍

1、图片组件(Image)

图⽚组件，⽀持本地图⽚和⽹络图⽚的渲染展示。
语法：Image(src: string | PixelMap | Resource)
图⽚的数据源，⽀持本地图⽚和⽹络图⽚。当使⽤相对路径引⽤图⽚资源时，

例如Image("common/test.jpg")，不⽀持跨包/跨模块调⽤该Image组件，建议使⽤$r⽅式来管理需全局使⽤的图⽚资源。

@Entry
@Component
struct Index {
@State imgWidth:number = 100;
build() {
Column() {
// 使⽤Resources资源图⽚，固定写法$r('app.media.图⽚名称')
Image($r('app.media.icon_header_logo'))
// 设置宽度
.width(this.imgWidth)
// 设置图⽚的插值效果
.interpolation(ImageInterpolation.High)
.onClick(()=>{
this.imgWidth+=10;
})
// 使⽤⽹络图⽚
Image('https://img10.360buyimg.com/img/jfs/t1/232436/19/11137/1806
0/659cb904F4aa90538/4e4ab1be4fe416f7.jpg')
.width(300)
.interpolation(ImageInterpolation.High)
// 使⽤本地图⽚，必须书写相对路径
Image("pages/image/imgs/1.webp")
.width(100)
.interpolation(ImageInterpolation.High)
}
.width('100%')
}
}

注意事项：
（1）在使⽤Resources⽬录下的资源图⽚时，格式为：$r('app.media.图⽚名称')，不需要书写图⽚扩展名
（2）使⽤本地图⽚资源时，需要从pages⽬录书写相对路径
（3）使⽤interpolation可以防⽌图⽚放⼤的锯⻮效果，interpolation的值有4个：