【时间盒子】-【6.任务页面】在同一个页面新建、编辑任务

Tips:

• Column组件的使用；
• color.json资源文件的使用。
  一、页面布局
  页面分为三个部分，从上往下分别是：标题菜单栏、时间选择器和任务列表。每个部分都可以设计为独立的组件，后续文章分别介绍。
  
  二、新建页面
  右击pages目录，新建 >> Page >> 页面命名为Detail。
  
  
  
  三、布局代码
  在Detail.ets文件页面中，我们删除默认的布局代码。使用column容器布局，从上往下加入自定义组件（待完善，见后续文章）：标题菜单栏、时间选择器和任务列表。
  关于Column组件的使用，请参考官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/cta-use-of-the-column-and-row-component-V5

build() {
  Column() {
    // 标题菜单栏
    // TODO: 待完善

    // 时间选择器
    // TODO: 待完善

    // 任务列表
    // TODO: 待完善

  }
  .width('100%')
  .height('100%')
  .backgroundColor('#F1F3F5')
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

四、资源使用
上述代码中backgroundColor(‘#F1F3F5’)，背景颜色值#F1F3F5可以在资源文件src >> main >> resources >> base >> element >> color.json 中定义。在页面中使用自定义的颜色值 $r(‘app.color.grey_light’)。

.backgroundColor($r('app.color.grey_light'))
1.

关于资源的使用，请参考官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/resource-usage-0000001820880417