章節 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應用。

代碼示例

（完整代碼見用戶提供的代碼）