【OpenHarmony】开源鸿蒙跨平台实践Day 1 初识Flutter
![]()
学习要求：了解相关信息即可 （概念·优势·要求）
简介：
Flutter 是由 Google 开发的开源 UI 软件开发工具包（SDK），用于构建跨平台应用程序。它支持从单一代码库开发 iOS、Android、Web 和桌面应用，具有高性能和高度定制化的特点。
核心特性
跨平台支持
Flutter 使用 Dart 语言编写，通过 Skia 图形引擎直接渲染 UI，避免了平台原生控件的依赖，确保在不同平台上表现一致。
热重载（Hot Reload）
开发过程中修改代码后，无需重启应用即可实时查看更改效果，显著提升开发效率。
丰富的组件库
提供大量预构建的 Material Design（Android 风格）和 Cupertino（iOS 风格）组件，支持快速构建美观的界面。
高性能
高性能：Flutter 应用编译为原生 ARM 代码，运行效率接近原生应用。热重载功能可在 1 秒内更新代码变更，极大提升开发效率。动画可实现 60fps 的流畅度，适合复杂交互场景。
开发环境搭建
安装 Flutter SDK
从 Flutter 官网 下载 SDK 并解压，将bin目录添加到系统环境变量。配置 IDE
推荐使用 Android Studio 或 VS Code，安装 Flutter 和 Dart 插件以支持代码提示和调试。运行检查
执行flutter doctor命令检查环境依赖（如 Android SDK、Xcode 等），并根据提示安装缺失工具。
基本项目结构
my_app/ ├── lib/ # 主代码目录 │ └── main.dart # 应用入口文件 ├── pubspec.yaml # 依赖管理和资源配置文件 └── android/ # Android 平台相关配置编写第一个应用
以下是一个简单的计数器示例：
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Flutter Demo')), body: Center(child: CounterWidget()), ), ); } } class CounterWidget extends StatefulWidget { @override _CounterWidgetState createState() => _CounterWidgetState(); } class _CounterWidgetState extends State<CounterWidget> { int _count = 0; void _increment() { setState(() => _count++); } @override Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('Count: $_count'), ElevatedButton(onPressed: _increment, child: Text('Increment')), ], ); } }状态管理
Flutter 提供多种状态管理方案：
setState：适用于局部状态（如计数器）。- Provider：依赖注入库，适合中小型应用。
- Riverpod：Provider 的增强版，更灵活。
- Bloc：基于事件驱动的状态管理，适合复杂逻辑。
插件与包管理
通过pubspec.yaml添加依赖，例如使用http包发起网络请求：
dependencies: http: ^0.13.3运行flutter pub get安装依赖后，代码中导入即可使用：
import 'package:http/http.dart' as http;调试与发布
调试工具
- Flutter Inspector：检查 UI 布局和性能。
- DevTools：分析内存、网络和性能问题。
构建发布版
- Android：
flutter build apk --release - iOS：
flutter build ios --release并通过 Xcode 归档导出。
适用场景与限制
优势场景
- 需要快速开发跨平台应用。
- 追求高度定制化 UI 设计。
- 期望高性能和热重载支持。
局限性
- 某些平台特定功能需依赖原生代码（通过 Platform Channels 调用）。
- Web 端性能可能逊于纯前端框架（如 React）。
学习资源
- 官方文档：flutter.dev/docs
- 社区库：pub.dev
Flutter 凭借其高效的开发流程和强大的性能，已成为现代跨平台开发的主流选择之一。
Flutter 开发环境搭建
安装 Flutter SDK 前需确保系统满足最低要求：
- Windows 10 及以上版本（64位）
- macOS 10.14 及以上版本
- Linux 发行版需支持 glibc 2.28 以上
安装流程
下载官方 SDK 压缩包后解压至目标目录：
# macOS/Linux 示例路径 unzip ~/Downloads/flutter_macos_3.16.0-stable.zip -d ~/development环境变量配置示例（Linux/macOS）：
echo 'export PATH="$PATH:$HOME/development/flutter/bin"' >> ~/.zshrc source ~/.zshrc验证安装完整性：
flutter doctor该命令会检查所有依赖项状态，缺失项会显示修复建议。
项目目录结构解析
典型 Flutter 项目包含以下关键目录：
lib/：存放所有 Dart 源代码main.dart必须包含程序入口函数main()
pubspec.yaml：定义项目元数据和依赖- 平台特定目录（android/, ios/）包含原生层配置
计数器应用实现要点
状态管理使用setState的注意事项：
- 仅适用于当前组件内部状态变化
- 调用时会触发组件重建
- 复杂状态建议使用 Provider 等方案
UI 构建关键组件：
Scaffold( appBar: AppBar(title: Text('标题')), body: Center(child: Text('内容')), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, child: Icon(Icons.add), ), )状态管理方案对比
Provider基础用法示例：
// 定义数据模型 class CounterModel extends ChangeNotifier { int _count = 0; int get count => _count; void increment() { _count++; notifyListeners(); } } // 在组件中访问 Consumer<CounterModel>( builder: (context, model, child) { return Text('${model.count}'); } )依赖管理实践
添加依赖的规范流程：
- 在 pubspec.yaml 中声明依赖
- 执行
flutter pub get - 通过 import 语句引入包
常见依赖示例：
dependencies: dio: ^5.0.0 # 网络请求 get: ^4.6.5 # 路由管理 hive: ^2.2.3 # 本地数据库调试与性能优化
DevTools 主要功能模块：
- Performance：帧率分析
- Memory：内存占用监控
- Network：请求跟踪
- Widget Inspector：UI 结构检查
启动方式：
flutter pub global activate devtools flutter pub global run devtools发布准备事项
构建发布版本前需完成：
- 配置应用图标（替换 android/app/src/main/res/ 和 ios/Runner/Assets.xcassets 中的图片）
- 更新 pubspec.yaml 中的版本号
- 添加应用签名（Android 需 keystore，iOS 需开发者账号）
构建命令示例：
flutter build apk --release # Android APK flutter build ios --release # iOS IPA欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net/