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

你好，我是为你量身打造这篇**Flutter+鸿蒙6.0(API20+)**实战教程的导师，这篇文章完全适配鸿蒙6.0、API20及以上版本，包含完整天气APP项目案例、逐步骤操作、带注释代码，直接可落地运行，帮你快速掌握Flutter跨端开发鸿蒙的核心技能，尤其适合鸿蒙开发者新手入门Flutter。

前言

作为鸿蒙开发者，转型Flutter跨端开发能实现一套代码运行在Android、iOS、鸿蒙等多平台，鸿蒙6.0(API20+)对Flutter的兼容性已全面完善，且OpenHarmony SIG已维护多款适配鸿蒙的Flutter三方库，降低开发门槛。本文通过简易天气APP项目，带你实战Flutter集成三方库、打包运行在鸿蒙6.0设备上，全程步骤详细、代码带注释，新手也能跟着一步步完成，避开适配坑点。

环境准备（必看！适配鸿蒙6.0 API20+）

1. 基础环境要求

• Flutter SDK：3.16.0及以上（推荐3.19.0稳定版，完美兼容鸿蒙6.0，也可选择官方最新stable版本）

• 鸿蒙系统：HarmonyOS 6.0 Developer Preview1及以上

• 鸿蒙API版本：API20及以上

• 开发工具：Android Studio / VS Code（推荐搭配Cursor编辑器加速UI开发，提升效率）

• 鸿蒙设备：真机/模拟器（开启开发者模式+USB调试，模拟器需支持鸿蒙6.0及以上）

2. Flutter环境配置

1. 下载Flutter SDK：Flutter官方下载（可选择Quick start快速安装，或Custom setup自定义配置，新手推荐快速安装）

2. 配置系统环境变量：将Flutter SDK路径添加到系统PATH环境变量，确保终端可直接调用flutter命令，具体配置可参考官方指引中的“Add Flutter to path”说明。

3. 终端执行检查环境：
   flutter doctor✅ 确保无关键报错，Android toolchain、Flutter插件正常；若需适配鸿蒙原生工程，可额外安装OpenHarmony SIG提供的Flutter for HarmonyOS分支，确保执行flutter devices能识别ohos平台。3. 鸿蒙6.0设备开启调试

   1. 打开鸿蒙设备 → 设置 → 关于手机 → 连续点击版本号开启开发者模式

   2. 返回设置 → 开发者模式 → 开启USB调试、允许安装未知来源应用（鸿蒙6.0安装非应用市场APP必需）

   3. 电脑连接设备，终端执行：
      flutter devices✅ 能看到鸿蒙设备即连接成功；若需生成鸿蒙原生工程，可后续执行flutter create –platforms ohos . 命令生成ohos目录。项目介绍：Flutter鸿蒙简易天气APP核心功能用到的三方库（核心！适配鸿蒙6.0+）第一步：创建Flutter项目第二步：添加三方库依赖打开项目根目录的pubspec.yaml文件，添加3个核心三方库依赖（版本适配鸿蒙6.0，避免兼容性问题）：`name: flutter_harmony_weather
      description: Flutter鸿蒙6.0简易天气APP实战（集成三方库）
      version: 1.0.0+1

   environment:

   适配鸿蒙6.0要求，兼容Flutter 3.16.0及以上版本

   sdk: ‘>=3.16.0 <4.0.0’

   dependencies:
   flutter:
   sdk: flutter

   本地存储三方库（核心），存储最近查看城市，适配鸿蒙6.0

   shared_preferences: ^2.2.2

   提示框三方库，鸿蒙端原生交互

   fluttertoast: ^8.2.4

   天气图标三方库，提供丰富天气图标，适配鸿蒙显示

   weather_icons: ^3.0.0

   dev_dependencies:
   flutter_test:
   sdk: flutter`

    1. 显示当前城市天气（温度、天气状态、湿度）
   
    2. 支持手动切换城市（2个预设城市，可扩展）
   
    3. 本地存储最近查看的城市（重启不丢失）
   
    4. 适配鸿蒙6.0状态栏、全屏样式，贴合鸿蒙原生UI风格
   
    5. `shared_preferences`：Flutter最常用的本地存储三方库，完美支持鸿蒙6.0，用于存储最近查看的城市，OpenHarmony SIG已维护适配版本，可直接使用。
   
    6. `fluttertoast`：轻量级提示框三方库，鸿蒙端原生交互体验，用于切换城市、操作反馈提示。
   
    7. `weather_icons`：天气图标三方库，提供丰富的天气状态图标（晴、阴、雨等），适配鸿蒙端显示，无需手动绘制图标。
   
    8. 终端执行创建命令（项目名贴合天气主题，便于识别）：
    `flutter create flutter_harmony_weather
    cd flutter_harmony_weather`
   
    9. 打开项目，修改`android/app/build.gradle`，适配鸿蒙API20+（关键配置，确保APP能在鸿蒙6.0设备上运行）：
    `android {
        // 适配鸿蒙6.0 API20+，兼容鸿蒙原生工程编译要求
        compileSdkVersion 34
        defaultConfig {
            minSdkVersion 21 // 最低兼容API21，覆盖API20+所有鸿蒙6.0设备
            targetSdkVersion 34
            versionCode 1
            versionName "1.0"
        }
    }`
   
    10. （可选）生成鸿蒙原生工程目录：若需适配鸿蒙原生生态，终端执行命令生成ohos目录，不污染其他平台代码，后续可通过DevEco Studio配置签名：
    `flutter create --platforms ohos .`
   
    11. 终端执行安装依赖（确保三方库成功下载并适配鸿蒙环境）：
    `flutter pub get`✅ 依赖安装成功，若出现三方库适配报错，可参考OpenHarmony SIG维护的Flutter插件库替换适配版本，地址：https://atomgit.com/openharmony-tpc/flutter_packages。第三步：完整项目代码（带详细注释，鸿蒙6.0直接运行）替换`lib/main.dart`为以下代码，逐行注释，清晰说明每个功能的实现逻辑，贴合鸿蒙6.0 UI风格，可直接复制运行，同时适配鸿蒙平台特性：`import 'package:flutter/material.dart';
    // 导入本地存储三方库（支持鸿蒙6.0，存储最近查看城市）
    import 'package:shared_preferences/shared_preferences.dart';
    // 导入提示框三方库（鸿蒙端原生提示）
    import 'package:fluttertoast/fluttertoast.dart';
    // 导入天气图标三方库（显示晴、阴、雨等图标）
    import 'package:weather_icons/weather_icons.dart';
    
    // 程序入口（Flutter程序固定入口，鸿蒙端无差异）
    void main() {
      runApp(const MyApp());
    }
    
    class MyApp extends StatelessWidget {
      const MyApp({super.key});
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter鸿蒙天气APP',
          // 适配鸿蒙6.0状态栏样式，贴合鸿蒙原生蓝色主题
          theme: ThemeData(
            primarySwatch: Colors.blue,
            primaryColor: const Color(0xFF007DFF), // 鸿蒙系统标准蓝色
            // 鸿蒙系统沉浸式状态栏适配，避免状态栏与APP内容重叠
            useMaterial3: true,
          ),
          home: const WeatherPage(),
          // 关闭debug标签（发布时建议关闭，开发时可保留）
          debugShowCheckedModeBanner: false,
        );
      }
    }
    
    // 主页面：天气展示页面（核心页面，包含所有功能）
    class WeatherPage extends StatefulWidget {
      const WeatherPage({super.key});
    
      @override
      State<WeatherPage> createState() => _WeatherPageState();
    }
    
    class _WeatherPageState extends State<WeatherPage> {
      // 预设2个城市的天气数据（模拟真实接口数据，新手可后续对接真实天气API）
      // 格式：城市名: {温度, 天气状态, 湿度, 天气图标}
      final Map<String, Map<String, dynamic>> _weatherData = {
        "北京": {
          "temp": "22℃",
          "status": "晴",
          "humidity": "45%",
          "icon": WeatherIcons.day_sunny // 晴天图标
        },
        "上海": {
          "temp": "19℃",
          "status": "阴",
          "humidity": "60%",
          "icon": WeatherIcons.day_cloudy // 阴天图标
        }
      };
    
      // 当前显示的城市（默认北京）
      String _currentCity = "北京";
      // 本地存储三方库实例（用于存储最近查看的城市）
      late SharedPreferences _prefs;
    
      // 页面初始化：加载本地存储的最近查看城市，优先显示上次查看的城市
      @override
      void initState() {
        super.initState();
        _initLocalStorage(); // 初始化本地存储
      }
    
      // 初始化shared_preferences三方库，读取鸿蒙本地存储的城市数据
      Future<void> _initLocalStorage() async {
        // 获取本地存储实例（鸿蒙端自动适配存储路径，无需额外配置）
        _prefs = await SharedPreferences.getInstance();
        // 读取本地存储的最近城市，若没有则使用默认城市（北京）
        setState(() {
          _currentCity = _prefs.getString('last_city') ?? "北京";
        });
        // 提示用户加载成功（鸿蒙端原生提示样式）
        Fluttertoast.showToast(msg: "已加载最近查看城市");
      }
    
      // 切换城市（点击城市按钮触发，同时保存到本地存储）
      void _switchCity(String city) {
        if (city == _currentCity) {
          // 若点击的是当前城市，提示用户无需切换
          Fluttertoast.showToast(msg: "当前已显示$city天气");
          return;
        }
        // 更新当前城市，刷新页面
        setState(() {
          _currentCity = city;
        });
        // 调用本地存储三方库，保存当前城市到鸿蒙本地（持久化，重启不丢失）
        _prefs.setString('last_city', city);
        // 提示用户城市切换成功
        Fluttertoast.showToast(msg: "已切换到$city");
      }
    
      @override
      Widget build(BuildContext context) {
        // 获取当前城市的天气数据（从预设数据中读取）
        final currentWeather = _weatherData[_currentCity]!;
        return Scaffold(
          // 鸿蒙风格AppBar，标题居中，贴合鸿蒙原生UI
          appBar: AppBar(
            title: const Text("Flutter鸿蒙6.0简易天气"),
            centerTitle: true,
            backgroundColor: const Color(0xFF007DFF), // 鸿蒙标准蓝色
          ),
          // 页面主体内容（垂直布局，包含城市切换、天气展示）
          body: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                // 1. 城市切换按钮（横向布局，北京、上海两个按钮）
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    // 北京按钮
                    ElevatedButton(
                      // 点击切换到北京，调用_switchCity方法
                      onPressed: () => _switchCity("北京"),
                      // 若当前城市是北京，按钮高亮（鸿蒙主题色），否则灰色
                      style: ElevatedButton.styleFrom(
                        backgroundColor: _currentCity == "北京" 
                            ? const Color(0xFF007DFF) 
                            : Colors.grey,
                        foregroundColor: Colors.white,
                      ),
                      child: const Text("北京"),
                    ),
                    const SizedBox(width: 20), // 按钮间距
                    // 上海按钮（逻辑同北京按钮）
                    ElevatedButton(
                      onPressed: () => _switchCity("上海"),
                      style: ElevatedButton.styleFrom(
                        backgroundColor: _currentCity == "上海" 
                            ? const Color(0xFF007DFF) 
                            : Colors.grey,
                        foregroundColor: Colors.white,
                      ),
                      child: const Text("上海"),
                    ),
                  ],
                ),
                const SizedBox(height: 40), // 间距
    
                // 2. 天气图标（三方库weather_icons提供，根据天气状态显示）
                Icon(
                  currentWeather["icon"],
                  size: 120, // 图标大小
                  color: const Color(0xFF007DFF), // 鸿蒙主题色，贴合系统风格
                ),
                const SizedBox(height: 20), // 间距
    
                // 3. 当前城市温度（大号字体，突出显示）
                Text(
                  currentWeather["temp"],
                  style: const TextStyle(
                    fontSize: 60,
                    fontWeight: FontWeight.bold,
                    color: Color(0xFF007DFF),
                  ),
                ),
                const SizedBox(height: 10), // 间距
    
                // 4. 天气状态（如晴、阴）
                Text(
                  currentWeather["status"],
                  style: const TextStyle(
                    fontSize: 24,
                    color: Colors.grey[700],
                  ),
                ),
                const SizedBox(height: 30), // 间距
    
                // 5. 湿度信息（显示当前城市湿度）
                Text(
                  "湿度：${currentWeather["humidity"]}",
                  style: const TextStyle(
                    fontSize: 20,
                    color: Colors.grey[600],
                  ),
                ),
              ],
            ),
          ),
          // 底部导航栏（贴合鸿蒙原生底部导航样式，可扩展更多页面）
          bottomNavigationBar: BottomNavigationBar(
            currentIndex: 0,
            selectedItemColor: const Color(0xFF007DFF), // 鸿蒙主题色
            unselectedItemColor: Colors.grey,
            type: BottomNavigationBarType.fixed,
            items: const [
              BottomNavigationBarItem(
                icon: Icon(Icons.cloud),
                label: '天气',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.location_on),
                label: '城市',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.settings),
                label: '设置',
              ),
            ],
          ),
        );
      }
    }`第四步：在鸿蒙6.0(API20+)上运行项目1. 连接鸿蒙设备确保设备已开启USB调试，电脑成功识别设备；若使用模拟器，需确保模拟器为鸿蒙6.0及以上版本，终端执行以下命令检查设备连接状态：`flutter devices`✅ 若能看到鸿蒙设备（标注为HarmonyOS或ohos），说明连接成功；若出现设备无法识别，可检查数据线、开发者模式是否开启，或重新安装鸿蒙设备驱动。2. 运行Flutter项目终端执行运行命令（若需快速调试，可添加--use-application-binary参数，减少构建时间）：`flutter run
    # 快速调试命令（原生代码无改动时使用）
    # flutter run --use-application-binary=build/app/outputs/apk/debug/app-debug.apk`✅ 编译完成后，**鸿蒙6.0设备会自动安装并启动APP**（首次编译约1-2分钟，后续热重载秒级更新）；若出现签名错误，可通过DevEco Studio打开ohos目录，配置自动签名后重新运行。第五步：功能测试（验证三方库+鸿蒙适配）第六步：打包鸿蒙兼容APK（可直接安装到鸿蒙设备）执行打包命令，生成鸿蒙6.0可安装的APK（发布版，无debug标签，适配鸿蒙API20+）：`flutter build apk --release`打包完成路径（可直接找到APK文件）：
    `build/app/outputs/flutter-apk/app-release.apk`直接将APK发送到鸿蒙设备，点击安装即可使用；若需生成鸿蒙原生HAR包，可进入ohos目录，通过DevEco Studio打包生成，适配鸿蒙原生生态部署。核心知识点总结常见问题解决（新手必看）结语本教程完整实现了**Flutter+鸿蒙6.0(API20+)**集成三方库的实战案例，简易天气APP项目简单实用、新手友好，涵盖了Flutter开发鸿蒙的核心知识点——三方库集成、本地存储、鸿蒙UI适配、打包发布，同时融入了鸿蒙原生工程适配技巧，非常适合鸿蒙开发者入门Flutter跨端开发。你可以基于这个项目扩展更多功能，比如对接真实天气API、添加更多城市、设置天气预警、适配鸿蒙平板/智慧屏等，进一步提升跨端开发能力。文档说明本文为标准MD格式文档，直接复制保存为`flutter_harmony_weather_demo.md`即可使用，所有代码、步骤、配置均适配**鸿蒙6.0 API20+**，代码带详细注释，新手零门槛上手；同时结合OpenHarmony SIG适配方案，避开常见适配坑点，确保项目能正常运行在鸿蒙设备上。
   
        1. **城市切换功能**：点击北京/上海按钮，能正常切换城市，调用`fluttertoast`提示切换结果，符合鸿蒙端原生提示样式。
   
        2. **本地存储功能**：切换城市后，杀掉APP重新打开，会自动显示上次查看的城市（`shared_preferences`三方库生效，鸿蒙端存储正常）。
   
        3. **天气图标显示**：不同城市的天气状态对应不同图标（`weather_icons`三方库生效），图标大小、颜色适配鸿蒙6.0屏幕。
   
        4. **鸿蒙适配测试**：状态栏沉浸式显示、APP整体样式贴合鸿蒙6.0原生风格，无卡顿、闪退，交互流畅；底部导航栏符合鸿蒙设计规范。
   
        5. **Flutter+鸿蒙6.0适配核心**：API20+、targetSdkVersion 34即可完美兼容，无需额外修改大量代码；若需适配鸿蒙原生工程，可通过flutter create --platforms ohos . 命令快速生成鸿蒙工程目录。
   
        6. **三方库使用技巧**：选择OpenHarmony SIG已适配的三方库，`shared_preferences`（本地存储）、`fluttertoast`（提示）、`weather_icons`（图标）均完美支持鸿蒙6.0，避免使用未适配的三方库导致闪退。
   
        7. **鸿蒙端特性适配**：状态栏沉浸式、UI风格贴合鸿蒙原生蓝色主题，可通过Platform.isHarmonyOS做平台条件判断，实现更精细的适配优化；底部导航栏、按钮样式符合鸿蒙设计规范，提升用户体验。
   
        8. **跨端优势体现**：本文编写的代码，无需修改，可直接运行在鸿蒙、安卓、iOS等平台，真正实现“一套代码，多端运行”，降低鸿蒙开发者跨端开发成本。
   
        9. **开发流程梳理**：创建项目→添加三方库→编写代码（适配鸿蒙样式）→生成鸿蒙工程（可选）→运行鸿蒙设备→测试功能→打包发布，新手可按此流程逐步上手。
   
        10. **鸿蒙设备无法识别**：检查开发者模式、USB调试是否开启，更换数据线，或重新安装鸿蒙设备驱动；若使用模拟器，确保模拟器版本为鸿蒙6.0及以上。
   
        11. **三方库报错/适配失败**：执行`flutter pub get`重新安装依赖；若仍报错，替换为OpenHarmony SIG维护的适配版本，参考地址：https://atomgit.com/openharmony-tpc/flutter_packages；纯Dart实现的三方库通常可直接使用，无需额外适配。
   
        12. **APP闪退**：确认Flutter SDK≥3.16.0、鸿蒙系统≥6.0；检查三方库版本是否兼容，避免使用过高/过低版本；若涉及鸿蒙原生交互，检查签名配置是否正确。
   
        13. **运行时提示签名错误**：用DevEco Studio打开项目中的ohos/目录，进入File > Project Structure > Modules，选择ohos项目，配置自动签名（推荐），或手动生成密钥库配置签名，配置完成后重新执行flutter run。
   
        14. **热重载失效**：确保未修改原生代码，或使用--use-application-binary参数，减少构建时间，提升调试效率；若仍失效，重启项目或重新连接设备。