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

第一阶段笔记

【Flutter for OpenHarmony】开源鸿蒙跨平台训练营Day8-新增底部选项卡，完善对应页面实现https://blog.csdn.net/2601_95069475/article/details/157509223?spm=1001.2014.3001.5502https://blog.csdn.net/2601_95069475/article/details/157509223?spm=1001.2014.3001.5502【Flutter for OpenHarmony】Day9 实战：底部选项卡开发全流程 + 5 类核心报错解决方案.https://blog.csdn.net/2601_95069475/article/details/157586527?spm=1001.2014.3001.5502https://blog.csdn.net/2601_95069475/article/details/157586527?spm=1001.2014.3001.5502

第一阶段知识点梳理

一、功能开发核心流程

1.项目搭建：通过 VS Code 创建 Flutter 项目，配置pubspec.yaml依赖（http、pull_to_refresh 等），执行flutter pub get安装依赖。

2.目录结构设计：划分pages（含首页、景点列表等子页面）、models（数据模型）、utils（模拟数据）文件夹，规范文件组织。

3.底部选项卡实现：使用BottomNavigationBar组件，搭配PageStorage或IndexedStack保留页面状态，配置 4 个核心选项卡（首页、景点列表、我的、设置），实现图标 + 文字的选中 / 未选中状态区分。

4.页面功能完善：完成景点数据模型定义、模拟数据封装，实现下拉刷新 / 上拉加载、空数据展示、异常处理等交互逻辑。

5.运行验证：通过 DevEco Studio 启动鸿蒙模拟器，执行编译打包命令，完成应用在开源鸿蒙设备上的运行验证。

二、关键技术规范

1.组件选型：优先使用 Flutter 原生兼容组件，避免高版本独有图标导致兼容问题。

2.状态管理：通过IndexedStack或PageStorageKey避免页面切换时重建，保留列表滚动位置等状态。

3.语法规范：动态场景移除const关键字，颜色使用shade语法，替代旧版索引语法。

出现的问题及解决方法

1.targetSdkVersion 配置缺失，导致应用兼容性校验失败

解决方法：选择手动配置选项，输入目标 SDK 版本（如匹配 compileSDK 的 6.0.1 (21)），确认后自动更新项目配置

2.Flutter 资源文件缺失（flutter_assets not found），编译打包失败

报错日志

hvigor ERROR: Failed :entry:default@FlutterTask...
hvigor ERROR: ENOENT: no such file or directory, scandir 'C:\shanghai_scenic\build\ohos\intermediates\flutter\defaultDebug\flutter_assets'
Try:
Run with --stacktrace option to get the stack trace.
Run with --debug option to get more log output.
hvigor ERROR: BUILD FAILED in 13 s 467 ms
Process finished with exit code -1

解决方法：1. VS Code 终端执行flutter clean清理缓存；

                  2. 执行flutter build ohos --debug生成资源； 

                  3. 手动复制资源到指定目录，或执行命令完成复制同步。

3.常量表达式报错、图标未定义（Icons.landmark）、颜色语法不兼容

解决方法：1. 替换高版本图标为基础兼容图标（如Icons.location_on）；

                  2. 移除动态场景下 Icon 组件前的const关键字；

                  3. 将Colors.grey[600]改为Colors.grey.shade600。

4.Windows 系统执行编译命令时提示需启用开发者模式

解决方法：1. 终端执行start ms-settings:developers打开设置；

                  2. 开启开发者模式；

                  3. 重启开发工具后重新安装依赖并编译。

5.Flutter 版本不支持flutter build ohos --debug命令

解决方法：1. 执行flutter clean清理缓存；

                  2. 用flutter build bundle生成基础资源包；

                  3. 手动创建鸿蒙资源目录并复制资源，再启动模拟器运行。