HarmanyOS-ArkUI-状态管理-@Prop@Link@Provide@Consume

原创已于 2024-01-09 11:12:56 修改 · 529 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #分布式

于 2023-12-31 18:18:44 首次发布

本文详细介绍了使用Vue构建一个包含任务列表、进度追踪和状态控制的组件，展示了Class模式、@State、@Link和@Provide/Consume的用法。

使用说明

代码

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})
}

//任务完成样式
@Extend(Text) function finishedTask(){
  .decoration({type:TextDecorationType.LineThrough})
  .fontColor('#B1B2B1')
}

@Entry
@Component
struct ProPage {
  //总任务数量
  @State totalTask:number = 0
  //已完成任务数量
  @State finishTask:number = 0
  build() {
    Column({space:10}){
      //任务进度
      TaskStatistics({finishTask:this.finishTask,totalTask:this.totalTask})
      //新增任务
      TaskList({finishTask:$finishTask,totalTask:$totalTask})
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F2F3')
  }
}

@Component
struct TaskStatistics{
  //总任务数量
  @Prop totalTask:number
  //已完成任务数量
  @Prop finishTask:number
  build(){
    //任务进度
    Row(){
      Text('任务进度：').fontSize(30).fontWeight(FontWeight.Bold)
      Stack(){//堆叠容器
        Progress({//进度样式
          value:this.finishTask,
          total:this.totalTask,
          type:ProgressType.Ring
        })
        Row(){
          Text(this.finishTask.toString()).fontSize(24).fontColor('#36D')
          Text(' / '+this.totalTask.toString()).fontSize(24)
        }
      }
    }
    .card()
    .margin({top:20,bottom:10})
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}

@Component
struct TaskList {
  //总任务数量
  @Link totalTask:number
  //已完成任务数量
  @Link finishTask:number
  //任务数组
  @State tasks: Task[] = []
  handleTaskChange(){
    //更新任务数量
    this.totalTask = this.tasks.length
    //更新已完成任务数量
    this.finishTask = this.tasks.filter(item => item.finished).length
    //完成的任务变灰色
  }
  build() {
    Column(){
      //任务按钮
      Button('新增任务')
        .width(200)
        .onClick(()=>{
          //新增任务数据
          this.tasks.push(new Task())
          this.handleTaskChange()
        })
      //任务列表
      List({space:10}){
        ForEach(
          this.tasks,
          (item:Task,index)=>{
            ListItem(){
              Row(){
                Text(item.name).fontSize(20)
                Checkbox()
                  .select(item.finished)
                  .onChange( val =>{
                    //更新当前任务状态
                    item.finished = val
                    this.handleTaskChange()
                  })
              }
              .card()
              .justifyContent(FlexAlign.SpaceBetween)
            }
            .swipeAction({end:this.DeleteButton(index)})
          }
        )
      }
      .width('100%')
      .alignListItem(ListItemAlign.Center)
      .layoutWeight(1)
    }
  }
  @Builder DeleteButton(index:number){
    Button(){
      Image($r('app.media.delete'))
        .fillColor(Color.White)
        .width(20)
    }
    .width(40)
    .height(40)
    .type(ButtonType.Circle)
    .backgroundColor(Color.Red)
    .margin({left:5})
    .onClick(()=>{
      this.tasks.splice(index,1)
      this.handleTaskChange()
    })
  }
}

代码框架1

@Entry
@Component
struct ProPage {
  //总任务数量
  @State totalTask:number = 0
  //已完成任务数量
  @State finishTask:number = 0
  build() {
    Column({space:10}){
      //任务进度
      TaskStatistics({finishTask:this.finishTask,totalTask:this.totalTask})
      //新增任务
      TaskList({finishTask:$finishTask,totalTask:$totalTask})
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F2F3')
  }
}

@Component
struct TaskStatistics{
  //总任务数量
  @Prop totalTask:number
  //已完成任务数量
  @Prop finishTask:number
  build(){
    //任务进度
    Row(){.......}
    .card()
    .margin({top:20,bottom:10})
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}


@Component
struct TaskList {
  //总任务数量
  @Link totalTask:number
  //已完成任务数量
  @Link finishTask:number
  //任务数组
  @State tasks: Task[] = []
  build() {
    Column(){......}
}

代码框架2-@State@Link@Prop

class模式

class StatInfo{
  totalTask:number = 0
  //已完成任务数量
  finishTask:number = 0
}
@Entry
@Component
struct ProPage {
  //总任务数量
  @State stat: StatInfo = new StatInfo()
  build() {
    Column({space:10}){
      //任务进度
      TaskStatistics({finishTask:this.stat.finishTask,totalTask:this.stat.totalTask})
      //新增任务
      TaskList({stat: $stat})
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F2F3')
  }
}

@Component
struct TaskStatistics{
  //总任务数量
  @Prop totalTask:number
  //已完成任务数量
  @Prop finishTask:number
  build(){
    //任务进度
    Row(){.....}
    }
    .card()
    .margin({top:20,bottom:10})
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}

@Component
struct TaskList {
  //总任务数量
  @Link stat: StatInfo
  //任务数组
  @State tasks: Task[] = []
  build() {
    Column(){......}
  }
}

代码框架3-@Provide@Consume

适合跨组件时使用

浪费cpu算力，能用@State@Link就尽量不用@Provide@Consume

//任务统计信息
class StatInfo{
  totalTask:number = 0
  //已完成任务数量
  finishTask:number = 0
}

@Entry
@Component
struct ProPage {
  //总任务数量
  @Provide stat: StatInfo = new StatInfo()
  build() {

  }
}

@Component
struct TaskStatistics{
  //总任务数量
  @Consume stat: StatInfo
  build(){
   
  }
}

@Component
struct TaskList {
  //总任务数量
  @Consume stat: StatInfo
  //任务数组
  @State tasks: Task[] = []
  build() {

  }
}