OpenHarmony实战开发-List组件的使用之设置项

这篇具有很好参考价值的文章主要介绍了OpenHarmony实战开发-List组件的使用之设置项。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

介绍

在本篇CodeLab中,我们将使用List组件、Toggle组件以及Router接口,实现一个简单的设置页,点击将跳转到对应的详细设置页面。效果图如下:

OpenHarmony实战开发-List组件的使用之设置项,HarmonyOS,鸿蒙工程师,鸿蒙,harmonyos,OpenHarmony,鸿蒙,华为,鸿蒙开发,鸿蒙应用开发,鸿蒙工程师

相关概念

  • @CustomDialog:@CustomDialog装饰器用于装饰自定义弹窗。
  • List:List是常用的滚动类容器组件之一,它按照水平或者竖直方向线性排列子组件, List的子组件必须是ListItem,它的宽度默认充满List的宽度。
  • TimePicker:TimePicker是选择时间的滑动选择器组件,默认以 00:00 至 23:59 的时间区创建滑动选择器。
  • Toggle:组件提供勾选框样式、状态按钮样式及开关样式。
  • Router:通过不同的url访问不同的页面,包括跳转到应用内的指定页面、用应用内的某个页面替换当前页面、返回上一页面或指定的页面等。

环境搭建

软件要求

  • DevEco Studio版本:DevEco Studio 3.1 Release。
  • OpenHarmony SDK版本:API version 9。

硬件要求

  • 开发板类型:润和RK3568开发板。
  • OpenHarmony系统:3.2 Release。

环境搭建

完成本篇Codelab我们首先要完成开发环境的搭建,本示例以RK3568开发板为例,参照以下步骤进行:

  1. 获取OpenHarmony系统版本:标准系统解决方案(二进制)。以3.2 Release版本为例:

OpenHarmony实战开发-List组件的使用之设置项,HarmonyOS,鸿蒙工程师,鸿蒙,harmonyos,OpenHarmony,鸿蒙,华为,鸿蒙开发,鸿蒙应用开发,鸿蒙工程师

2.搭建烧录环境。

  1. 完成DevEco Device Tool的安装
  2. 完成RK3568开发板的烧录

3.搭建开发环境。

  1. 开始前请参考工具准备,完成DevEco Studio的安装和开发环境配置。
  2. 开发环境配置完成后,请参考使用工程向导创建工程(模板选择“Empty Ability”),选择JS或者eTS语言开发。
  3. 工程创建完成后,选择使用真机进行调测。

代码结构解读

本篇Codelab只对核心代码进行讲解。

├──entry/src/main/ets                        // 代码区
│  ├──common
│  │  ├──constants
│  │  │  └──CommonConstant.ets               // 常量集合文件
│  │  └──utils
│  │     ├──BroadCast.ets                    // 事件发布订阅管理器
│  │     └──Log.ets                          // 日志打印
│  ├──entryability
│  │  └──EntryAbility.ts                     // 应用入口,承载应用的生命周期
│  ├──model
│  │  ├──EventSourceManager.ets              // 事件资源管理器
│  │  ├──TaskInfo.ets                        // 任务信息存放
│  │  └──TaskInitList.ets                    // 初始化数据
│  ├──pages
│  │  ├──ListIndexPage.ets                   // 页面入口
│  │  └──TaskEditPage.ets                    // 编辑任务页
│  ├──view
│  │  ├──CustomDialogView.ets                // 自定义弹窗统一入口
│  │  ├──TaskDetail.ets                      // 任务编辑详情组件
│  │  ├──TaskEditListItem.ets                // 任务编辑详情Item组件
│  │  ├──TaskList.ets                        // 任务列表组件
│  │  └──TaskSettingDialog.ets               // 弹窗组件
│  └──viewmodel
│     ├──FrequencySetting.ets                // 频率范围设置
│     └──TaskTargetSetting.ets               // 任务目标设置
└──entry/src/main/resources
   ├──base
   │  ├──element                             // 字符串以及颜色的资源文件
   │  ├──media                               // 图片等资源文件
   │  └──profile                             // 页面配置文件存放位置
   ├──en_US
   │  └──element
   │     └──string.json                      // 英文字符存放位置
   ├──rawfile                                // 大体积媒体资源存放位置
   └──zh_CN
       └──element
          └──string.json                     // 中文字符存放位置

任务列表页

任务列表页由上部分的标题、返回按钮以及正中间的任务列表组成。实现效果如图:

OpenHarmony实战开发-List组件的使用之设置项,HarmonyOS,鸿蒙工程师,鸿蒙,harmonyos,OpenHarmony,鸿蒙,华为,鸿蒙开发,鸿蒙应用开发,鸿蒙工程师

使用Navigation以及List组件构成元素,使用ForEach遍历生成具体列表。这里是Navigation构成页面导航:

// ListIndexPage.ets
Navigation() {
  Column() {

    // 页面中间的列表
    TaskList() 
  }
  .width(THOUSANDTH_1000)
  .justifyContent(FlexAlign.Center)
}
.size({ width:THOUSANDTH_1000, height:THOUSANDTH_1000 })
.title(ADD_TASK_TITLE)

列表右侧有一个判断是否开启的文字标识,点击某个列表需要跳转到对应的任务编辑页里。具体的列表实现如下:

// TaskList.ets
List({ space:commonConst.LIST_ITEM_SPACE }) {
  ForEach(this.taskList, (item: TaskListItem) => {
    ListItem() {
      Row() {
        Row() {
          Image(item?.icon)
          ...
          Text(item?.taskName)
          ...
        }
        .width(commonConst.THOUSANDTH_500)

        // 状态显示
        if (item?.isOpen) {
          Text($r('app.string.already_open'))
            ...
        }
        Image($r('app.media.right_grey'))
        ...
      }
        ...
    }
      ...
    // 路由跳转到任务编辑页
    .onClick(() => {
      router.pushUrl({
        url: 'pages/TaskEditPage',
        params: {
          params: formatParams(item),
        }
      })
    })
    ...
  })
}

任务编辑页

任务编辑页由上方的“编辑任务”标题以及返回按钮,主体内容的List配置项和下方的完成按钮组成,实现效果如图:

OpenHarmony实战开发-List组件的使用之设置项,HarmonyOS,鸿蒙工程师,鸿蒙,harmonyos,OpenHarmony,鸿蒙,华为,鸿蒙开发,鸿蒙应用开发,鸿蒙工程师

由于每一个配置项功能不相同,且逻辑复杂,故将其拆分为五个独立的组件。

任务编辑页面,由Navigation和一个自定义组件TaskDetail构成:

// TaskEditPage.ets
Navigation() {
  Column() {
    TaskDetail()
  }
  .width(THOUSANDTH_1000)
  .height(THOUSANDTH_1000)
}
.size({ width:THOUSANDTH_1000, height:THOUSANDTH_1000 })
.title(EDIT_TASK_TITLE)
.titleMode(NavigationTitleMode.Mini)

自定义组件由List以及其子组件ListItem构成:

// TaskDetail.ets
List({ space:commonConst.LIST_ITEM_SPACE }) {
  ListItem() {
    TaskChooseItem()
  }
  ...
  ListItem() {
    TargetSetItem()
  }
  ...
  ListItem() {
    OpenRemindItem()
  }
  ...
  ListItem() {
    RemindTimeItem()
  }
  ...
  ListItem() {
    FrequencyItem()
  }
  ...
}
.width(commonConst.THOUSANDTH_940)

列表的每一项做了禁用判断,需要任务打开才可以点击编辑:

// TaskDetail.ets
.enabled(this.settingParams?.isOpen)

一些特殊情况的禁用,如每日微笑、每日刷牙的目标设置不可编辑:

// TaskDetail.ets
.enabled(
  this.settingParams?.isOpen
  && (this.settingParams?.taskID !== taskType.smile)
  && (this.settingParams?.taskID !== taskType.brushTeeth)
)

提醒时间在开启提醒打开之后才可以编辑:

// TaskDetail.ets
.enabled(this.settingParams?.isOpen && this.settingParams?.isAlarm)

设置完成之后,点击完成按钮,此处为了模拟效果,并不与数据库产生交互,因此直接弹出提示“设置完成!!!”。

// TaskDetail.ets
finishTaskEdit() {
  prompt.showToast({
    message: commonConst.SETTING_FINISHED_MESSAGE
  })
}

任务编辑弹窗

弹窗由封装的自定义组件CustomDialogView注册事件,并在点击对应的编辑项时触发,从而打开弹窗:

CustomDialogView引入实例并注册事件:

// CustomDialogView.ets
targetSettingDialog = new CustomDialogController({
  builder: TargetSettingDialog(),
  autoCancel: true,
  alignment: DialogAlignment.Bottom,
  offset: { dx:ZERO, dy:MINUS_20 }
})
...

// 注册事件
this.broadCast.on(
  BroadCastType.SHOW_FREQUENCY_DIALOG,
  () => {
    this.FrequencyDialogController.open();
  })

点击对应的编辑项触发:

// TaskDetail.ets
.onClick(() => {
  if (this.broadCast !== undefined) {
    this.broadCast.emit(
      BroadCastType.SHOW_TARGET_SETTING_DIALOG);
  }
})

自定义弹窗的实现:

因为任务目标设置有三种类型:

  • 早睡早起的时间
  • 喝水的量度
  • 吃苹果的个数

如下图所示:

OpenHarmony实战开发-List组件的使用之设置项,HarmonyOS,鸿蒙工程师,鸿蒙,harmonyos,OpenHarmony,鸿蒙,华为,鸿蒙开发,鸿蒙应用开发,鸿蒙工程师

故根据任务的ID进行区分,将同一弹窗复用:

// TaskSettingDialog.ets
if ([taskType.getup, taskType.sleepEarly].indexOf(this.settingParams?.taskID) > commonConst.HAS_NO_INDEX) {
  TimePicker({
    selected:commonConst.DEFAULT_SELECTED_TIME
  })
  ...
} else {
  TextPicker({ range:this.settingParams?.taskID === taskType.drinkWater ? this.drinkRange : this.appleRange,
    value: this.settingParams.targetValue})
  ...
}

弹窗确认的时候将修改好的值赋予该项设置,如不符合规则,将弹出提示:

// TaskSettingDialog.ets
// 校验规则
compareTime(startTime: string, endTime: string) {
  if (returnTimeStamp(this.currentTime) < returnTimeStamp(startTime) ||
    returnTimeStamp(this.currentTime) > returnTimeStamp(endTime)) {

    // 弹出提示
    prompt.showToast({
      message:commonConst.CHOOSE_TIME_OUT_RANGE
    })
    return false;
  }
  return true;
}

// 设置修改项
if (this.settingParams?.taskID === taskType.sleepEarly) {
  if (!this.compareTime(commonConst.SLEEP_EARLY_TIME, commonConst.SLEEP_LATE_TIME)) {
    return;
  }
  this.settingParams.targetValue = this.currentTime;
  return;
}
this.settingParams.targetValue = this.currentValue;

其余弹窗实现基本类似,这里不再赘述。

总结

您已经完成了本次Codelab的学习,并了解到以下知识点:

  1. 使用List组件实现列表布局。
  2. 使用@CustomDialog实现自定义弹窗。

为了帮助大家更深入有效的学习到鸿蒙开发知识点,小编特意给大家准备了一份全套最新版的HarmonyOS NEXT学习资源,获取完整版方式请点击→HarmonyOS教学视频

HarmonyOS教学视频:语法ArkTS、TypeScript、ArkUI等…视频教程

OpenHarmony实战开发-List组件的使用之设置项,HarmonyOS,鸿蒙工程师,鸿蒙,harmonyos,OpenHarmony,鸿蒙,华为,鸿蒙开发,鸿蒙应用开发,鸿蒙工程师

OpenHarmony实战开发-List组件的使用之设置项,HarmonyOS,鸿蒙工程师,鸿蒙,harmonyos,OpenHarmony,鸿蒙,华为,鸿蒙开发,鸿蒙应用开发,鸿蒙工程师

鸿蒙生态应用开发白皮书V2.0PDF:

获取完整版白皮书方式请点击→《鸿蒙生态应用开发白皮书V2.0PDF

OpenHarmony实战开发-List组件的使用之设置项,HarmonyOS,鸿蒙工程师,鸿蒙,harmonyos,OpenHarmony,鸿蒙,华为,鸿蒙开发,鸿蒙应用开发,鸿蒙工程师

鸿蒙 (Harmony OS)开发学习手册

一、入门必看

  1. 应用开发导读(ArkTS)
  2. .……

OpenHarmony实战开发-List组件的使用之设置项,HarmonyOS,鸿蒙工程师,鸿蒙,harmonyos,OpenHarmony,鸿蒙,华为,鸿蒙开发,鸿蒙应用开发,鸿蒙工程师


二、HarmonyOS 概念

  1. 系统定义
  2. 技术架构
  3. 技术特性
  4. 系统安全

OpenHarmony实战开发-List组件的使用之设置项,HarmonyOS,鸿蒙工程师,鸿蒙,harmonyos,OpenHarmony,鸿蒙,华为,鸿蒙开发,鸿蒙应用开发,鸿蒙工程师

三、如何快速入门?《鸿蒙基础入门学习指南》

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. .……

OpenHarmony实战开发-List组件的使用之设置项,HarmonyOS,鸿蒙工程师,鸿蒙,harmonyos,OpenHarmony,鸿蒙,华为,鸿蒙开发,鸿蒙应用开发,鸿蒙工程师


四、开发基础知识

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. .……

OpenHarmony实战开发-List组件的使用之设置项,HarmonyOS,鸿蒙工程师,鸿蒙,harmonyos,OpenHarmony,鸿蒙,华为,鸿蒙开发,鸿蒙应用开发,鸿蒙工程师


五、基于ArkTS 开发

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 7.网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. .……

OpenHarmony实战开发-List组件的使用之设置项,HarmonyOS,鸿蒙工程师,鸿蒙,harmonyos,OpenHarmony,鸿蒙,华为,鸿蒙开发,鸿蒙应用开发,鸿蒙工程师


更多了解更多鸿蒙开发的相关知识可以参考:《鸿蒙 (Harmony OS)开发学习手册文章来源地址https://www.toymoban.com/news/detail-851069.html

到了这里,关于OpenHarmony实战开发-List组件的使用之设置项的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HarmonyOS/OpenHarmony应用开发-Stage模型UIAbility组件使用(五)

    UIAbility组件间交互(设备内) UIAbility是系统调度的最小单元。在设备内的功能模块之间跳转时,会涉及到启动特定的UIAbility,该UIAbility可以是应用内的其他UIAbility,也可以是其他应用的UIAbility(例如启动三方支付UIAbility)。 本文将从如下场景分别介绍设备内UIAbility间的交互

    2024年02月16日
    浏览(47)
  • HarmonyOS鸿蒙应用开发( 四、重磅组件List列表组件使用详解)

    List列表组件,是一个非常常用的组件。可以说在一个应用中,它的身影无处不在。它包含一系列相同宽度的列表项,适合连续、多行呈现同类数据,如商品列表、图片列表和和文本列表等。ArkUI 框架采用 List 容器组件创建列表(类似 Android 的 RecycleView、Compose 的 LazyColumn)。

    2024年01月24日
    浏览(49)
  • OpenHarmony开发实战:switch、chart组件的使用(JS)

    本篇文章基于switch组件和chart组件,实现线形图、占比图、柱状图,并通过switch切换chart组件数据的动静态显示。要求实现以下功能: 实现静态数据可视化图表。 打开开关,实现静态图切换为动态可视化图表。 相关概念 switch组件:开关选择器,通过开关,开启或关闭某个功

    2024年04月11日
    浏览(79)
  • HarmonyOS/OpenHarmony(Stage模型)卡片开发AbilityStage组件容器

    AbilityStage是一个Module级别的组件容器,应用的HAP在首次加载时会创建一个AbilityStage实例,可以对该Module进行初始化等操作。 AbilityStage与Module一一对应,即一个Module拥有一个AbilityStage。 DevEco Studio默认工程中未自动生成AbilityStage,如需要使用AbilityStage的能力,可以手动新建一个

    2024年02月11日
    浏览(42)
  • HarmonyOS/OpenHarmony应用开发-HDC环境变量设置

    hdc(HarmonyOS Device Connector)是 HarmonyOS 为开发人员提供的用于调试的命令行工具,通过该工具可以在 windows/linux/mac 系统上与真实设备或者模拟器进行交互。 hdc 工具通过 HarmonyOS SDK 获取,存放于 /Huawei/Sdk/openharmony/版本号/toolchains/ 目录下。 1、打开环境变量 2、新建系统变量 3、

    2024年04月15日
    浏览(56)
  • HarmonyOS/OpenHarmony应用开发-Stage模型应用/组件级配置

    在开发应用时,需要配置应用的一些标签,例如应用的包名、图标等标识特征的属性。本文描述了在开发应用需要配置的一些关键标签。图标和标签通常一起配置,可以分为应用图标、应用标签和入口图标、入口标签,分别对应 app.json5配置文件 和 module.json5配置文件 文件中的

    2024年02月13日
    浏览(65)
  • 鸿蒙开发实战-(ArkUI)List组件和Grid组件的使用

    在我们常用的手机应用中,经常会见到一些数据列表,如设置页面、通讯录、商品列表等。下图中两个页面都包含列表,“首页”页面中包含两个网格布局,“商城”页面中包含一个商品列表。 上图中的列表中都包含一系列相同宽度的列表项,连续、多行呈现同类数据,例如

    2024年01月22日
    浏览(52)
  • HarmonyOS 开发-Grid和List内拖拽交换子组件位置

    介绍 本示例分别通过onItemDrop()和onDrop()回调,实现子组件在Grid和List中的子组件位置交换。 效果图预览 使用说明: 拖拽Grid中子组件,到目标Grid子组件位置,进行两者位置互换。 拖拽List中子组件,到目标List子组件位置,进行两者位置互换。 实现思路 在Grid组件中,通过ed

    2024年04月14日
    浏览(30)
  • HarmonyOS 鸿蒙开发DevEco Studio OpenHarmony:使用低代码进行开发

    OpenHarmony低代码开发方式,具有丰富的UI界面编辑功能,遵循JS、TS开发规范 ,通过可视化界面开发方式快速构建布局,可有效降低用户的时间成本和提升用户构建UI界面的效率。 说明 支持使用低代码进行JS/eTS页面开发,本章节以开发eTS页面为例,介绍低代码功能及使用方法。

    2024年02月19日
    浏览(65)
  • HarmonyOS/OpenHarmony元服务开发-卡片使用动效能力

    ArkTS卡片开放了使用动画效果的能力,支持显式动画、属性动画、组件内转场能力。需要注意的是,ArkTS卡片使用动画效果时具有以下限制:   以下示例代码实现了按钮旋转的动画效果:

    2024年02月15日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包