Flutter for OpenHarmony 智能备忘录笔记APP 实战DAY1：开发环境搭建+项目架构规划+首页骨架搭建+本地存储工具封装

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net

大家好，全新Flutter适配OpenHarmony实战连载系列正式开启！
之前我们完整做完了鸿蒙天气APP从DAY1到DAY10全流程实战，不管是开发逻辑、文章风格、排版结构还是代码写法，都已经形成固定统一范式。
今天开启全新独立主题：智能备忘录笔记APP，全程沿用和天气项目完全一样的行文风格、章节结构、代码片段篇幅、口语化实战讲解，循序渐进从0到1开发一款适配开源鸿蒙手机、平板的原生风格备忘录应用。

这款备忘录APP后续会陆续实现：笔记新增、在线编辑、删除收藏、分类标签管理、关键词模糊搜索、时间排序、隐私加密上锁、桌面小组件、本地数据永久缓存等全套商用级功能，全程基于Flutter原生开发，深度适配OpenHarmony系统特性，无多余臃肿第三方库，代码规范、目录清晰，可直接当做课程设计、期末大作业、个人练手项目使用。

🚀 本期开发目标

1. 检查并配置Flutter+OpenHarmony完整开发环境，确保编译、真机调试无报错
2. 从零新建纯净Flutter项目，适配鸿蒙编译运行环境
3. 规划备忘录APP整体业务架构、页面结构与后续迭代路线
4. 引入项目必备核心依赖，统一锁定版本，避免后续版本冲突
5. 规范搭建项目模块化目录结构，提前分层方便后续迭代
6. 搭建APP首页完整UI骨架，遵循鸿蒙设计风格布局
7. 封装鸿蒙适配版本地存储工具类，完成全局初始化，为笔记持久化打底

📦 第一步：开发环境校验与项目创建

在正式写代码之前，首先要保证本地开发环境完整可用，终端输入环境检测命令，校验Flutter、鸿蒙SDK、编译工具是否配置正常。
执行环境检测命令：

flutter doctor

确保无红色报错、无工具缺失、无SDK版本不兼容问题，鸿蒙设备已开启开发者模式、USB调试、无线调试授权，电脑与真机处于同一局域网，为后续真机调试、打包编译做好准备。

环境校验通过后，我们新建专属备忘录项目，命令行创建项目并进入工程目录：

flutter create ohos_memo_note
cd ohos_memo_note

项目创建完成后，使用VSCode或者Android Studio打开整个工程，默认生成的模板代码可以保留，后续我们逐步替换改造，全程不破坏原生编译配置，保证能正常编译为OpenHarmony安装包。

🔧 第二步：引入项目核心依赖并版本锁定

备忘录APP核心离不开状态管理、本地持久化、轻量弹窗提示，我们只引入刚需依赖，不添加冗余库，保证APP在鸿蒙低配机型也能流畅运行。
打开 pubspec.yaml 配置依赖，统一锁定版本，防止自动升级引发兼容报错：

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.1.1
  shared_preferences_ohos: ^2.2.0
  flutter_easyloading: ^3.0.5

• provider：全局状态管理，统一控制笔记列表、分类、主题状态
• shared_preferences_ohos：鸿蒙适配本地存储，存放笔记数据、设置偏好
• flutter_easyloading：全局加载、吐司提示，简化交互弹窗开发

配置完成后在终端执行：

flutter pub get

自动下载并关联所有依赖，全程无需额外原生配置，开箱即用，适配OpenHarmony系统底层机制。

📂 第三步：规范项目分层目录结构

从DAY1开始就规范目录结构，养成工程化开发习惯，和之前天气项目目录规范保持一致，后续DAY2到DAY10新增功能直接对应目录存放，代码不杂乱、耦合度低、便于后期维护和毕设归档。

预设完整目录结构：

lib/
├─ model/        # 笔记实体类、分类实体类数据模型
├─ provider/     # 全局状态管理、笔记逻辑、主题管理
├─ ui/           # 所有业务页面、自定义卡片、公共组件
├─ utils/        # 本地存储、时间格式化、常量工具、路由工具
├─ config/       # 全局配色、文字样式、静态常量配置
└─ main.dart     # 项目入口、全局初始化、路由挂载

我们手动依次创建以上空文件夹，为后续编写模型、页面、工具类提前铺垫，专业项目该有的分层全部配齐。

🧩 第四步：全局初始化配置与入口改造

打开 main.dart，先做全局基础配置，固定屏幕方向、初始化加载工具、适配鸿蒙系统UI风格，为整个APP奠定基础。

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

先绑定Flutter引擎初始化，后续本地存储、第三方插件都依赖这行代码，避免鸿蒙机型偶发初始化闪退问题。
同时配置应用主题底色、全局字体适配，贴合OpenHarmony简约清新的设计美学，保持和系统UI风格统一。

🏠 第五步：搭建首页完整UI骨架

今天先完成备忘录首页基础布局，采用鸿蒙常用结构：顶部导航标题栏、中间空白笔记列表区域、右下角新增笔记悬浮按钮，整体布局简洁大气，符合鸿蒙原生应用交互逻辑。

首页核心骨架代码：

Scaffold(
  backgroundColor: Color(0xFFF5F7FA),
  appBar: AppBar(
    title: Text("我的备忘录笔记"),
    elevation: 0,
    backgroundColor: Colors.white,
  ),
  body: ListView(
    padding: EdgeInsets.all(15),
  ),
  floatingActionButton: FloatingActionButton(
    backgroundColor: Colors.blueAccent,
    child: Icon(Icons.add, color: Colors.white),
    onPressed: () {},
  ),
)

采用浅色系背景、无阴影导航栏、圆角悬浮按钮，完全对标鸿蒙设计规范，布局留白合理，后续只需要在ListView中填充笔记条目即可，扩展性极强。

💾 第六步：封装鸿蒙适配本地存储工具类

备忘录最核心的需求就是数据本地永久保存，退出APP、重启手机笔记都不丢失。
我们在utils目录下新建 storage_util.dart，封装全局统一存储工具类，后续所有笔记增删改查、配置保存都调用这个工具，不用重复编写实例化代码。

存储工具基础封装代码：

import 'package:shared_preferences_ohos/shared_preferences_ohos.dart';

class StorageUtil {
  static SharedPreferences? _prefs;

  static Future<void> init() async {
    _prefs = await SharedPreferences.getInstance();
  }

  static SharedPreferences get instance => _prefs!;
}

提供初始化方法和全局单例获取，在main.dart启动时一次性初始化，全局页面直接调用，适配OpenHarmony存储沙箱机制，读写稳定、不丢失、不报错。

✅ DAY1 真机运行效果实测

1. 开发环境校验通过，Flutter与鸿蒙SDK配置完整无报错；
2. 备忘录项目创建成功，依赖安装完成无版本冲突；
3. 模块化目录结构搭建完毕，分层清晰符合工程化规范；
4. 首页UI骨架正常渲染，导航栏、列表区域、新增按钮布局完整；
5. 本地存储工具类封装完成，可全局调用，为后续笔记持久化开发打好基础；
6. 鸿蒙真机可正常编译安装，界面适配屏幕比例，无布局错位、溢出问题。

🎯 DAY1 知识点总结 & DAY2预告

本节核心知识点

1. Flutter for OpenHarmony 开发环境完整校验与项目创建流程；
2. 备忘录项目刚需依赖选型、版本锁定与冲突规避技巧；
3. 大型跨平台APP标准化目录分层设计思路；
4. 遵循鸿蒙设计风格的首页骨架布局搭建方法；
5. 鸿蒙适配版本地存储工具类封装、全局初始化最佳实践。

下一节DAY2预告

DAY2我们将重点开发：

• 定义笔记数据实体Model类，封装标题、内容、时间、标签字段
• 自定义备忘录列表Item卡片UI，适配鸿蒙圆角阴影风格
• 构造模拟假数据，实现首页笔记列表渲染展示
• 优化列表间距、分割线、适配不同尺寸鸿蒙设备
• 完善存储工具类增删改查基础方法，为真实笔记数据读写做准备