点击事件

如果我们想点击某个组件的同事 给他一个点击事件 我们只需要给他添加一个onclick的点击事件就可以了

同时 我们一般会申明一个全局的状态管理 以便随时可以更新这个和获取这个值 我们可以通过关键字 @State 来修饰 在使用的地方用 this.属性 来调用就可以达到效果了 

@Entry
@Component
struct Count {
  @State name: string = '你好啊'

  build() {
    Column() {
      Text(this.name)
        .onClick(() => {
          this.name += '增加我啊'
          AlertDialog.show({
            message: this.name
          })
        })
    }
  }
}

数据的单项绑定和双向绑定

如果子组件需要跟父组件同步属性状态 那么子组件里面需要用到 @Prop 进行修饰即可

但是@Prop 是单项传递是 只能是父组件往子组件传递 但是@Link是双向绑定 可以相互传递信息

跨组件同步数据

// 父组件
@Provide themeColor: string = ''
// 子组件
@Consume themeColor1: string

状态管理

状态管理里面有一个比较重要的是条件状态管理 if 条件语句，简单的说 就是通过不同条件下 动态的调整组件的各种属性状态 看一段代码

// 先定义个全局的状态属性
@State isShowText: boolean = false
// 定义个单独的区域 然后添加一个文本和一个按钮
Column() {
  if (this.isShowText) {
    Text('需要显示，所以我在了')
      .textMediumExtend(Color.Orange, 35) // 为组件的扩展属性 后面会讲到
  } else {
    Text('需要隐藏，所以我在了')
      .textMediumExtend(Color.Orange, 35)
  }
  Button('点击我 操作文字隐藏与显示').onClick((event: ClickEvent) => {
    this.isShowText = !this.isShowText
  })
}
.width('100%')
.height(300)
.margin({ top: 30})
.backgroundColor(Color.Gray)

数据嵌套更新

上面所提到的更新数据的方案 默认最多只能更新第一层级的数据 对于多级数据 深层的数据更新则无法进行同步更新 这个属性就是为了这个问题

组件扩展

// 组件扩展
@Extend(Text)
function textMediumExtend(color: Color, fontSize: number) {
  .backgroundColor(color)
  .fontSize(fontSize)
  .width('100%')
  .height(60)
  .margin({top: 16})
}

运行代码 就可以看到下面的界面效果了

另外说一下switch的条件判断

switch (this.count) {
  case 1: // 条件1

  case 2: // 条件2

  default: // 默认情况
}