Harmony OS Next（纯血鸿蒙开发）：【第二篇】ArkUI、ArkTS语法： 循环控制 & 自定义组件封装 & 自定义构建函数 & 自定义样式函数 & 继承样式封装 &组件通信、状态管理

已于 2024-03-26 11:20:24 修改
阅读量1.3k 收藏 17
点赞数 25
分类专栏： Harmony OS 4.0 + Next 文章标签： HarmonyOS Next
于 2024-03-26 11:15:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Forever_Hopeful/article/details/136531192
版权

Harmony OS Next 开发专栏：
点击前往： HarmonyOS开发专栏

文章目录

一、循环渲染控制

1.1 ForEach
  • 重复执行渲染的代码，我们可以放在循环中进行处理，学过vue的都知道v-for，用法就是一样的。
    在这里插入图片描述
1.2 if else 判断语句

在这里插入图片描述

// 实体类
class Item {
  name: string
  image: ResourceStr
  price: number
  discount: number

  // 构造方法
  constructor(name: string, image: ResourceStr, price: number, discount: number) {
    this.name = name
    this.image = image
    this.price = price
    this.discount = discount
  }
}

@Entry
@Component
struct ItemPage {
  // 数据
  private  items: Array<Item> = [
    new Item('华为Mate60Pro', $r('app.media.mate60'), 6999, 1000),
    new Item('华为Mate60Pro', $r('app.media.mate60'), 6999, 0),
    new Item('华为Mate60Pro', $r('app.media.mate60'), 6999, 0),
    new Item('华为Mate60Pro', $r('app.media.mate60'), 6999, 0),
    new Item('华为Mate60Pro', $r('app.media.mate60'), 6999, 0)
  ]

  build() {
    Column({space: 8}) {
      Row() {
        Text('商品列表')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
      .margin({bottom: 20})

      // ForEach
      ForEach(
        this.items,
        (item: Item) => {
          Row({ space: 10}){
            Image(item.image)
              .width(100)
            Column({ space: 4}) {
              if (item.discount) {
                Text(item.name)
                  .fontSize(20)
                  .fontWeight(FontWeight.Bold)
                Text('原价：￥' + item.price)
                  .fontSize(18)
                  .fontColor('#FFCCAA')
                  .decoration({ type: TextDecorationType.LineThrough })
                Text('折扣价：￥' + (item.price - item.discount))
                  .fontSize(18)
                  .fontColor('#FFCCAA')
                Text('补贴：￥' + item.discount)
                  .fontSize(18)
                  .fontColor('#FFCCAA')
              } else {
                Text(item.name)
                  .fontSize(20)
                  .fontWeight(FontWeight.Bold)
                Text('￥' + item.price)
                  .fontSize(18)
                  .fontColor('#FFCCAA')
              }
            }
            .height('100%')
            .alignItems(HorizontalAlign.Start)
          }
          .width('90%')
          .height(120)
          .backgroundColor('#FFF')
          .borderRadius(20)
          .margin({left: 24, right: 24})
          .padding(10)
        },

      )

    }
    .backgroundColor('#EEE')
    .height('100%')
  }
}

二、List 列表容器

在这里插入图片描述

  • List 组件内不能直接包含基础组件，所以我们需要使用ListItem进行包裹，里面在进行布局。
  // 使用 List 列表容器包裹
        List({ space: 10}) {
          // ForEach
          ForEach(
            this.items,
            (item: Item) => {
              ListItem() {
                Row({ space: 10}){
                  Image(item.image)
                    .width(100)
                  Column({ space: 4}) {
                    if (item.discount) {
                      Text(item.name)
                        .fontSize(20)
                        .fontWeight(FontWeight.Bold)
                      Text('原价：￥' + item.price)
                        .fontSize(18)
                        .fontColor('#FFCCAA')
                        .decoration({ type: TextDecorationType.LineThrough })
                      Text('折扣价：￥' + (item.price - item.discount))
                        .fontSize(18)
                        .fontColor('#FFCCAA')
                      Text('补贴：￥' + item.discount)
                        .fontSize(18)
                        .fontColor('#FFCCAA')
                    } else {
                      Text(item.name)
                        .fontSize(20)
                        .fontWeight(FontWeight.Bold)
                      Text('￥' + item.price)
                        .fontSize(18)
                        .fontColor('#FFCCAA')
                    }
                  }
                  .height('100%')
                  .alignItems(HorizontalAlign.Start)
  • 这里我使用了 ListItem 对基础布局组件进行了包裹。最后我们就能实现超出后能够进行滑动效果了。

在这里插入图片描述

三、 自定义组件封装

在这里插入图片描述

3.1 方法一：局部自定义组件
  // 创建一个自定义组件
  @Component
  struct Header {
    private title: ResourceStr
    build() {
      Row() {
        Image($r('app.media.return'))
          .width(30)
        Text(this.title)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .height(40)
        Blank()
        Image($r('app.media.refresh'))
          .width(30)
      }
      .width('100%')
      .height(30)
    }
  }

使用自定义组件

        // 调用自定义组件
        Header({ title: '商品列表'})
          .margin(30)   // 修改自定义组件样式
3.3 方法二：全局自定义组件
  • 创建一个文件夹， 专门用来存放全局组件的文件。

在这里插入图片描述

在这里插入图片描述

  • 这里我们只需要将这个地方的代码使用全局组件进行封装，然后向局部组件一样调用使用，前提是得导出和使用页面的导入。
// 创建一个全局自定义组件
@Component
// 1、全局自定义组件需要我们进行导出 export
export struct Header {
  private title: ResourceStr = ''
  build() {
    Row() {
      Image($r('app.media.return'))
        .width(30)
      Text(this.title)
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
        .height(40)
      Blank()
      Image($r('app.media.refresh'))
        .width(30)
    }
    .width('100%')
    .height(30)
  }
}



// 2、导入全局自定义组件

import {Header} from '../components/CommonComponents'
  • 这样以来，只要页面需要使用到这个按钮的，我们就直接拿来使用功能就可以了。

四、自定义构建函数封装

4.1 局部自定义构建函数
  • 需要注意的是，局部自定义函数不需要添加 function 函数
  • 并且局部页面组件内，调用函数都需要添加 this 关键字访问调用！

从上面代码可以看出了，我们页面结构是不是很臃肿，此时我们使用自定义构建函数解决这个问题是非常好解决的，就和我们其他编程语言里，将代码封装起来，提高可读性

    // 局部自定义构建函数（在页面组件内声明）
    @Builder ItemCard (item: Item) {
      Row({ space: 10}){
        Image(item.image)
          .width(100)
        Column({ space: 4}) {
          if (item.discount) {
            Text(item.name)
              .fontSize(20)
              .fontWeight(FontWeight.Bold)
            Text('原价：￥' + item.price)
              .fontSize(18)
              .fontColor('#FFCCAA')
              .decoration({ type: TextDecorationType.LineThrough })
            Text('折扣价：￥' + (item.price - item.discount))
              .fontSize(18)
              .fontColor('#FFCCAA')
            Text('补贴：￥' + item.discount)
              .fontSize(18)
              .fontColor('#FFCCAA')
          } else {
            Text(item.name)
              .fontSize(20)
              .fontWeight(FontWeight.Bold)
            Text('￥' + item.price)
              .fontSize(18)
              .fontColor('#FFCCAA')
          }
        }
        .height('100%')
        .alignItems(HorizontalAlign.Start)
      }
      .width('90%')
      .height(120)
      .backgroundColor('#FFF')
      .borderRadius(20)
      .margin({left: 15, right: 10})
      .padding(10)
    }
4.2 全局自定义构建函数
// 全局自定义构建函数（在页面组件外声明）
@Builder function ItemCard (item: Item) {
  Row({ space: 10}){
    Image(item.image)
      .width(100)
    Column({ space: 4}) {
      if (item.discount) {
        Text(item.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Text('原价：￥' + item.price)
          .fontSize(18)
          .fontColor('#FFCCAA')
          .decoration({ type: TextDecorationType.LineThrough })
        Text('折扣价：￥' + (item.price - item.discount))
          .fontSize(18)
          .fontColor('#FFCCAA')
        Text('补贴：￥' + item.discount)
          .fontSize(18)
          .fontColor('#FFCCAA')
      } else {
        Text(item.name)
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Text('￥' + item.price)
          .fontSize(18)
          .fontColor('#FFCCAA')
      }
    }
    .height('100%')
    .alignItems(HorizontalAlign.Start)
  }
  .width('90%')
  .height(120)
  .backgroundColor('#FFF')
  .borderRadius(20)
  .margin({left: 15, right: 10})
  .padding(10)
}
  • 两种自定义构建函数的调用方式如下：
 // 使用 List 列表容器包裹
        List({ space: 10}) {
          // ForEach
          ForEach(
            this.items,
            (item: Item) => {
              ListItem() {
                // this.ItemCard(item)   局部调用方式
                // ItemCard(item)        全局调用方式
              }
            },
          )
        }

五、自定义样式函数封装

5.1 局部样式函数
  • 局部样函数和局部自定义构建函数一样，不要使用 function 关键字，使用功能S@tyle装饰器修饰
    // 局部公共样式函数
  @Styles pageStyle () {
    .width('100%')
    .height('100%')
    .backgroundColor('#EEE')
    .padding(20)
  }
5.2 公共（通用）样式函数
  • 注意： @Styles 只能封装公共的通用样式

// 全局公共样式含数据
@Styles function pageStyle () {
  .width('100%')
  .height('100%')
  .backgroundColor('#EEE')
  .padding(20)
}
  • 调用方式两种都是一样的
    就只需要要在我们需要这个样式的组件后面以点的方式进行调用就可以！
      .pageStyle() // 调用全局样式函数

六、 继承样式（特有属性）封装

在这里插入图片描述

  • 你看，红色和黄色框起来的代码完全就是重复的，我们同样的可以进行分装，但是需要注意的是，这个可不是公共通用属性，上面说了不能使用@Styles装饰器进行修饰。这里我们只能使用@Exdent进行修饰
// 继承属性：全局封装特有属性样式函数
@Extend(Text) function priceText () {
  .fontSize(18)
  .fontColor('#FFCCAA')
}
  • 调用后如下图所示；
    在这里插入图片描述
  • 是不是方便简洁了很多，主要后期修改只需要修改函数内的就可以了

七、状态管理

7.1 @State

在这里插入图片描述

  • 注意：
    • 1、一旦被 @State 修饰的变量，必须进行初始化！
    • 2、复杂数据类型嵌套的话，数据会改变，但是视图不会及时更新！
    • 3、数组中元素为对象的时候，对象发生改变，同样的不会影响视图及时跟新！（当然将对象重新赋值是可以的，但是每次都得重新创建对象）

如下代码示例：



```@Entry
@Component
struct StateDemoCode {
  @State message: string = 'Hello World'
  build() {
    Column() {
      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          this.message = 'Hello ArkTS!'
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}
  • 代码中的@State是不是修饰了一个字符串变量，然后我给这个text绑定了一个 onClick点击事件，然后我们点击的时候，就会将默认的 值 变成变量值，也就是说，普通类型的变量我们能够及时跟新视图的。

在这里插入图片描述

在这里插入图片描述
普通的对象也是可以及时更新的：

/**
 * 状态管理
 */

class Person {
  name: string
  age: number

  constructor (name: string, age: number) {
    this.name = name
    this.age = age
  }
}

@Entry
@Component
struct StateDemoCode {
  @State p: Person = new Person('LiuJinTao', 18)
  build() {
    Column() {
      Text(`姓名${this.p.name} : ${this.p.age}`)
        .fontSize(40)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          this.p.age++
        })
    }
    .width('100%')
    .height('100%')
  }
}

下面是无法及时更新驶入的展示:


  @State p: Person = new Person('LiuJinTao', 18, new Person('yxy', 18)) // 这里就是 嵌套对象


      Text(`姓名${this.p.name} : ${this.p.age}`)
        .fontSize(40)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          this.p.age++  // 外层对象元素
        })
      Text(`姓名${this.p.gf.name} : ${this.p.gf.age}`)
        .fontSize(40)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          this.p.gf.age++   // 嵌套对象无法及时驱动视图
        })

  • 不是嵌套我们数据更新了，视图就会立马更新，而下面的，我们点击他不会立马更新视图，因为它是嵌套在对象内的对象，所有无法更新视图。

  • 数组里面嵌套对象，也是不能及时更新

     ForEach(
        this.gfs,
        (p: Person, index) => {
          Text(`${p.name} : ${p.age}`)
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
            .onClick(() => {
              p.age++   // 修改数组里面的值，视图不会更新哦！
            })
        }
7.2 状态管理练习
  • 效果图如下；
    在这里插入图片描述
// 任务类
class Task {
  static id: number = 1
  // 任务名称
  name: string = `任务${Task.id++}`
  // 任务状态是否完成
  finished: boolean = false
}

// 统一的卡片样式函数
@Styles function card () {
  .width('95%')
  .padding(20)
  .backgroundColor(Color.White)
  .borderRadius(15)
  .shadow({radius: 6, color: '#1F000000', offsetX: 2, offsetY: 4})
}

// 任务完成样式函数(Text组件特有属性)
@Extend(Text) function finishedTask() {
  .decoration({ type: TextDecorationType.LineThrough})
  .fontColor('#B1B2B1')
}

@Entry
@Component
struct PropPage {
  // 任务总数量
  @State totalTask: number = 0
  // 已完成任务数量
  @State finishTask: number = 0
  // 任务列表
  @State tasks: Task[] = []

  // 局部自定义函数
  handleTaskChange() {
    // 1. 更新总任务
    this.totalTask = this.tasks.length    // 总任务就是数组的长度
    // 2. 更新已完成的任务
    this.finishTask = this.tasks.filter(item => item.finished).length // 通过filter方法过滤 finished状态为true的个数，然后赋值更新！
  }


  build() {
    Column({ space: 10}) {
      // 1. 任务进度
      Row() {
        Text('任务进度：')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)

        // 层叠容器
        Stack(){
          // 进度条组件
          Progress({
            value: this.finishTask,
            total: this.tasks.length, // 最大任务数等于数组长度
            type: ProgressType.Ring
          })
            .width(100)
          // 任务进度对比数
          Row(){
            Text(this.finishTask.toString())
              .fontSize(20)
            Text(" / " + this.totalTask.toString())
              .fontSize(20)
          }
        }


      }
      .width('100%')
      .justifyContent(FlexAlign.SpaceEvenly)
      .margin({top: 20, bottom: 10})

      // 2. 新增任务按钮
      Row(){
        Button('新增任务')
          .width(100)
          .backgroundColor('#36D')
          .onClick(() => {
            // 1. 新增任务条数
            this.tasks.push(new Task())  // 将任务类添加到数组中
            // 2. 更新总任务
            // this.totalTask = this.tasks.length    // 总任务就是数组的长度
            this.handleTaskChange()
          })
      }
      .margin({bottom: 24})

      // 3. 任务状态列表
      List({ space: 10, initialIndex: 0}) {
        // 遍历列表
        ForEach(
          this.tasks,
          (item: Task, index) => {
            ListItem() {
              Row(){
                Text(item.name)
                  .fontSize(20)
                Checkbox()
                  // 是否选中就是取决于开关
                  .select(item.finished)
                  .onChange(change => {

                    // 1. 更新勾选状态值
                    item.finished = change
                    // 3. 更新已完成的任务
                    // this.finishTask = this.tasks.filter(item => item.finished).length // 通过filter方法过滤 finished状态为true的个数，然后赋值更新！

                    this.handleTaskChange()
                  })
              }
              .card()
              .justifyContent(FlexAlign.SpaceBetween)
            }
            // 左滑事件调用按钮模块函数
            .swipeAction({ end: this.DeleteButton(index) })
        })

      }
      .width('100%')
      .alignListItem(ListItemAlign.Center)
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F2F3')
    .padding(10)
  }
  /**
   * DeleteButton 左滑删除按钮局部构建函数
   * @param index
   */
  @Builder DeleteButton (index: number) {
    Button() {
      Image($r('app.media.button_delete'))
        .width(20)
        // SVG图片颜色的设置
        .fillColor(Color.White)
    }
    .width(40)
    .height(40)
    .type(ButtonType.Circle)
    // Button组件按压效果
    .stateEffect(true)
    .backgroundColor(Color.Red)
    .margin(5)
    .onClick(() => {
      // 1、点击删除后，更新任务列表
      this.tasks.splice(index, 1)
      // 2. 调用方法，更新任务进度的总数个完成数量
      this.handleTaskChange()
    })
 }
}

7.2 @Prop 和 @Link

  • 我用一个组件管理多个模块是不是很麻烦，代码冗余，可读性太差了，此时我们HarmonyOS也有组件通信一说，父组件、子组件等等的说法：如下如所示：
    在这里插入图片描述

单项数据和双向数据的原理就和深浅拷贝一样

  • 针对前面的任务进度管理项目，这里使用组件通信进行分模块的改造

第一步：

在这里插入图片描述
创建完毕就开始对代码改造了：
基于@Prop 和 @ Link组件通信技术进行优化代码：”

首先是任务进度模块

@Component
export struct TaskProgress {
  // 注意： 这里是父组件传递过来的数据，父组件数据被@State修饰，子组件就不能再使用@State修饰了
  // 注意2：@Prop在之前版本是不允许初始化的，可是现在最新版是允许的。新版本两者都可以使用兼容
  @Prop finishTask: number
  @Prop totalTask: number


  build() {
    // 1. 任务进度
    Row() {
      Text('任务进度：')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)

      // 层叠容器
      Stack(){
        // 进度条组件
        Progress({
          value: this.finishTask,
          total: this.totalTask,
          type: ProgressType.Ring
        })
          .width(100)
        // 任务进度对比数
        Row(){
          Text(this.finishTask.toString())
            .fontSize(20)
          Text(" / " + this.totalTask.toString())
            .fontSize(20)
        }
      }


    }
    .width('100%')
    .justifyContent(FlexAlign.SpaceEvenly)
    .margin({top: 20, bottom: 10})
  }
}

其次就是任务列表模块

/**
 * 任务列表模块
 */
// 任务类
class Task {
  static id: number = 1
  // 任务名称
  name: string = `任务${Task.id++}`
  // 任务状态是否完成
  finished: boolean = false
}

@Component
export struct TaskList {
  // 任务总数量
  @Link totalTask: number //@Link接受的参数必须是引用（$），并且不能给初始值
  // 已完成任务数量
  @Link finishTask: number
  // 任务列表
  @State tasks: Task[] = []

  // 局部自定义函数
  handleTaskChange() {
    // 1. 更新总任务
    this.totalTask = this.tasks.length    // 总任务就是数组的长度
    // 2. 更新已完成的任务
    this.finishTask = this.tasks.filter(item => item.finished).length // 通过filter方法过滤 finished状态为true的个数，然后赋值更新！
  }
  build() {
    Column() {
      // 2. 新增任务按钮
      Row() {
        Button('新增任务')
          .width(200)
          .backgroundColor('#36D')
          .onClick(() => {
            // 1. 新增任务条数
            this.tasks.push(new Task()) // 将任务类添加到数组中
            // 2. 更新总任务
            // this.totalTask = this.tasks.length    // 总任务就是数组的长度
            this.handleTaskChange()
          })
      }
      .margin({ bottom: 24 })


      // 3. 任务状态列表
      List({ space: 10, initialIndex: 0}) {
        // 遍历列表
        ForEach(
          this.tasks,
          (item: Task, index) => {
            ListItem() {
              Row(){
                Text(item.name)
                  .fontSize(20)
                Checkbox()
                  // 是否选中就是取决于开关
                  .select(item.finished)
                  .onChange(change => {
                    // 1. 更新勾选状态值
                    item.finished = change
                    // 3. 更新已完成的任务
                    // this.finishTask = this.tasks.filter(item => item.finished).length // 通过filter方法过滤 finished状态为true的个数，然后赋值更新！
                    this.handleTaskChange()
                  })
              }
              .card()
              .justifyContent(FlexAlign.SpaceBetween)
            }
            // 左滑事件调用按钮模块函数
            .swipeAction({ end: this.DeleteButton(index) })
          })

      }
      .width('100%')
      .alignListItem(ListItemAlign.Center)
      .layoutWeight(1)
    }

  }



  /**
   * DeleteButton 左滑删除按钮局部构建函数
   * @param index
   */
  @Builder DeleteButton (index: number) {
    Button() {
      Image($r('app.media.button_delete'))
        .width(20)
          // SVG图片颜色的设置
        .fillColor(Color.White)
    }
    .width(40)
    .height(40)
    .type(ButtonType.Circle)
    // Button组件按压效果
    .stateEffect(true)
    .backgroundColor(Color.Red)
    .margin(5)
    .onClick(() => {
      // 1、点击删除后，更新任务列表
      this.tasks.splice(index, 1)
      // 2. 调用方法，更新任务进度的总数个完成数量
      this.handleTaskChange()
    })
  }
}

// 统一的卡片样式函数
@Styles function card () {
  .width('95%')
  .padding(20)
  .backgroundColor(Color.White)
  .borderRadius(15)
  .shadow({radius: 6, color: '#1F000000', offsetX: 2, offsetY: 4})
}

// 任务完成样式函数(Text组件特有属性)
@Extend(Text) function finishedTask() {
  .decoration({ type: TextDecorationType.LineThrough})
  .fontColor('#B1B2B1')
}

最后，我们再页面调用我们自定义的功能模块


import { TaskList } from '../components/TaskList'
import { TaskProgress } from '../components/TaskProgress'

@Entry
@Component
struct PropPage {
  // 任务总数量
  @State totalTask: number = 0
  // 已完成任务数量
  @State finishTask: number = 0

  build() {
    Column({ space: 10 }) {

      // 1、任务进度
      TaskProgress({ totalTask: this.totalTask, finishTask: this.finishTask })

      // 2、任务列表
      TaskList({ totalTask: $totalTask, finishTask: $finishTask })


    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F2F3')
    .padding(10)
  }
}
  • 最后实现的效果是一样的，这样的好处就是便于管理和使用！
  • @Link支持复杂数据类型，而@Prop不行

7.3 @Provide装饰器和@Consume装饰器

  • 多层组件之间数据的双向传递，父组件不许需要指定传参。

@Provide/@Consume装饰的状态变量有以下特性：

1、Provide装饰的状态变量自动对其所有后代组件可用，即该变量被“provide”给他的后代组件。由此可见，2、Provide的方便之处在于，开发者不需要多次在组件之间传递变量。
后代通过使用@Consume去获取@Provide提供的变量，建立在@Provide和@Consume之间的双向数据同步，与@State/@Link不同的是，前者可以在多层级的父子组件之间传递。
3、Provide和@Consume可以通过相同的变量名或者相同的变量别名绑定，变量类型必须相同。

使用场景
在下面的示例是与后代组件双向同步状态@Provide和@Consume场景。当分别点击CompA和CompD组件内Button时，reviewVotes 的更改会双向同步在CompA和CompD中。

@Component
struct CompD {
  // @Consume装饰的变量通过相同的属性名绑定其祖先组件CompA内的@Provide装饰的变量
  @Consume reviewVotes: number;

  build() {
    Column() {
      Text(`reviewVotes(${this.reviewVotes})`)
      Button(`reviewVotes(${this.reviewVotes}), give +1`)
        .onClick(() => this.reviewVotes += 1)
    }
    .width('50%')
  }
}

@Component
struct CompC {
  build() {
    Row({ space: 5 }) {
      CompD()
      CompD()
    }
  }
}

@Component
struct CompB {
  build() {
    CompC()
  }
}

@Entry
@Component
struct CompA {
  // @Provide装饰的变量reviewVotes由入口组件CompA提供其后代组件
  @Provide reviewVotes: number = 0;

  build() {
    Column() {
      Button(`reviewVotes(${this.reviewVotes}), give +1`)
        .onClick(() => this.reviewVotes += 1)
      CompB()
    }
  }
}

7.4 @Observed装饰器和@ObjectLink装饰器：嵌套类对象属性变化

  • 在前面，我们是不是在数据双向绑定的时候，有一个问题，就是我们复杂数据类型数据发生变化的时候，我们的视图不更新，这个问题此时就可以用这个状态管理进行处理，从而解决那个问题。

概述
@ObjectLink和@Observed类装饰器用于在涉及嵌套对象或数组的场景中进行双向数据同步：

被@Observed装饰的类，可以被观察到属性的变化；
子组件中@ObjectLink装饰器装饰的状态变量用于接收@Observed装饰的类的实例，和父组件中对应的状态变量建立双向数据绑定。这个实例可以是数组中的被@Observed装饰的项，或者是class object中的属性，这个属性同样也需要被@Observed装饰。
单独使用@Observed是没有任何作用的，需要搭配@ObjectLink或者@Prop使用。
限制条件
使用@Observed装饰class会改变class原始的原型链，@Observed和其他类装饰器装饰同一个class可能会带来问题。
@ObjectLink装饰器不能在@Entry装饰的自定义组件中使用。

在这里插入图片描述
代码展示如下：

// 任务类
@Observed
class Task {
  static id: number = 1
  // 任务名称
  name: string = `任务${Task.id++}`
  // 任务状态是否完成
  finished: boolean = false
}


// 渲染组件
@Component
struct TaskItem {
  @ObjectLink item: Task
  onTaskChange: () => void = () => {}; // 定义一个函数变量参数，接收父组件传过来的函数

  build() {
    Row() {
      // 是否添加
      if (this.item.finished) {
        Text(this.item.name)
          .fontSize(20)
          .finishedTask()
      } else {
        Text(this.item.name)
          .fontSize(20)
      }

      Checkbox()// 是否选中就是取决于开关
        .select(this.item.finished)
        .onChange(change => {
          // 1. 更新勾选状态值
          this.item.finished = change
          // 3. 更新已完成的任务
          // this.finishTask = this.tasks.filter(item => item.finished).length // 通过filter方法过滤 finished状态为true的个数，然后赋值更新！

          // 添加一个判断，如果传过来参数为空，那么表示函数传递失败，不执行！
          if (this.onTaskChange) {
            this.onTaskChange()
          }
        })
    }
    .card()
    .justifyContent(FlexAlign.SpaceBetween)
  }

              // 调用处理后的渲染类
              TaskItem({ item: item, onTaskChange: () => this.handleTaskChange() })
  • 这里我们想要嵌套的对象或者数组里面的元素为对象的时候，当嵌套内的对象或者数组元素数据修改了，通过观察我们是无法更新视图的，测试就得使用 @Observed装饰器和@ObjectLink装饰器
  • 大白话来说就是，@Observed将类或者数据的引用传递给了呗ObjectLink修饰的属性，此时修改引用，那么无论是外层的还是里层的数据都被修改了，视图自然也就会及时更新！
脱发使我稳重
关注
  • 25
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Toggle开关组件
zdh13370188237的博客
12-26 518
操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1。仅对type为ToggleType.Switch生效。开关是否打开，true：打开，false：关闭。设置Switch类型的圆形滑块颜色。设置组件打开状态的背景颜色。开关状态切换时触发该事件。
【OpenHarmony】 ArkTS 语法基础 ② ( ArkTS 自定义组件 )
06-03
【OpenHarmony】ArkTS 语法基础 ② ( ArkTS 自定义组件 | 自定义可导入组件 - export 声明模块 | 导入自定义组件 - import 导入组件 ) https://hanshuliang.blog.csdn.net/article/details/139407374 博客源码快照 ...
HarmonyOS鸿蒙应用开发——ArkUI组件封装最佳实践
学习，思考，输出
06-04 1560
静态注册属性封装UI组件的特点：使用简单，由于要手动定义属性，导致在可维护性和可扩展性上有很大的局限性，对于简单的UI组件，静态注册可能是可行的封装方式，易用易理解，但是比较复杂的组合式ui组件，尤其是那些对动态设置要求较高的场景时，静态注册就显得不那么适用了，需要定义众多的成员属性，无法根据实际需求灵活地按需注册属性。动态注册属性封装UI组件的特点：是通过组件的AttributeModifier来实现的，相较于静态注册方式，尽管操作更为复杂，但可以弥补静态注册的缺陷。
【鸿蒙】ArkTS语言
最新发布
一个写了10年bug的程序员日常笔记。
06-24 702
HarmonyOS 应⽤的主要开发语⾔是 ArkTS，它由 TypeScript（简称TS）扩展⽽来，在继承 TypeScript语法的基础上进⾏了⼀系列优化，使开发者能够以更简洁、更⾃然的⽅式开发应⽤。值得注意的是，TypeScript 本身也是由另⼀⻔语⾔ JavaScript 扩展⽽来。
【鸿蒙开发】鸿蒙ArkUI自定义组件如何封装一个好用的Toast/Loading/ProgressHUD组件
HarmonyOS_001的博客
06-21 1266
先上成果：xt_hud 是我基于 ArkUI 框架封装的三方组件，适配 API11，具体的 API 符合原生开发使用习惯。●Demo：●具体 API 使用介绍：好用的Toast/Loading/Progress自定义组件XTHUDHUD 这类组件，不同于 Button/Text 等常规的 ArkUI 组件，直接在对应父组件的构造函数 build() 中挂载、布局、交互即可，更多的情况是直接用在逻辑代码中。
arkTs 跨组件传输数据和组件封装
xiaoxiongxia的博客
11-29 653
arkTs 跨组件传输数据和组件封装
鸿蒙Harmony应用开发—ArkTS-ForEach：循环渲染
m0_64420071的博客
03-23 2302
ForEach基于数组类型数据执行循环渲染。
鸿蒙HarmonyOS 开发通过 @BuilderParam装饰器：引用@Builder函数实现自定义标题栏
02-22
在鸿蒙HarmonyOS开发中，自定义标题栏是一个常见的需求，这有助于为应用程序提供独特的用户界面和交互体验。@BuilderParam装饰器和@Builder函数是HarmonyOS SDK中的两个关键工具，它们允许开发者轻松创建和配置...
一款虫部落搜索论坛第三方鸿蒙 App，使用 ArkTS 与 ArkUI 声明式开发，采用最新的 HarmonyOS API 9
02-07
标题中的“一款虫部落搜索论坛第三方鸿蒙 App”揭示了这款应用是专门为虫部落搜索论坛设计的第三方应用程序，而且是基于华为的鸿蒙操作系统（HarmonyOS）开发的。鸿蒙系统是华为自主开发的面向全场景的分布式操作...
基于鸿蒙HarmonyOS，使用ArkTS开发纯净的浏览器（小狐狸浏览器）.zip
02-07
在本项目中，我们将探讨如何基于华为的鸿蒙HarmonyOS操作系统，利用 ArkTS 开发一个纯净的浏览器应用，以“小狐狸浏览器”为例。鸿蒙系统是华为面向物联网时代推出的一款全新分布式操作系统，旨在提供跨平台、跨设备...
HarmonyOS移动应用开发（ArkTS版）课件PPT
11-14
2. **第02章 第1个HarmonyOS应用**：引导开发者编写第一个 HarmonyOS 应用，通过实践来熟悉 ArkTS 语言和开发环境的设置，掌握基本的程序结构。 3. **第05章 组件**：详细讲解 HarmonyOS 中的组件系统，包括各种 UI...
基于ArkUI现有能力实现自定义弹窗封装方案
hongxiaomeng的博客
05-09 421
2024年HarmonyOS鸿蒙最全软考高级之信息系统案例分析七重奏-《3》(1)，腾讯面试gm
2401_84853495的博客
05-08 300
5、配置审计；6、发布管理和交付。
鸿蒙ArkUI实例：【自定义组件】
2301_76813281的博客
04-07 1552
自定义一个组件，首先要定义好名称，尽量做到见名知意，比如定义一个标题栏组件，笔者把它命名为TitleBar，为了让系统知道这是一个组件，需要使用@Component修饰符和structbuild() {// 省略build() {// 省略struct：表示TitleBar是一个结构体，使用struct关键字必须实现build()。@Component：表示TitleBar这个结构体具有组件化的能力，也就是说它可以成为一个独立的组件。@Entry。
【鸿蒙开发保姆级教程】-HarmonyOS NEXT请求库封装
HarmonyOS_001的博客
06-14 1249
通过上面的几个例子，我们大概学习了在新的版本怎么自定义一个自己的请求库。新的请求库基本满足我们的日常使用，同时也兼顾了一些我们的扩展需求。如果有更多的需要，我们也可以在这个基础上再增加额外的函数来满足我们的需要。有很多小伙伴不知道该从哪里开始学习鸿蒙开发技术？也不知道鸿蒙开发的知识点重点掌握的又有哪些？自学时频繁踩坑，导致浪费大量时间。结果还是一知半解。所以有一份实用的鸿蒙（HarmonyOS NEXT）全栈开发资料用来跟着学习是非常有必要的。
HarmonyOS Next 使用NAPI封装ArkTS接口案例
shudaoshanQAQ的博客
03-19 1248
部分应用的主要开发语言为C/C++，但是HarmonyOS的部分接口仅以ArkTS的形式暴露，因此需要将ArkTS的接口封装为Native接口。
【HarmonyOS】ArkUI - 循环控制（ForEach）
Creativity + Efficiency = Success
02-13 1533
ArkUI ForEach
harmonyOS杂谈 - @Builder装饰器：自定义构建函数
weixin_42861217的博客
12-22 938
全局的自定义构建函数可以被整个应用获取，不允许使用this和bind方法。如果不涉及组件状态变化，建议使用全局的自定义构建方法。
鸿蒙Harmony（七）ArkUI--循环foreach&List组件&自定义组件
danfengw的博客
12-27 1299
创建自定义组件 @Component@Builder@Style：仅可封装组件通用属性@Extend：仅可定义在全局，可以设置组件的特有属性@Componentbuild() {} }代码示例@Componentprivate name: string = "苹果"build() {Row() {.width(80).borderRadius(40) //圆角。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

脱发使我稳重

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值