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

与辉鸿蒙
发布于 2024-11-15 22:54
浏览
0收藏

Tips:
@State、@Link装饰器的使用;
参考我的帖子:https://developer.huawei.com/consumer/cn/forum/topic/0208152234389094513?fid=0101587866109860105

【时间盒子】-【9.任务设置项】自定义任务名称、任务时长等设置项组件-鸿蒙开发者社区

  1. 红色框:任务设置项列表,把它定义为一个组件对象SettingList。
  2. 绿色框:任务设置项,这里有两个设置项,分别是任务名称和任务时长,后续可能有更多的设置项。所以把这些设置项抽象为一个类对象TaskSettingItem,这个对象类有名称(任务名称)、内容(早起跑步)和类型。
  3. 设置项类型:定义一个枚举类型对象TaskSettingType,代表不同的设置项;通过这个类型判断,当点击不同类型的设置项,弹出不同的对话框(见下一篇)。
    二、枚举类型TaskSettingType.ets
    右击目录constants >> 新建 >> ArkTS File,文件命名为TaskSettingType。
    【时间盒子】-【9.任务设置项】自定义任务名称、任务时长等设置项组件-鸿蒙开发者社区
    定义两个枚举常量,分别是0表示任务名称TASK_NAME;1表示任务时长TASK_DURATION。代码如下:
/**
 * 任务设置类型
 */
export enum TaskSettingType {
  /**
   * 任务名称
   */
  TASK_NAME = 0,
  /**
   * 任务时长
   */
  TASK_DURATION = 1

}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

三、任务设置项TaskSettingItem.ets
右击目录viewmodel >> 新建 >> ArkTS File,文件命名为TaskSettingItem。
【时间盒子】-【9.任务设置项】自定义任务名称、任务时长等设置项组件-鸿蒙开发者社区
给设置项定义三个属性,分别是项的名称、内容和类型。代码如下:

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;
  }
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.

四、任务设置项列表组件SettingList.ets
右击目录component >> 新建 >> ArkTS File,文件命名为SettingList。
【时间盒子】-【9.任务设置项】自定义任务名称、任务时长等设置项组件-鸿蒙开发者社区

  1. 设置项列表使用Column列上下布局,包含多个设置项,设置项与设置项之间有分割线隔开。
  2. 每个设置项使用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)
  }

}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.

五、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"
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.

六、资源文件
在资源文件media目录下添加设置项右侧的箭头图片文件(见附件)
【时间盒子】-【9.任务设置项】自定义任务名称、任务时长等设置项组件-鸿蒙开发者社区

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
icon_right.png.zip 1.22K 0次下载
已于2024-11-18 14:58:11修改
收藏
回复
举报
回复
    相关推荐