《HarmonyOS Next开发进阶:打造功能完备的Todo应用华章》

news/2025/4/2 10:33:56/文章来源:https://www.cnblogs.com/Thewang/p/18803089

章节 6:日期选择器与日期处理

目标

  • 学习如何使用DatePicker组件。
  • 理解日期格式化和日期计算。

内容

  1. 日期选择器基础
    • 使用DatePicker组件。
    • 处理日期选择事件。
  2. 日期格式化
    • 格式化日期为友好的文本。
  3. 日期计算
    • 判断日期是否过期或即将到期。

代码示例

@Entry
@Component
struct DatePickerDemo {@State selectedDate: Date = new Date();@State showDatePicker: boolean = false;formatDate(date: Date): string {return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;}build() {Column() {Text('选择日期: ' + this.formatDate(this.selectedDate)).margin({ bottom: 16 })Button('选择日期').onClick(() => { this.showDatePicker = true; })if (this.showDatePicker) {DatePicker({start: new Date('2020-01-01'),end: new Date('2030-12-31'),selected: this.selectedDate,}).onChange((value: DatePickerInfo) => {this.selectedDate = new Date(value.year, value.month - 1, value.day);}).margin({ bottom: 16 })}}}
}

章节 7:任务统计与数据可视化

目标

  • 学习如何实现任务统计。
  • 理解简单的数据可视化方法。

内容

  1. 任务统计
    • 计算任务总数和完成率。
    • 按优先级统计任务数量。
  2. 数据可视化
    • 使用简单的图表展示统计数据。
  3. 示例:任务统计面板
    • 实现任务统计功能。

代码示例

@Entry
@Component
struct TaskStatistics {@State todoList: TodoItem[] = [new TodoItem('任务1', Priority.HIGH),new TodoItem('任务2', Priority.MEDIUM),new TodoItem('任务3', Priority.LOW)];getCompletionPercentage(): number {if (this.todoList.length === 0) return 0;const completedCount = this.todoList.filter(item => item.isCompleted).length;return Math.round((completedCount / this.todoList.length) * 100);}getPriorityStats(): PriorityStatItem[] {const highStat: PriorityStatItem = { priority: Priority.HIGH, count: 0, color: '#FF3B30' };const mediumStat: PriorityStatItem = { priority: Priority.MEDIUM, count: 0, color: '#FF9500' };const lowStat: PriorityStatItem = { priority: Priority.LOW, count: 0, color: '#34C759' };this.todoList.forEach(item => {switch (item.priority) {case Priority.HIGH: highStat.count++; break;case Priority.MEDIUM: mediumStat.count++; break;case Priority.LOW: lowStat.count++; break;}});return [highStat, mediumStat, lowStat];}build() {Column() {Text('任务统计').fontSize(24).fontWeight(FontWeight.Bold).margin({ bottom: 16 })Text(`完成率: ${this.getCompletionPercentage()}%`).margin({ bottom: 16 })ForEach(this.getPriorityStats(), (stat: PriorityStatItem) => {Row() {Circle().fill(stat.color).width(12).height(12).margin({ right: 8 })Text(`${stat.priority}: ${stat.count} 个`)}.margin({ bottom: 8 })})}}
}

章节 8:振动反馈与用户交互

目标

  • 学习如何使用@ohos.vibrator实现振动反馈。
  • 理解用户交互的优化方法。

内容

  1. 振动反馈基础
    • 使用vibrate方法实现短振动。
  2. 用户交互优化
    • 在任务操作时提供振动反馈。
  3. 示例:振动反馈应用
    • 实现用户交互时的振动效果。

代码示例

import vibrator from '@ohos.vibrator';@Entry
@Component
struct VibrationDemo {vibrateShort() {try {vibrator.vibrate(10);} catch (error) {console.error('Failed to vibrate:', error);}}build() {Column() {Text('点击按钮体验振动反馈').margin({ bottom: 16 })Button('短振动').onClick(() => this.vibrateShort())}}
}

章节 9:对话框与用户提示

目标

  • 学习如何使用@ohos.promptAction显示对话框。
  • 理解如何处理用户输入。

内容

  1. 对话框基础
    • 使用showDialog方法显示对话框。
  2. 用户输入处理
    • 获取用户选择的结果。
  3. 示例:确认删除对话框
    • 实现删除任务时的确认对话框。

代码示例

import promptAction from '@ohos.promptAction';@Entry
@Component
struct DialogDemo {async showConfirmationDialog() {try {const dialogButtons: Array<DialogButton> = [{ text: '取消', color: '#8E8E93' },{ text: '确定', color: '#FF3B30' }];const options: promptAction.ShowDialogOptions = {title: '确认删除',message: '确定要删除此任务吗?',buttons: dialogButtons};const result = await promptAction.showDialog(options);if (result && result.index === 1) {console.log('用户确认删除');}} catch (error) {console.error('对话框显示失败:', error);}}build() {Column() {Text('点击按钮显示对话框').margin({ bottom: 16 })Button('删除任务').onClick(() => this.showConfirmationDialog())}}
}

章节 10:完整Todo应用实现

目标

  • 综合应用前面章节的知识,实现一个完整的Todo应用。
  • 理解如何将各个功能模块整合在一起。

内容

  1. 功能整合
    • 数据存储与加载。
    • 响应式布局与主题切换。
    • 任务管理与统计。
    • 日期选择与振动反馈。
  2. 完整代码实现
    • 从头到尾实现一个功能完整的Todo应用。

总结

通过以上章节的学习,用户将逐步掌握HarmonyOS Next的开发技能,从基础的环境搭建到复杂的任务管理应用实现。每个章节都包含清晰的代码示例和详细解释,帮助用户快速上手并深入理解HarmonyOS Next的开发。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/908848.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MarkDwon语法

MarkDown语法 1、标题用法 一级标题:#+空格+内容+回车 二级标题:##+空格+内容+回车 三级标题:###+空格+内容+回车 四级标题:####+空格+内容+回车 2、字体用法 粗体使用:快捷键ctrl+b或者内容两边加两个星号,示例 斜体使用:内容两边加一个星号,示例 斜体加粗:内容两边加…

图论(连通分量)

AT_abc284_c [ABC284C] Count Connected Components 题目描述 頂点に $ 1 $ から $ N $ の番号が、辺に $ 1 $ から $ M $ の番号がついた $ N $ 頂点 $ M $ 辺の単純無向グラフが与えられます。辺 $ i $ は頂点 $ u_i $ と頂点 $ v_i $ を結んでいます。 グラフに含まれる連結…

业务系统基础框架-Winform版-角色

角色列表,可刷新,可展开,可折叠编辑角色为角色权限为角色分配菜单查看拥有此角色的账号

3.31 学习记录

实现了使用springboot从文件中读取数据显示在前端

记一次GC导致线上服务超时问题

1、现象2024-12-28 23点左右,线上其他服务请求 content-cache 出现批量超时。content-cache-03 机器内存使用率如下:机器配置:4核8G这里因为JVM参数设置为:-Xms4g -Xmx4g -XX:MaxNewSize=1g所以达到42%时,内存的使用率已经达到了3.3G。 2、数据查看GC日志如下: (1)CMS老…

No.1 可视化大屏--vite+vue3项目环境搭建

一、DataV-Vue3 1.1 安装 官网:https://datav-vue3.netlify.app/Guide/Guide.htmlnpm install @kjgl77/datav-vue3 一、vite3构建Vue3项目 1.1 什么是Vite 1.2创建vite3项目 第一步:新建一个项目的文件夹第二步:输入cmd,回车 第三步: npm init vite 第四步:输入项目名称…

SvelteKit 最新中文文档教程(16)—— Service workers

前言 Svelte,一个语法简洁、入门容易,面向未来的前端框架。 从 Svelte 诞生之初,就备受开发者的喜爱,根据统计,从 2019 年到 2024 年,连续 6 年一直是开发者最感兴趣的前端框架 No.1:Svelte 以其独特的编译时优化机制著称,具有轻量级、高性能、易上手等特性,非常适合构…

OLLAMA 自定义大模型角色

在Ollama中通过deepseek-r1生成特定角色的模板(如教案设计),核心是通过Modelfile定义模型的系统提示(SYSTEM)和对话模板(TEMPLATE)。以下是具体步骤和示例: 一、Modelfile 基本结构与关键指令FROM指令指定基础模型,这里你可以使用ollama本地下载的模型,也可以去Huggi…

WebSocket调试神器对决:Apipost凭何碾压Apifox?

你以为所有API工具都能玩转WebSocket? 当你的APP需要实时股票行情推送,当你的游戏要处理千人同屏交互,当你的IM系统必须保障消息零延迟——传统HTTP协议的"一问一答"模式瞬间破功。此刻WebSocket协议才是真正的救世主,这个全双工通信协议能让客户端与服务器建立&…

一年前的无心之举,一年后我想要将其做的更好——公众号开通。

大家好,答应的事情要做到。 我是晚秋,我在这里,这是我的公众号。 一年前我想把学过的技术,解决得问题都记录下来,帮助更多的人。 日复一日,也放弃过。 但是到今日,忽然看到自己的无心之举帮助了很多刚进入技术这一行的人。 他们迷茫,他们困顿,正如当初的我一样。 谢谢…

用户头像呼吸光环+鼠标悬停旋转放大

用户头像呼吸光环+鼠标悬停旋转放大在 子比主题后台 – 自定义代码 – 自定 CSS 样式代码 里面添加下面代码: /*【用户头像呼吸光环+鼠标悬停旋转放大】开始 */ .avatar{border-radius: 50%; animation: light 4s ease-in-out infinite; transition: 0.5s;}.avatar:hover{tran…