【时间盒子】-【9.任务设置项】自定义任务名称、任务时长等设置项组件

Tips:

@Stage、@Link装饰器的使用；

参考我的帖子：https://developer.huawei.com/consumer/cn/forum/topic/0208152234389094513?fid=0101587866109860105

一、预览

红色框：任务设置项列表，把它定义为一个组件对象SettingList。
绿色框：任务设置项，这里有两个设置项，分别是任务名称和任务时长，后续可能有更多的设置项。所以把这些设置项抽象为一个类对象TaskSettingItem，这个对象类有名称（任务名称）、内容（早起跑步）和类型。
设置项类型：定义一个枚举类型对象TaskSettingType，代表不同的设置项；通过这个类型判断，当点击不同类型的设置项，弹出不同的对话框（见下一篇）。

二、枚举类型TaskSettingType.ets

右击目录constants >> 新建 >> ArkTS File，文件命名为TaskSettingType。

定义两个枚举常量，分别是0表示任务名称TASK_NAME；1表示任务时长TASK_DURATION。代码如下：

/*** 任务设置类型*/
export enum TaskSettingType {/*** 任务名称*/TASK_NAME = 0,/*** 任务时长*/TASK_DURATION = 1}

三、任务设置项TaskSettingItem.ets

右击目录viewmodel >> 新建 >> ArkTS File，文件命名为TaskSettingItem。

给设置项定义三个属性，分别是项的名称、内容和类型。代码如下：

import { TaskSettingType } from '../constants/TaskSettingType';
/*** 任务设置项实体对象*/
export default class TaskSettingItem {/*** 设置项的标题*/public title: string;/*** 设置项的值内容*/public content: string;/*** 设置项的类型*/public sType: TaskSettingType;/*** 构造函数* @param title 设置项的标题* @param content 设置项的值内容* @param type 设置项的类型*/constructor(title: string, content: string, type: TaskSettingType) {this.title = title;this.content = content;this.sType = type;}
}

四、任务设置项列表组件SettingList.ets

右击目录component >> 新建 >> ArkTS File，文件命名为SettingList。

设置项列表使用Column列上下布局，包含多个设置项，设置项与设置项之间有分割线隔开。
每个设置项使用Row行左右布局，包含设置项的名称、内容和右箭头图片。

给该组件定义一个任务设置项数组对象settingItems: Array<TaskSettingItem>，通过遍历数组对象的元素，动态生成任务设置项。代码如下：

import SizeUtil from '../utils/SizeUtil'
import TaskSettingItem from '../viewmodel/TaskSettingItem'@Component
export default struct SettingList {@Link settingItems: Array<TaskSettingItem>;build() {Column() {ForEach(this.settingItems, (item: TaskSettingItem, index: number | undefined) => {// 分割线，第一个不显示Divider().visibility(index === 0 ? Visibility.Hidden : Visibility.Visible).opacity($r('app.float.divider_opacity')).color($r('app.color.grey_divider')).lineCap(LineCapStyle.Round).margin({left: SizeUtil.getVp($r('app.float.setting_item_divider_margin_horizon')),right: SizeUtil.getVp($r('app.float.setting_item_divider_margin_horizon'))})Row() {Text(item.title).fontSize(SizeUtil.getVp($r('app.float.setting_item_name_font_size'))).fontWeight(FontWeight.Regular).fontColor($r('app.color.grey_divider')).layoutWeight(1)Text(item.content == '' ? '请输入' : item.content).fontSize(SizeUtil.getVp($r('app.float.setting_item_content_font_size'))).fontWeight(FontWeight.Normal).fontColor($r('app.color.grey_divider')).opacity($r('app.float.setting_item_content_font_opacity'))Image($r('app.media.icon_right')).width(SizeUtil.getVp($r('app.float.setting_item_image_width'))).height(SizeUtil.getVp($r('app.float.setting_item_image_height'))).objectFit(ImageFit.Fill).margin({left: SizeUtil.getVp($r('app.float.setting_item_image_margin_horizon'))})}.height(SizeUtil.getVp($r('app.float.setting_item_height'))).alignItems(VerticalAlign.Center).padding({left: SizeUtil.getVp($r('app.float.setting_item_interval')),right: SizeUtil.getVp($r('app.float.setting_item_interval'))}).onClick(() => {// 弹窗设置// TODO:})}, (item: TaskSettingItem, index: number | undefined) => JSON.stringify(item) + index)}.margin({bottom: SizeUtil.getVp($r('app.float.setting_item_interval')),left: SizeUtil.getVp($r('app.float.setting_item_interval')),right: SizeUtil.getVp($r('app.float.setting_item_interval'))}).borderRadius(SizeUtil.getVp($r('app.float.setting_item_border_radius'))).backgroundColor(Color.White)}}

五、float.json

在资源文件float中新定义的数值，代码如下：

{"name": "divider_opacity","value": "0.05"
},
{"name": "setting_item_divider_margin_horizon","value": "12"
},
{"name": "setting_item_name_font_size","value": "16"
},
{"name": "setting_item_content_font_size","value": "14"
},
{"name": "setting_item_content_font_opacity","value": "0.6"
},
{"name": "setting_item_image_width","value": "6.7"
},
{"name": "setting_item_image_height","value": "12.8"
},
{"name": "setting_item_image_margin_horizon","value": "7"
},
{"name": "setting_item_height","value": "56"
},
{"name": "setting_item_interval","value": "12"
},
{"name": "setting_item_border_radius","value": "24"
}