《HarmonyOS Next开发实战：从零构建响应式Todo应用的基石》 原创

章节 1：HarmonyOS Next项目基础与环境搭建

目标

• 了解HarmonyOS Next的基本概念和架构。
• 学习如何搭建开发环境。
• 创建一个简单的Hello World应用。

内容

1. HarmonyOS Next简介
   • 什么是HarmonyOS Next？
   • 声明式UI框架的优势。
2. 开发环境搭建
   • 安装DevEco Studio。
   • 配置HarmonyOS SDK。
3. 第一个HarmonyOS Next应用
   • 创建项目。
   • 编写简单的Hello World代码。
   • 运行和调试应用。

代码示例

@Entry
@Component
struct HelloWorld {
  build() {
    Text('Hello, HarmonyOS Next!')
      .fontSize(24)
      .fontWeight(FontWeight.Bold)
      .fontColor('#007AFF')
  }
}

章节 2：数据存储与Preferences API

目标

• 学习如何使用@ohos.data.preferences进行数据存储。
• 理解数据持久化的基本原理。

内容

1. Preferences API介绍
   • 什么是Preferences？
   • 如何获取和设置Preferences。
2. 存储和加载数据
   • 使用getPreferences方法初始化Preferences。
   • 使用put和get方法存储和读取数据。
3. 数据持久化示例
   • 存储用户设置。
   • 从存储中加载数据。

代码示例

import storage from '@ohos.data.preferences';

async function initPreferences() {
  try {
    const preferences = await storage.getPreferences(getContext(this), 'appSettings');
    await preferences.put('theme', 'dark');
    const savedTheme = await preferences.get('theme', 'light');
    console.log('Saved theme:', savedTheme);
  } catch (error) {
    console.error('Error initializing preferences:', error);
  }
}

章节 3：响应式布局与媒体查询

目标

• 学习如何使用@ohos.mediaquery实现响应式布局。
• 理解不同屏幕尺寸和方向的适配方法。

内容

1. 媒体查询基础
   • 使用matchMediaSync检测屏幕特性。
   • 监听屏幕变化事件。
2. 响应式布局实现
   • 根据屏幕宽度调整布局。
   • 横屏和竖屏的适配。
3. 示例：响应式Todo应用
   • 在不同设备上展示不同的UI。

代码示例

import mediaQuery from '@ohos.mediaquery';

@Entry
@Component
struct ResponsiveLayout {
  @State isTablet: boolean = false;
  @State isLandscape: boolean = false;

  aboutToAppear() {
    const tabletListener = mediaQuery.matchMediaSync('(min-width: 600vp)');
    const landscapeListener = mediaQuery.matchMediaSync('(orientation: landscape)');

    tabletListener.on('change', (_) => {
      this.isTablet = tabletListener.matches;
    });

    landscapeListener.on('change', (_) => {
      this.isLandscape = landscapeListener.matches;
    });
  }

  build() {
    Column() {
      Text('设备类型: ' + (this.isTablet ? '平板' : '手机'))
      Text('屏幕方向: ' + (this.isLandscape ? '横屏' : '竖屏'))
    }
  }
}

章节 4：主题切换与深色模式

目标

• 学习如何实现主题切换。
• 理解深色模式和浅色模式的适配方法。

内容

1. 主题切换基础
   • 定义主题颜色。
   • 使用@ohos.window设置状态栏颜色。
2. 深色模式适配
   • 检测系统主题。
   • 动态切换应用主题。
3. 示例：主题切换功能
   • 实现用户可切换的主题模式。

代码示例

import window from '@ohos.window';

@Entry
@Component
struct ThemeSwitcher {
  @State isDarkMode: boolean = false;

  updateTheme() {
    this.isDarkMode = !this.isDarkMode;
    this.updateStatusBarColor();
  }

  updateStatusBarColor() {
    const windowClass = window.getLastWindow(getContext(this));
    windowClass.setWindowBackgroundColor(this.isDarkMode ? '#1C1C1E' : '#F2F2F7');
  }

  build() {
    Column() {
      Text('当前主题: ' + (this.isDarkMode ? '深色' : '浅色'))
      Button('切换主题')
        .onClick(() => this.updateTheme())
    }
  }
}

章节 5：任务管理与状态切换

目标

• 学习如何实现任务的添加、编辑和删除。
• 理解任务状态的切换（完成/未完成）。

内容

1. 任务数据结构
   • 定义任务的属性（文本、优先级、截止日期等）。
2. 任务管理功能
   • 添加新任务。
   • 编辑现有任务。
   • 删除任务。
3. 任务状态切换
   • 切换任务的完成状态。
   • 实现任务的动画效果。

代码示例

class TodoItem {
  id: number;
  text: string;
  isCompleted: boolean;
  createdAt: Date;

  constructor(text: string) {
    this.id = Date.now();
    this.text = text;
    this.isCompleted = false;
    this.createdAt = new Date();
  }
}

@Entry
@Component
struct TaskManager {
  @State todoList: TodoItem[] = [];
  @State newTodoText: string = '';

  addTodo() {
    if (this.newTodoText.trim() !== '') {
      this.todoList.push(new TodoItem(this.newTodoText.trim()));
      this.newTodoText = '';
    }
  }

  toggleTodoComplete(index: number) {
    this.todoList[index].isCompleted = !this.todoList[index].isCompleted;
  }

  deleteTodo(index: number) {
    this.todoList.splice(index, 1);
  }

  build() {
    Column() {
      TextInput({ placeholder: '添加新任务...', text: this.newTodoText })
        .onChange((value: string) => { this.newTodoText = value; })
        .width('100%')
        .margin({ bottom: 16 })

      Button('添加')
        .onClick(() => this.addTodo())

      List() {
        ForEach(this.todoList, (item: TodoItem, index: number) => {
          ListItem() {
            Row() {
              Checkbox(item.isCompleted)
                .onChange((value: boolean) => this.toggleTodoComplete(index))
              Text(item.text)
            }
          }
        })
      }
    }
  }
}

总结

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