Tips:

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

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

一、预览

1. 红色框：任务设置项列表，把它定义为一个组件对象SettingList。
2. 绿色框：任务设置项，这里有两个设置项，分别是任务名称和任务时长，后续可能有更多的设置项。所以把这些设置项抽象为一个类对象TaskSettingItem，这个对象类有名称（任务名称）、内容（早起跑步）和类型。
3. 设置项类型：定义一个枚举类型对象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。

 

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

}

五、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目录下添加设置项右侧的箭头图片文件（见附件）