ArkTs UI 的开发 主要依赖 TS 语言,和 装饰器
类似 flutter 响应式 开发的框架。或者 android 的compose
界面是通过 链式代码 绘制显示的
装饰器
@Component
struct XXX
说明:XXX是一个自定义组件, 其内部必有一个 build 方法用来绘制组件内容
@Entry
说明:被该装饰器修饰的组件作为页面的 默认入口。同时具有组件的生命周期和页面的生命周期
组件状态装饰器
@State 《比较灵活,组件 也可以是变量 ??》
说明:一般修饰数据变量,当数据发生改变的时候,对应的刷新页面
@Link
说明:装饰的变量可以和父组件的@State变量建立双向数据绑定,需要注意的是:@Link变量不能在组件内部进行初始化。
@Prop
说明:@Prop装饰的变量必须使用其父组件提供的@State变量进行初始化,允许组件内部修改@Prop变量,但更改不会通知给父组件,即@Prop属于单向数据绑定。
@Builder
修饰方法,方法中放 基础组建,省略@compenent 修饰的组建和build方法。但是可以当build方法使用,也可以传递参数
说明:装饰的方法用于定义组件的声明式UI描述,在一个自定义组件内快速生成多个布局内容。
组件
通过使用组合 基础组件和容器组件,构建自定义组件。
组件中 根据包含关系 分为 子组件和父组件
基础组件
Text,Button,Image,TextInput ……
容器组件
Column,Row,Stack,List ……
自定义组件的生命周期
注意:生命周期函数是 私有的,无法手动调用,只可以系统调用
aboutToAppear()
创建组件之后,执行 build() 函数之前。
可以对UI展示的数据进行初始化,请求网络接口,申请某些资源等操作
aboutToDisappear()
在自定义组件实例被销毁之前调用,用于数据/资源的释放,避免内存泄漏,销毁线程等 操作
由 @Entry 修饰的页面入口组件生命周期
注意:只有被 @Entry 修饰的组件才有下面的三个生命周期方法。同样的组件也具有上面的 (aboutToAppear 和aboutToDisappear)生命周期方法
onPageShow()
触发一次,页面显示时触发。 build方法之后。aboutToDisappear方法之后
onPageHide()
触发一次,页面隐藏时触发。 按home键的时候或者被其他page覆盖的时候。aboutToDisappear 方法之前
onBackPress()
按物理返回键的时候
注意的一点,允许在生命周期函数中使用 Promise 和异步回调函数,比如网络资源获取,定时器设置等;不允许在生命周期函数中使用 async await 。
语法关键字
export: 导出类/组件 可以给别的 文件使用 TS 语法特性
import: 倒入 被 export 修饰的 类/组件 ,也可以导入某个方法和属性
if/else : 在build 中可以使用,进行条件渲染
ForEach + ListItem和ListItemComponent:在 build 中可以使用,进行循环渲染,渲染列表使用