鸿蒙开发（27）案例今日任务_鸿蒙开发我的计划和今日任务的设计方案-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45299895/article/details/144830588

案例为纯前端实现，总结案例。

在这里插入图片描述

主页面代码

import { TaskStatisties } from '../view/TaskStatisties'
import { TaskItem } from '../view/TaskItem'
import CreateTaskModel, {TaskModel} from '../viewmodel/TaskModel'
import { router } from '@kit.ArkUI'

// xxx.ets
@Entry
@Component
struct TaskList {
  @StorageLink("tasks") tasks:Array<TaskModel> = []
  @StorageLink('PropA') storageLink:number = 0
  aboutToAppear(): void {
    const tasks = CreateTaskModel.initData()
    this.tasks = tasks
  }
  build() {
    Stack({alignContent:Alignment.BottomEnd}){
      //主轴垂直，侧轴水平
      Column() {
        /**
         * 第一个模块：头部
         **/
        Text("你好， 小王")
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
            // 颜色可以允许:英文单词、16进制、rgb、枚举
          .fontColor($r('app.color.text_color'))
        Text("让每天的工作效率他提高")
          .fontSize(14)
          .fontColor(Color.Gray)
          .margin({top:14})


        Scroll(){
          Column(){
            Text("我的计划")
              .fontSize(26)
              .fontWeight(FontWeight.Bold)
                // 颜色可以允许:英文单词、16进制、rgb、枚举
              .margin({top:30})
            /**
             * 第二个模块：显示模块列表
             **/
            TaskStatisties({tasks:this.tasks})
            /**
             * 第三个模块：当天任务列表
             **/
            Column(){
              Row(){
                Text("今日任务")
                  .fontSize(26)
                  .fontWeight(FontWeight.Bold)
                Text("查看更多")
                  .fontSize(14)
              }
              .width('100%')
              .justifyContent(FlexAlign.SpaceBetween)
              .margin({top:20})
              //任务列表
              TaskItem({tasks:this.tasks})
            }
          }
          .alignItems(HorizontalAlign.Start)
          .padding({bottom:70})
        }
        .scrollable(ScrollDirection.Vertical)
        .scrollBar(BarState.Off)
      }
      .height('100%')
      .alignItems(HorizontalAlign.Start)
      .backgroundColor('#f1f3f5')
      .padding(10)

      Stack(){
        Image($r('app.media.bg_jia'))
          .width(40)
        Image($r('app.media.jia'))
          .width(20)
      }
      .margin({bottom:100,right:30})
      .onClick(()=>{
        router.pushUrl({
            url:"pages/Page05_AddTask",
          },
          router.RouterMode.Standard,
          (err)=>{
            if(err){
              console.log("路由跳转出错了!")
            }
        })
      })
    }
  }
}

添加页面

import { formatDate,transformHoursAndMinutes } from "../utils/DateFormat"
import  {TaskModel} from '../viewmodel/TaskModel'
import { router } from "@kit.ArkUI"

@Extend(Text) function textStyles() {
  .fontSize(16)
  .fontColor($r("app.color.add_title_color"))
  .margin({bottom:10})
  .width("100%")
}
@Extend(TextInput) function inputStyles() {
  .borderRadius(0)
  .backgroundColor("#f1f3f5")
  .placeholderColor($r("app.color.text_color"))
}

@Extend(Line) function lineStyles(value:string="100%") {
  .width(value)
  .height(1)
  .backgroundColor("#cccccc")
}

@Extend(Radio) function radioStyles() {
  .width(24)
  .height(24)
  .radioStyle({
    checkedBackgroundColor:"#5B67CA"
  })
}

@Entry
@Component
struct Page05_AddTask {
  @StorageLink("tasks") tasks:Array<TaskModel> = []
  @State message:string = "Hello World"
  private selectedDate:Date = new Date()
  @State currentState:number = 0

  @State taskName:string = ""
  @State taskTime:string = ""
  @State taskMsg:string = ""
  @State taskBeginDate:string = ""
  @State taskEndDate:string = ""
  @State taskType:number = 1 //1,个人任务 2,工作任务
  @State taskTitle:number = 1 //任务标签学习，生活，娱乐
  @State taskStatus:string="" //任务状态：done完成 undone未完成 doing正在进行 futrue未来任务
  calendarChange = () =>{
    CalendarPickerDialog.show({
      selected:this.selectedDate,
      onAccept:(value)=>{
        this.taskTime = formatDate(value.getTime(),"yyyy-mm-dd")
        console.log("CalendarPickerDialog:"+this.taskTime)
      }
    })
  }

  timePickerChange =(type:string)=>{
    TimePickerDialog.show({
      selected:this.selectedDate,
      useMilitaryTime:true,//24小时
      disappearTextStyle:{
        color:Color.Red,
        font:{size:15,weight:FontWeight.Bold}
      },
      textStyle:{
        color:Color.Green
      },
      selectedTextStyle:{
        color:Color.Orange,
        font:{
          size:18,
          weight:FontWeight.Bold
        }
      },
      onAccept:(value:TimePickerResult)=>{
        const hour = transformHoursAndMinutes(value.hour)
        const minute = transformHoursAndMinutes(value.minute)
        const time = `${hour}:${minute}`
        if(type === "begin") {
          this.taskBeginDate = time
        }else {
          this.taskEndDate = time
        }
      }
    })
  }

  @Builder creatTaskTitle (taskTitle:number,taskTitleTxt:string,color:string) {
    Column(){
      Text(taskTitleTxt)
        .fontSize(18)
        .fontColor(Color.White)
    }
    .width(60)
    .height(30)
    .backgroundColor(color)
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .border({
      width:this.taskTitle==taskTitle?2:0,
      color:Color.Red
    })
    .margin({right:20})
    .onClick(()=>{
      this.taskTitle = taskTitle
    })

  }
  build() {
    Column(){
      //标题模块
      Text("新建任务")
        .fontSize(26)
        .fontWeight(FontWeight.Bold)
        .fontColor($r("app.color.text_color"))
        .margin({bottom:20})

      //存放页面的主题内容
      Column({space:20}){
        Column(){
          Text("标题")
            .textStyles()
          TextInput({placeholder:"请输入任务的名字",text:$$this.taskName})
            .inputStyles()
          Line().lineStyles()
        }
        //日期
        Column(){
          Text("日期")
            .textStyles()
          TextInput({placeholder:"请输入日期",text:$$this.taskTime})
            .inputStyles()
            .onClick(this.calendarChange)
          Line().lineStyles()
        }
        //s时间
        Column(){
          Text("时间")
            .textStyles()
          Row(){
            Column(){
              TextInput({placeholder:"请开始日期",text:$$this.taskBeginDate})
                .inputStyles()
                .onClick(()=>this.timePickerChange("begin"))
              Line().lineStyles("90%")
            }
            .width("48%")

            Column(){
              TextInput({placeholder:"请结束日期",text:$$this.taskEndDate})
                .inputStyles()
                .onClick(()=>this.timePickerChange("end"))
              Line().lineStyles("90%")
            }
            .width("48%")
          }
        }

        //描述
        Column(){
          Text("描述")
            .textStyles()
          TextInput({placeholder:"请输入任务详情",text:$$this.taskMsg})
            .inputStyles()
          Line().lineStyles()
        }

        //类型
        Column(){
          Text("类型")
            .textStyles()
          Row(){
            Row(){
              Radio({value:"1",group:"type"})
                .width(24)
                .height(24)
                .radioStyle({
                  checkedBackgroundColor:"#5867CA"
                })
                .onChange((isChecked:boolean)=>{
                  if (isChecked) {
                    this.taskType = 1
                  }
                })
                .checked(true)

              Text("个人任务")
                .fontColor("#10275A")
                .fontWeight(FontWeight.Bold)
            }
            Row(){
              Radio({value:"2",group:"type"})
                .width(24)
                .height(24)
                .radioStyle({
                  checkedBackgroundColor:"#5867CA"
                })
                .onChange((isChecked:boolean)=>{
                  if (isChecked) {
                    this.taskType = 2
                  }
                })
              Text("工作任务")
                .fontColor("#10275A")
                .fontWeight(FontWeight.Bold)
            }
          }
          .width("100%")
          .justifyContent(FlexAlign.SpaceBetween)
        }

        //标签啊
        Column(){
          Text("标签")
            .textStyles()
          Row(){
            this.creatTaskTitle(1,'学习',"#FD9D9E")
            this.creatTaskTitle(2,'生活',"#D79FDC")
            this.creatTaskTitle(3,'娱乐',"#C0EDCE")
          }
          .width("100%")

        }
        .width("100%")
        .alignItems(HorizontalAlign.Start)

        //创建任务
        Column(){
          Text("创建任务")
            .fontColor(Color.White)
            .fontWeight(FontWeight.Bold)
        }
        .width(200)
        .height(40)
        .backgroundColor($r("app.color.text_color"))
        .borderRadius(10)
        .margin({top:20})
        .justifyContent(FlexAlign.Center)
        .onClick(()=>{
            const id = new Date().getTime()
            const temp = new TaskModel(
              id.toString(),
              this.taskName,
              this.taskTime ,
              this.taskMsg,
              this.taskBeginDate,
              this.taskEndDate,
              this.taskType,
              this.taskTitle,
            )
          this.tasks.push(temp)
          router.back()
        })
      }
    }
    .width("100%")
    .height("100%")
    .padding(10)
    .backgroundColor($r("app.color.page_bg_color"))
  }
}

任务详情

import { router } from '@kit.ArkUI'
import {TaskModel} from '../viewmodel/TaskModel'
class PramsType<T>{
  value:T
  constructor(value:T) {
    this.value = value

  }
}
@Entry
@Component
struct Page05_AddTask {
  @State taskDetail:TaskModel | null = null
  @StorageLink("tasks") tasks:TaskModel[] = []
  @State taskTitle:string = ""
  @State index:number = 0
  aboutToAppear(): void {
    const params = router.getParams()
    const taskDetail = (params as PramsType<TaskModel>).value
    this.taskDetail = taskDetail
    const taskTitle = this.taskDetail.taskTitle
    switch (taskTitle) {
      case 1:
        this.taskTitle = "学习"
        break;
      case 2:
        this.taskTitle = "生活"
        break;
      case 3:
        this.taskTitle = "娱乐"
        break;
    }

    this.index = this.tasks.findIndex((item:TaskModel)=>taskDetail.id==item.id)
  }
  @Styles taskBoxStyle(){
    .width("49%")
    .height(80)
    .linearGradient({
      angle:180,//默认按照180度的角度渲染
      colors:[
        ["#FE9D9D",0.0],//第一个颜色值，第二个代表颜色范围
        ['#FE77D7D',1.0]
      ]
    })
    .borderRadius(10)
    .padding(10)

  }
  build() {
    Column({space:20}){
      //返回按钮和标题
      Row(){
        Text("返回")
          .width(50)
          .height(40)
          .backgroundColor(Color.White)
          .textAlign(TextAlign.Center)
          .borderRadius(10)
          .onClick(()=>{
            router.replaceUrl({
              url:"pages/Page02_TaskList"
            })
          })
        Text("任务详情")
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
          .fontColor($r("app.color.text_color"))
      }
      .width("100%")
      .justifyContent(FlexAlign.SpaceBetween)

      //任务名称
      Column({space:20}){
        Text(`${this.taskDetail?.taskName}`)
          .fontSize(18)
          .fontColor($r("app.color.text_color"))
          .width("100%")
        Text(this.taskTitle)
          .fontSize(16)
          .fontColor(Color.Gray)
          .width("100%")
      }

      //任务时间
      Row(){
        Column({space:10}){
          Text("开始时间")
            .fontSize(20)
            .fontColor("rgba(255,255,255,0.5)")
            .fontWeight(FontWeight.Bold)

          Text(`${this.taskDetail?.taskBeginDate}`)
            .fontSize(20)
            .fontColor(Color.White)
            .fontWeight(FontWeight.Bold)
        }
        .taskBoxStyle()
        .alignItems(HorizontalAlign.Start)

        Column({space:10}){
          Text("开始时间")
            .fontSize(20)
            .fontColor("rgba(255,255,255,0.5)")
            .fontWeight(FontWeight.Bold)

          Text(`${this.taskDetail?.taskEndDate}`)
            .fontSize(20)
            .fontColor(Color.White)
            .fontWeight(FontWeight.Bold)
        }
        .taskBoxStyle()
        .alignItems(HorizontalAlign.Start)
      }
      .width("100%")
      .justifyContent(FlexAlign.SpaceBetween)


      //任务状态切换
      Column({space:20}){
        Text("任务状态")
          .fontSize(20)
          .fontColor($r("app.color.text_color"))
          .fontWeight(FontWeight.Bold)

        Toggle({type:ToggleType.Switch,isOn:this.taskDetail?.taskStatus=="done"?true:false})
          .selectedColor(Color.Orange)
          .onChange((value)=>{
            this.taskDetail = this.taskDetail as TaskModel
            if (value) {
              this.taskDetail.taskStatus = "done"
            }else {
              this.taskDetail.taskStatus = "doing"
            }
            this.tasks.splice(this.index,1,this.taskDetail)
          })
        Row(){
          Image($r('app.media.list_icon2'))
            .width(30)
          Text(`${this.taskDetail?.taskStatus=="done"?"已完成":"进行中，滑动修改状态"}`)
            .fontWeight(FontWeight.Bold)
        }
      }
      .width("100%")
      .alignItems(HorizontalAlign.Start)

      //任务标签
      Column({space:20}){
        Text("任务标签")
          .fontSize(20)
          .fontColor($r("app.color.text_color"))
          .fontWeight(FontWeight.Bold)


        Row(){
          Text(`${this.taskDetail?.taskType==1?"个人":"工作"}`)
            .fontColor("#FD9D9E")
            .fontWeight(FontWeight.Bold)
        }
        .width(80)
        .height(30)
        .justifyContent(FlexAlign.Center)
        .backgroundColor("rgba(253,157,158,0.1)")
      }
      .width("100%")
      .alignItems(HorizontalAlign.Start)
    }
    .width("100%")
    .height("100%")
    .padding(10)
    .backgroundColor($r("app.color.page_bg_color"))
  }
}

git地址:案例今日任务