HarmonyOs ----使命统计案例

• 顶部样式计划
  
• 
  
  

• 由图中可看出是，程度布局，整体为垂直布局
  

1. @Entry
2. @Component
3. struct Task_1 {
4.   build() {
5.     Column(){
6.       Row(){
7.       }
8.         }
9.   }
10. }

复制代码

2.填写内容

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

1. //设置整体样式
2. @Styles function card_1(){
3.   .width('95%')
4.   .padding(20)
5.   .backgroundColor(Color.White)
6.   .borderRadius(15)
7.   .shadow({radius:6,color:'#1F000000',offsetX:2,offsetY:4})
8. }
9. @Entry
10. @Component
11. struct Task_1 {
12.   @State finish:number=0
13.   @State totall:number=0
14.   build() {
15.     Column(){
16.       Row(){
17.           Text('任务进度：')
18.             .fontSize(30)
19.             .fontWeight(FontWeight.Bold)
20.         Stack(){
21.           Progress({value:this.finish,total:this.totall,type:ProgressType.Ring})
22.             .width(100)
23.           Row(){
24.             Text(this.finish+'')
25.               .fontSize(30)
26.               .fontColor('#36D')
27.             Text(' / '+this.totall)
28.               .fontSize(30)
29.           }
30.         }
31.       }
33. //引用自定义样式card_1
34.       .card_1()
35.       .justifyContent(FlexAlign.SpaceAround)
37.     }
39.   }
40. }

复制代码

• 设置按钮
  

• 设置按钮样式
  

1. @Entry
2. @Component
3. struct Task_1 {
4.   @State finish:number=0
5.   @State totall:number=0
6.   build() {
7.     Column(){
9. Row（）{//顶部样式}
11. //设置按钮样式
12.       Button('新增任务')
13.         .width(140)
14.         .margin({top:10})
15.     }
16.   }
17. }

复制代码

2.添加数组

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

1. //创建task类
2. class task{
3.   static id :number=1
4.   name:string=`任务${task.id++}`
5.   Boole:boolean=false
6. }
7. @Entry
8. @Component
9. struct Task_1 {
10.   @State finish:number=0
11.   @State totall:number=0
12.   // 数组类型
13.   @State task:task[]=[]
14.   build() {
15.     Column(){
16.     Row（）{//顶部样式}
18.    Button('新增任务')
19.         .width(140)
20.         .margin({top:10})
21.     }
22.   }
23. }

复制代码

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

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

1. //创建task类
2. class task_1{
3.   static id :number=1
4.   name:string=`任务${task_1.id++}`
5.   Boole:boolean =false
6. }
7. @Entry
8. @Component
9. struct Task_1 {
10.   @State finish:number=0
11.   @State totall:number=0
12.   // 数组类型
13.   @State task_1:task_1[]=[]
14.   build() {
15.     Column(){
16.     Row（）{//顶部样式}
18.       Button('新增任务')
19.         .width(200)
20.         .margin({top:10})
21.         .onClick(()=>{
22.           this.task_1.push(new task_1())
24. //totall数值是数组长度
25.           this.totall=this.task_1.length
26.         })
27.     }
28.   }
29. }

复制代码

• 添加内容
  

• 用ForEach循环数组：
  

1. @Entry
2. @Component
3. struct Task_1 {
4.   @State finish:number=0
5.   @State totall:number=0
6.   // 数组类型
7.   @State task_1:task_1[]=[]
8.   build() {
9.     Column(){
10.     Row（）{//顶部样式}
12. Button（）//设置按钮样式     
14.       ForEach(this.task_1,(item:task_1,index)=>{
15.         Row(){
16.           Text(item.name)
17.             .fontSize(20)
18.         }
19.       })
20.     }
21.   }
22. }

复制代码

2.添加多选框

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

1. @Entry
2. @Component
3. struct Task_1 {
4.   @State finish:number=0
5.   @State totall:number=0
6.   // 数组类型
7.   @State task_1:task_1[]=[]
8.   build() {
9.     Column(){
10.     Row（）{//顶部样式}
12. Button（）//设置按钮样式     
14.       ForEach(this.task_1,(item:task_1,index)=>{
15.         Row(){
16.           Text(item.name)
17.             .fontSize(20)
19. Checkbox()
20.    .select(item.Boole)
21.         }
22.       })
23.     }
24.   }
25. }

复制代码

• 设置样式
  

1. @Entry
2. @Component
3. struct Task_1 {
4.   @State finish:number=0
5.   @State totall:number=0
6.   // 数组类型
7.   @State task_1:task_1[]=[]
8.   build() {
9.     Column(){
10.     Row（）{//顶部样式}
12. Button（）//设置按钮样式     
14.       ForEach(this.task_1,(item:task_1,index)=>{
15.         Row(){
16.           Text(item.name)
17.             .fontSize(20)
19. Checkbox()
20.    .select(item.Boole)
21.         }
23. .card_1()
25. .justifyContent(FlexAlign.SpaceBetween)
28.       })
29.     }
30.   }
31. }

复制代码

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

• onChange：如Checkbox类型变化，finish增长
  

1. @Entry
2. @Component
3. struct Task_1 {
4.   @State finish:number=0
5.   @State totall:number=0
6.   // 数组类型
7.   @State task_1:task_1[]=[]
8.   build() {
9.     Column(){
10.     Row（）{//顶部样式}
12. Button（）//设置按钮样式     
14.       ForEach(this.task_1,(item:task_1,index)=>{
15.         Row(){
16.           Text(item.name)
17.             .fontSize(20)
19. Checkbox()
20.    .select(item.Boole)
22. .onChange(()=>{
23.   this.finish=this.task_1.filter(item=>item.Boole).length
24. })
27.         }
29. .card_1()
31. .justifyContent(FlexAlign.SpaceBetween)
34.       })
35.     }
36.   }
37. }

复制代码

• 设置列表
  

• 在list，ListItem内添加数组
  

1. @Entry
2. @Component
4. struct Task_1 {
5. build() {
6.     Column(){
7.     Row（）{//顶部样式}
9. Button（）//设置按钮样式     
11. List(){
12.   ForEach(this.task_1,(item:task_1,index)=>{
14.   ListItem() {
15.     Row() {
16.       Text(item.name)
17.         .fontSize(20)
18.       Checkbox()
19.         .select(item.Boole)
20.     }
21.     .card_1()
22.     .justifyContent(FlexAlign.SpaceBetween)
23.   }
24.   })
25. }
27. }
29. }
31. }

复制代码

• 设置样式
  

1. @Entry
2. @Component
4. struct Task_1 {
5. build() {
6.     Column(){
7.     Row（）{//顶部样式}
9. Button（）//设置按钮样式     
11. List({space:10}){
12.   ForEach(this.task_1,(item:task_1,index)=>{
14.   ListItem() {
15.     Row() {
16.       Text(item.name)
17.         .fontSize(20)
18.       Checkbox()
19.         .select(item.Boole)
20.     }
21.     .card_1()
22.     .justifyContent(FlexAlign.SpaceBetween)
23.   }
24.   })
25. }
26. .layoutWeight(1)
27. .alignListItem(ListItemAlign.Center)
29. }
31. }
33. }

复制代码

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

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

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

1. @Entry
2. @Component
4. struct Task_1 {
5. build() {
6.     Column(){
7.     Row（）{//顶部样式}
9. Button（）//设置按钮样式     
11. List({space:10}){
12.   ForEach(this.task_1,(item:task_1,index)=>{
14.   ListItem() {
15.     Row() {
16.       Text(item.name)
17.         .fontSize(20)
18.       Checkbox()
19.         .select(item.Boole)
20.     }
21.     .card_1()
22.     .justifyContent(FlexAlign.SpaceBetween)
23.   }
24.   })
25. }
26. .layoutWeight(1)
27. .alignListItem(ListItemAlign.Center)
29. }
31. }
33. @Builder DeleteButton(index:number){
34.   Button({type:ButtonType.Circle}){
36. //矢量图
37.     Image('/Task/task_delete.svg')
39. //改变矢量图颜色
40.       .fillColor(Color.White)
41.       .width(50)
43.   }
44.   .width(80)
45.   .margin(5)
46.   .width(80)
47.   .backgroundColor(Color.Red)
48.   .onClick(()=>{
49.     this.tasks.splice(index,1)
50.     this.finishTask=this.tasks.filter(item=>item.finished).length
51.     this.totallTask = this.tasks.length
52.   })
56. }

复制代码

有什么不足恣意提，我下次改进！！！


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。