【时间盒子】-【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

javascript 复制代码
build() {
  Column() {
    // 标题菜单栏
    // TODO: 待完善

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

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

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

四、资源使用

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

javascript 复制代码
.backgroundColor($r('app.color.grey_light'))

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

相关推荐
光锥智能3 小时前
小平板元年,华为MatePad Mini创出一片蓝海
华为·电脑
程序员潘Sir6 小时前
HarmonyOS实现快递APP自动识别地址
harmonyos·鸿蒙
萌虎不虎6 小时前
【鸿蒙(openHarmony)自定义音频播放器的开发使用说明】
华为·音视频·harmonyos
李洋-蛟龙腾飞公司6 小时前
HarmonyOSAI编程万能卡片生成(一)
华为·ai编程·harmonyos
森之鸟9 小时前
开发中使用——鸿蒙播放本地mp3文件
华为·harmonyos
不是三毛没有半10 小时前
华为USG6000v2 NAT模式下IPSEC IKE V1 实验
网络·网络安全·华为
HarmonyOS小助手11 小时前
【案例+1】HarmonyOS官方模板优秀案例 第7期:金融理财 · 记账应用
harmonyos·鸿蒙·鸿蒙生态
爱笑的眼睛1113 小时前
HarmonyOS 应用开发深入浅出:基于 Stage 模型与声明式 UI 的现代化状态管理实践
华为·harmonyos
爱笑的眼睛1114 小时前
HarmonyOS 应用开发深度解析:掌握 ArkTS 声明式 UI 与现代化状态管理
华为·harmonyos
爱笑的眼睛1114 小时前
HarmonyOS 应用开发深度解析:基于 ArkTS 的跨组件状态管理最佳实践
华为·harmonyos