切换

Toggle

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
  1import { TaskModel, TaskStatusType } from '../viewmodel/TaskModel';
  2import { router } from '@kit.ArkUI'
  3import { ParamsType } from '../viewmodel/ParamsModel';
  4
  5@Entry
  6@Component
  7struct Page02_TaskDetail2 {
  8  @State message: string = 'Hello World';
  9  // 采用联合类型
 10  @State taskDetail: TaskModel | null = null
 11  @State index: number = 0
 12  @StorageLink('tasks') tasks: TaskModel[] = []
 13
 14  // 挂载完成后获取数据
 15  aboutToAppear(): void {
 16    const params = router.getParams()
 17    console.log(JSON.stringify(params))
 18    // 断言告诉编辑器, 明确知道params对象数据类型
 19    const detail = (params as ParamsType<TaskModel>).value
 20    this.taskDetail = detail
 21
 22    // 知道传递对象在数组的位置
 23    this.index = this.tasks.findIndex((item: TaskModel) => item.id == this.taskDetail?.id)
 24  }
 25
 26  @Styles
 27  taskBoxStyle(){
 28    .width('49%')
 29    .height(80)
 30    .linearGradient({
 31      angle: 204, // 垂直方向0, 顺时针度数, 默认180绿色在上
 32      colors: [
 33        ['#fe9d9d', 0.0], // 第1个颜色, 第2个颜色范围, 0.3纯红
 34        ['e77d7d', 1.0]
 35      ]
 36    })
 37    .borderRadius(10)
 38    .padding(10)
 39  }
 40
 41  build() {
 42    Column() {
 43      // 返回按钮
 44      Row() {
 45        Text('返回')
 46          .width(50)
 47          .height(40)
 48          .borderRadius(10)
 49          .textAlign(TextAlign.Center)
 50          .onClick(() => {
 51            router.back()
 52          })
 53
 54        Text('任务详情')
 55          .fontSize(20)
 56          .fontWeight(FontWeight.Bold)
 57      }
 58      .width('100%')
 59      .justifyContent(FlexAlign.SpaceBetween)
 60
 61      // 任务标题
 62      Column({
 63        space: 10
 64      }) {
 65        Text(`${this.taskDetail?.taskTitle}`)
 66          .fontSize(20)
 67          .fontWeight(FontWeight.Bold)
 68          .fontColor($r('app.color.title_color'))
 69      }
 70
 71      // 任务时间表
 72      Row() {
 73        Column() {
 74          Text('开始时间')
 75            .fontSize(20)
 76            .fontColor("rgba(255,255,255,0.5)")
 77            .fontWeight(FontWeight.Bold)
 78          Text(`${this.taskDetail?.taskBeginTime}`)
 79            .fontSize(18)
 80            .fontColor(Color.White)
 81            .fontWeight(FontWeight.Bold)
 82        }.taskBoxStyle()
 83
 84        Column() {
 85          Text('结束时间')
 86            .fontSize(20)
 87            .fontColor("rgba(255,255,255,0.5)")
 88            .fontWeight(FontWeight.Bold)
 89          Text(`${this.taskDetail?.taskEndTime}`)
 90            .fontSize(18)
 91            .fontColor(Color.White)
 92            .fontWeight(FontWeight.Bold)
 93        }.taskBoxStyle()
 94      }
 95      .width('100%')
 96      .justifyContent(FlexAlign.SpaceBetween)
 97
 98      // 任务状态切换
 99      Column({
100        space: 20
101      }) {
102        Text('任务状态')
103          .fontSize(20)
104          .fontColor($r('app.color.add_title_color'))
105
106        Row() {
107          Toggle({
108            type: ToggleType.Switch,
109            isOn: this.taskDetail?.taskStatus == TaskStatusType.DONE ? false : true
110          })
111            .selectedColor('#e77d7d')
112            .onChange((value) => {
113              // this.taskDetail = this.taskDetail as TaskModel
114              console.log(`${value}`);
115              this.taskDetail = (this.taskDetail as TaskModel)
116              // (this.taskDetail as TaskModel).taskStatus = value ? TaskStatusType.DOING : TaskStatusType.DONE
117              this.taskDetail.taskStatus = value ? TaskStatusType.DOING : TaskStatusType.DONE
118              console.log(JSON.stringify(this.taskDetail))
119              // 将状态更新后的对象, 同步到tasks
120              this.tasks.splice(this.index, 1, this.taskDetail)
121            })
122          Text(`任务状态：${this.taskDetail?.taskStatus == TaskStatusType.DONE ? '任务完成' : '任务进行中'}`)
123        }
124      }
125      .alignItems(HorizontalAlign.Start)
126    }
127    .height('100%')
128    .width('100%')
129    .backgroundColor('#f1f3f5')
130    .padding(10)
131  }
132}

Copyright ©2010-2022 比特日记 All Rights Reserved.

Powered By 可尔物语

浙ICP备11005866号-12