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

The旺

发布于 2025-3-31 22:01

1331浏览

0收藏

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

《HarmonyOS Next开发进阶：打造功能完备的Todo应用华章》-鸿蒙开发者社区

目标

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

内容

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

代码示例

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

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

目标

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

内容

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

代码示例

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

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

目标

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

内容

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

代码示例

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())
    }
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.

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

目标

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

内容

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

代码示例

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