HarmonyOs ----任务统计案例

最新推荐文章于 2024-09-28 19:02:04 发布

m0_73966155

最新推荐文章于 2024-09-28 19:02:04 发布

阅读量738

点赞数 16

文章标签：前端 javascript 开发语言 harmonyos

本文链接：https://blog.csdn.net/m0_73966155/article/details/137927901

版权

顶部样式设计

由图中可看出是，水平布局，整体为垂直布局

@Entry
@Component
struct Task_1 {
  build() {
    Column(){
      Row(){
      }
        }
  }
}

2.填写内容

因为整体布局样式相同，用@styles 设置整体布局通用样式
因为数值会变化：用@State定义
外面圆圈也会变化，所以用Progress
第一个数值为：选中数值：finish
第二个数值为：总共数值：totall

//设置整体样式
@Styles function card_1(){
  .width('95%')
  .padding(20)
  .backgroundColor(Color.White)
  .borderRadius(15)
  .shadow({radius:6,color:'#1F000000',offsetX:2,offsetY:4})
}
@Entry
@Component
struct Task_1 {
  @State finish:number=0
  @State totall:number=0
  build() {
    Column(){
      Row(){
          Text('任务进度：')
            .fontSize(30)
            .fontWeight(FontWeight.Bold)
        Stack(){
          Progress({value:this.finish,total:this.totall,type:ProgressType.Ring})
            .width(100)
          Row(){
            Text(this.finish+'')
              .fontSize(30)
              .fontColor('#36D')
            Text(' / '+this.totall)
              .fontSize(30)
          }
        }
      }

//引用自定义样式card_1
      .card_1()
      .justifyContent(FlexAlign.SpaceAround)

    }

  }
}

设置按钮

设置按钮样式

@Entry
@Component
struct Task_1 {
  @State finish:number=0
  @State totall:number=0
  build() {
    Column(){

Row（）{//顶部样式}

//设置按钮样式
      Button('新增任务')
        .width(140)
        .margin({top:10})
    }
  }
}

2.添加数组

task类中的id是静态变量，可以被task类中的所有对象共享

//创建task类
class task{
  static id :number=1
  name:string=`任务${task.id++}`
  Boole:boolean=false
}
@Entry
@Component
struct Task_1 {
  @State finish:number=0
  @State totall:number=0
  // 数组类型
  @State task:task[]=[]
  build() {
    Column(){
    Row（）{//顶部样式}

   Button('新增任务')
        .width(140)
        .margin({top:10})
    }
  }
}

3.添加事件：点击按钮，随之数组增加（顶部totall变化）

push是增加一条新数组
this.task_1.push(new task_1())：只写 task_1()：上面已经定义，就不用在写
数组总值增加，totall数值随之变化

//创建task类
class task_1{
  static id :number=1
  name:string=`任务${task_1.id++}`
  Boole:boolean =false
}
@Entry
@Component
struct Task_1 {
  @State finish:number=0
  @State totall:number=0
  // 数组类型
  @State task_1:task_1[]=[]
  build() {
    Column(){
    Row（）{//顶部样式}

      Button('新增任务')
        .width(200)
        .margin({top:10})
        .onClick(()=>{
          this.task_1.push(new task_1())

//totall数值是数组长度
          this.totall=this.task_1.length
        })
    }
  }
}

添加内容

用ForEach循环数组：

@Entry
@Component
struct Task_1 {
  @State finish:number=0
  @State totall:number=0
  // 数组类型
  @State task_1:task_1[]=[]
  build() {
    Column(){
    Row（）{//顶部样式}

Button（）//设置按钮样式     

      ForEach(this.task_1,(item:task_1,index)=>{
        Row(){
          Text(item.name)
            .fontSize(20)
        }
      })
    }
  }
}

2.添加多选框

select(item.Boole)：select是布尔值，Boole：上面在函数中被设布尔值

@Entry
@Component
struct Task_1 {
  @State finish:number=0
  @State totall:number=0
  // 数组类型
  @State task_1:task_1[]=[]
  build() {
    Column(){
    Row（）{//顶部样式}

Button（）//设置按钮样式     

      ForEach(this.task_1,(item:task_1,index)=>{
        Row(){
          Text(item.name)
            .fontSize(20)

Checkbox()
   .select(item.Boole)
        }
      })
    }
  }
}

设置样式

@Entry
@Component
struct Task_1 {
  @State finish:number=0
  @State totall:number=0
  // 数组类型
  @State task_1:task_1[]=[]
  build() {
    Column(){
    Row（）{//顶部样式}

Button（）//设置按钮样式     

      ForEach(this.task_1,(item:task_1,index)=>{
        Row(){
          Text(item.name)
            .fontSize(20)

Checkbox()
   .select(item.Boole)
        }

.card_1()

.justifyContent(FlexAlign.SpaceBetween)


      })
    }
  }
}

4.添加监听事件：监听task_1变化

onChange：如Checkbox类型变化，finish增加

@Entry
@Component
struct Task_1 {
  @State finish:number=0
  @State totall:number=0
  // 数组类型
  @State task_1:task_1[]=[]
  build() {
    Column(){
    Row（）{//顶部样式}

Button（）//设置按钮样式     

      ForEach(this.task_1,(item:task_1,index)=>{
        Row(){
          Text(item.name)
            .fontSize(20)

Checkbox()
   .select(item.Boole)

.onChange(()=>{
  this.finish=this.task_1.filter(item=>item.Boole).length
})


        }

.card_1()

.justifyContent(FlexAlign.SpaceBetween)


      })
    }
  }
}

设置列表

在list，ListItem内添加数组

@Entry
@Component

struct Task_1 {
build() {
    Column(){
    Row（）{//顶部样式}

Button（）//设置按钮样式     

List(){
  ForEach(this.task_1,(item:task_1,index)=>{

  ListItem() {
    Row() {
      Text(item.name)
        .fontSize(20)
      Checkbox()
        .select(item.Boole)
    }
    .card_1()
    .justifyContent(FlexAlign.SpaceBetween)
  }
  })
}

}

}

}

设置样式

@Entry
@Component

struct Task_1 {
build() {
    Column(){
    Row（）{//顶部样式}

Button（）//设置按钮样式     

List({space:10}){
  ForEach(this.task_1,(item:task_1,index)=>{

  ListItem() {
    Row() {
      Text(item.name)
        .fontSize(20)
      Checkbox()
        .select(item.Boole)
    }
    .card_1()
    .justifyContent(FlexAlign.SpaceBetween)
  }
  })
}
.layoutWeight(1)
.alignListItem(ListItemAlign.Center)

}

}

}

设置左滑动，并删除该组数据

.swipeAction({end: this.DeleteButton(index) })：end后添加函数

用@Builder 创建函数
this.tasks.splice(index,1)：splice删除index索引的一个数组
在同步一下totall，finish数据

@Entry
@Component

struct Task_1 {
build() {
    Column(){
    Row（）{//顶部样式}

Button（）//设置按钮样式     

List({space:10}){
  ForEach(this.task_1,(item:task_1,index)=>{

  ListItem() {
    Row() {
      Text(item.name)
        .fontSize(20)
      Checkbox()
        .select(item.Boole)
    }
    .card_1()
    .justifyContent(FlexAlign.SpaceBetween)
  }
  })
}
.layoutWeight(1)
.alignListItem(ListItemAlign.Center)

}

}

@Builder DeleteButton(index:number){
  Button({type:ButtonType.Circle}){

//矢量图
    Image('/Task/task_delete.svg')

//改变矢量图颜色
      .fillColor(Color.White)
      .width(50)

  }
  .width(80)
  .margin(5)
  .width(80)
  .backgroundColor(Color.Red)
  .onClick(()=>{
    this.tasks.splice(index,1)
    this.finishTask=this.tasks.filter(item=>item.finished).length
    this.totallTask = this.tasks.length
  })



}

有什么不足尽情提，我下次改进！！！