第一节

作者: XX杰 | 来源:发表于2024-03-04 17:17 被阅读0次

    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 中可以使用,进行循环渲染,渲染列表使用

    相关文章

      网友评论

          本文标题:第一节

          本文链接:https://www.haomeiwen.com/subject/snsogdtx.html