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

相关推荐
猫林老师7 小时前
HarmonyOS分布式硬件共享:调用手机摄像头的手表应用
华为·交互·harmonyos
前端世界11 小时前
HarmonyOS应用开发指南:Toast无法显示的完整排查流程与实战案例
华为·harmonyos
安卓开发者14 小时前
鸿蒙NEXT Wear Engine穿戴侧应用开发完全指南
ubuntu·华为·harmonyos
安卓开发者14 小时前
鸿蒙Next振动开发指南:打造沉浸式触觉反馈体验
华为·harmonyos
Devil枫14 小时前
HarmonyOS屏幕方向适配指南
华为·harmonyos
misty youth19 小时前
配置openguass 教程(自存)
数据库·ubuntu·华为·openguass
鸿蒙小白龙1 天前
OpenHarmony 与 HarmonyOS 的 NAPI 开发实战对比:自上而下与自下而上的差异解析
harmonyos·鸿蒙·鸿蒙系统·open harmony
喵手1 天前
【参赛心得】从“碰一碰”到“服务流转”:HarmonyOS创新赛金奖作品“智游文博”全流程复盘!
华为·harmonyos·鸿蒙应用开发·1024征文
鸿蒙小白龙1 天前
OpenHarmony平台大语言模型本地推理:llama深度适配与部署技术详解
人工智能·语言模型·harmonyos·鸿蒙·鸿蒙系统·llama·open harmony
安卓开发者1 天前
鸿蒙NEXT Wear Engine开发实战:手机侧应用如何调用穿戴设备能力
华为·智能手机·harmonyos