HarmonyOS/鸿蒙.learn/4.0+NEXT-尚硅谷/组件状态管理及之前内容补充.md

常用组件

切换按钮

ToggleType.Switch    开关
ToggleType.Checkbox  复选框
ToggleType.Button    按钮

文本输入

TextInput

进度条

Progress

弹窗

import promptAction form '@ohos.promptAction'

showToast()

警告对话框

AlertDialog

操作列表弹窗

ActionSheet

选择器弹窗

TextPickerDialog文本选择器
DatePickerDialog日期选择器
TimePickerDialog时间选择器

自定义弹窗

样式复用

状态管理

@State

@Entry
@Component
struct Index{
  @State count: number = 1;
  build() {
    Column({space: 50}){
      Row({space: 10}){
        Text('@State')
        Counter(){
          Text(this.count.toString())
        }
        .onInc(() => this.count++)
        .onDec(() => this.count--)
      }
      .width('100%')
      .backgroundColor('#CCE3CB')
      .padding(10)
      .borderRadius(20)
      .justifyContent(FlexAlign.Center)
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.White)
    .padding(10)
  }
}

@Prop

父组件的变化可以同步到子组件，反之不可

Prop装饰的变量不允许本地初始化，只能通过父组件向子组件传参进行初始化

@Entry
@Component
struct Parent {
  @State count: number = 1;

  build() {
    Column() {
      Column({ space: 10 }) {
        //父组件标题
        Text('父组件').textStyle()

        //父组件计数器
        Row({ space: 10 }) {
          Text('@State').textStyle()
          Counter() {
            Text(this.count.toString()).textStyle()
          }
          .onInc(() => this.count++)
          .onDec(() => this.count--)
        }

        //子组件
        Child({ count: this.count })
      }
      .containerStyle('#EFEFEF')
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor(Color.White)
    .padding(10)
  }
}


@Component
struct Child {
  @Prop count: number ;

  build() {
    Column({ space: 10 }) {
      //子组件标题
      Text('子组件').textStyle()

      //子组件计数器
      Row({ space: 10 }) {
        Text('@Prop').textStyle()
        Counter() {
          Text(this.count.toString()).textStyle()
        }
        .onInc(() => this.count++)
        .onDec(() => this.count--)
      }
    }
    .containerStyle("#CCE3CB")
  }
}


@Extend(Text) function textStyle() {
  .fontSize(25)
  .fontWeight(FontWeight.Bold)
}

@Extend(Column) function containerStyle(color: ResourceColor) {
  .width('100%')
  .backgroundColor(color)
  .padding(10)
  .borderRadius(20)
}

父变子同步，子变父不变

@Link

父子双向同步

变量不允许本地初始化，只能通过父组件向子组件传参进行初始化

@Entry
@Component
struct Parent {
  @State count: number = 1;

  build() {
    Column() {
      Column({ space: 10 }) {
        //父组件标题
        Text('父组件').textStyle()
        //父组件计数器
        Row({ space: 10 }) {
          Text('@State').textStyle()
          Counter() {
            Text(this.count.toString()).textStyle()
          }
          .onInc(() => this.count++)
          .onDec(() => this.count--)
        }

        //子组件
        Child({ count: $count })
      }
      .containerStyle(Color.White)
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor('#EFEFEF')
    .padding(10)
  }
}

@Component
struct Child {
  @Link count: number;

  build() {
    Column({ space: 10 }) {
      //子组件标题
      Text('子组件').textStyle()
      //子组件计数器
      Row({ space: 10 }) {
        Text('@Link').textStyle()
        Counter() {
          Text(this.count.toString()).textStyle()
        }
        .onInc(() => this.count++)
        .onDec(() => this.count--)
      }
    }
    .containerStyle('#CCE3CB')
  }
}

@Extend(Text) function textStyle() {
  .fontSize(25)
  .fontWeight(FontWeight.Bold)
}

@Extend(Column) function containerStyle(color: ResourceColor) {
  .width('100%')
  .backgroundColor(color)
  .padding(10)
  .borderRadius(20)
}

@Provide & @Consume

用于跨组件层级传递状态信息

@Provide 装饰祖先，必须进行本地初始化

@Consume 装饰后代，不允许本地初始化，通过相同变量名绑定

双向同步

@Entry
@Component
struct GrandParent {
  @Provide count: number = 1;

  build() {
    Column() {
      Column({ space: 10 }) {
        //祖先组件标题
        Text('祖先组件').textStyle()
        //祖先组件计数器
        Row({ space: 10 }) {
          Text('@Provide').textStyle()
          Counter() {
            Text(this.count.toString()).textStyle()
          }
          .onInc(() => this.count++)
          .onDec(() => this.count--)
        }

        //父组件
        Parent()
      }
      .containerStyle(Color.White)
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor('#EFEFEF')
    .padding(10)
  }
}


@Component
struct Parent {
  build() {
    Column({ space: 10 }) {
      //父组件标题
      Text('父组件').textStyle()
      //子组件
      Child()
    }
    .containerStyle('#CCE3CB')
  }
}


@Component
export struct Child {
  @Consume count: number;

  build() {
    Column({ space: 10 }) {
      //子组件标题
      Text('子组件').textStyle()
      //子组件计数器
      Row({ space: 10 }) {
        Text('@Consume').textStyle()
        Counter() {
          Text(this.count.toString()).textStyle()
        }
        .onInc(() => this.count++)
        .onDec(() => this.count--)
      }
    }
    .containerStyle('#f6c867')
  }
}


@Extend(Text) function textStyle() {
  .fontSize(25)
  .fontWeight(FontWeight.Bold)
}

@Extend(Column) function containerStyle(color: ResourceColor) {
  .width('100%')
  .backgroundColor(color)
  .padding(10)
  .borderRadius(20)
}