回复
【时间盒子】-【9.任务设置项】自定义任务名称、任务时长等设置项组件 原创
与辉鸿蒙
发布于 2024-11-15 22:54
浏览
0收藏
Tips:
@State、@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"
}
六、资源文件
在资源文件media目录下添加设置项右侧的箭头图片文件(见附件)
©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
icon_right.png.zip 1.22K 0次下载
已于2024-11-18 14:58:11修改
赞
收藏
回复
相关推荐