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')
}
四、资源使用
上述代码中backgroundColor('#F1F3F5'),背景颜色值#F1F3F5可以在资源文件src >> main >> resources >> base >> element >> color.json 中定义。在页面中使用自定义的颜色值 $r('app.color.grey_light')。
.backgroundColor($r('app.color.grey_light'))
关于资源的使用,请参考官方文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/resource-usage-0000001820880417