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

The旺

发布于 2025-3-31 22:01

1476浏览

0收藏

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

《HarmonyOS Next开发实战：从零构建响应式Todo应用的基石》-鸿蒙开发者社区

目标

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

内容

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

代码示例

@Entry
@Component
struct HelloWorld {
  build() {
    Text('Hello, HarmonyOS Next!')
      .fontSize(24)
      .fontWeight(FontWeight.Bold)
      .fontColor('#007AFF')
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.

章节 2：数据存储与Preferences API

目标

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

内容

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

代码示例

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);
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.

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

目标

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

内容

媒体查询基础
- 使用matchMediaSync检测屏幕特性。
- 监听屏幕变化事件。
响应式布局实现
- 根据屏幕宽度调整布局。
- 横屏和竖屏的适配。
示例：响应式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 ? '横屏' : '竖屏'))
    }
  }
}
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.

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

目标

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

内容

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

代码示例

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

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

目标

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

内容

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

代码示例

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)
            }
          }
        })
      }
    }
  }
}
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.
56.
57.
58.
59.