Flutter for OpenHarmony 实战：底部弹窗实现
组件封装技术将底部弹窗封装为独立的组件，提高代码复用性和可维护性。使用类提供静态方法，简化底部弹窗的调用方式，减少重复代码。异步编程技术使用和异步返回底部弹窗的操作结果，便于调用方进行后续处理。使用语法糖，使异步代码更易读、易维护。状态管理技术使用setState()更新界面状态，实时显示底部弹窗的操作结果。通过回调函数和异步返回值，实现底部弹窗与调用方的状态通信。导航管理技术使用关闭底部弹窗并返
·
欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net
前言：跨生态开发的新机遇
在移动开发领域，我们总是面临着选择与适配。今天，你的Flutter应用在Android和iOS上跑得正欢，明天可能就需要考虑一个新的平台：HarmonyOS（鸿蒙）。这不是一道选答题，而是很多团队正在面对的现实。
Flutter的优势很明确——写一套代码，就能在两个主要平台上运行，开发体验流畅。而鸿蒙代表的是下一个时代的互联生态，它不仅仅是手机系统，更着眼于未来全场景的体验。将现有的Flutter应用适配到鸿蒙，听起来像是一个“跨界”任务，但它本质上是一次有价值的技术拓展：让产品触达更多用户，也让技术栈覆盖更广。
不过，这条路走起来并不像听起来那么简单。Flutter和鸿蒙，从底层的架构到上层的工具链，都有着各自的设计逻辑。会遇到一些具体的问题：代码如何组织？原有的功能在鸿蒙上如何实现？那些平台特有的能力该怎么调用？更实际的是，从编译打包到上架部署，整个流程都需要重新摸索。
这篇文章想做的，就是把这些我们趟过的路、踩过的坑，清晰地摊开给你看。我们不会只停留在“怎么做”，还会聊到“为什么得这么做”，以及“如果出了问题该往哪想”。这更像是一份实战笔记，源自真实的项目经验，聚焦于那些真正卡住过我们的环节。
无论你是在为一个成熟产品寻找新的落地平台，还是从一开始就希望构建能面向多端的应用，这里的思路和解决方案都能提供直接的参考。理解了两套体系之间的异同，掌握了关键的衔接技术，不仅能完成这次迁移，更能积累起应对未来技术变化的能力。
混合工程结构深度解析
项目目录架构
当Flutter项目集成鸿蒙支持后，典型的项目结构会发生显著变化。以下是经过ohos_flutter插件初始化后的项目结构：
my_flutter_harmony_app/
├── lib/ # Flutter业务代码（基本不变）
│ ├── main.dart # 应用入口
│ ├── home_page.dart # 首页
│ └── utils/
│ └── platform_utils.dart # 平台工具类
├── pubspec.yaml # Flutter依赖配置
├── ohos/ # 鸿蒙原生层（核心适配区）
│ ├── entry/ # 主模块
│ │ └── src/main/
│ │ ├── ets/ # ArkTS代码
│ │ │ ├── MainAbility/
│ │ │ │ ├── MainAbility.ts # 主Ability
│ │ │ │ └── MainAbilityContext.ts
│ │ │ └── pages/
│ │ │ ├── Index.ets # 主页面
│ │ │ └── Splash.ets # 启动页
│ │ ├── resources/ # 鸿蒙资源文件
│ │ │ ├── base/
│ │ │ │ ├── element/ # 字符串等
│ │ │ │ ├── media/ # 图片资源
│ │ │ │ └── profile/ # 配置文件
│ │ │ └── en_US/ # 英文资源
│ │ └── config.json # 应用核心配置
│ ├── ohos_test/ # 测试模块
│ ├── build-profile.json5 # 构建配置
│ └── oh-package.json5 # 鸿蒙依赖管理
└── README.md
展示效果图片
flutter 实时预览 效果展示
运行到鸿蒙虚拟设备中效果展示
目录
功能代码实现
底部弹窗组件
底部弹窗组件是功能的核心，实现了灵活的底部弹窗显示和管理功能。
核心设计
- 使用
showModalBottomSheet作为基础API - 封装
BottomSheetWidget类，支持自定义标题、内容、按钮文本 - 提供
BottomSheetManager类，简化底部弹窗的调用方式 - 支持异步回调，获取用户的选择结果
- 支持控制是否显示取消按钮
- 支持自定义底部弹窗高度
- 提供选项选择专用的底部弹窗
代码实现
import 'package:flutter/material.dart';
class BottomSheetWidget extends StatelessWidget {
final String title;
final Widget content;
final String confirmText;
final String cancelText;
final Function() onConfirm;
final Function() onCancel;
final bool showCancel;
final double? height;
const BottomSheetWidget({
super.key,
required this.title,
required this.content,
this.confirmText = '确定',
this.cancelText = '取消',
required this.onConfirm,
required this.onCancel,
this.showCancel = true,
this.height,
});
Widget build(BuildContext context) {
return Container(
height: height ?? 300,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(
top: Radius.circular(16.0),
),
),
child: Column(
children: [
// 顶部指示器
Container(
margin: const EdgeInsets.symmetric(vertical: 12.0),
width: 40.0,
height: 4.0,
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(2.0),
),
),
// 标题
if (title.isNotEmpty)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
child: Text(
title,
style: const TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
),
),
),
// 内容
Expanded(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: content,
),
),
// 按钮
Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
children: [
if (showCancel)
Expanded(
child: OutlinedButton(
onPressed: onCancel,
child: Text(cancelText),
),
),
if (showCancel)
const SizedBox(width: 12.0),
Expanded(
child: ElevatedButton(
onPressed: onConfirm,
child: Text(confirmText),
),
),
],
),
),
],
),
);
}
}
class BottomSheetManager {
static Future<bool> showBottomSheet(
BuildContext context,
{
required String title,
required Widget content,
String confirmText = '确定',
String cancelText = '取消',
bool showCancel = true,
double? height,
}
) async {
return await showModalBottomSheet<bool>(
context: context,
isScrollControlled: true,
backgroundColor: Colors.transparent,
builder: (BuildContext context) {
return BottomSheetWidget(
title: title,
content: content,
confirmText: confirmText,
cancelText: cancelText,
onConfirm: () {
Navigator.of(context).pop(true);
},
onCancel: () {
Navigator.of(context).pop(false);
},
showCancel: showCancel,
height: height,
);
},
) ?? false;
}
static Future<String?> showSelectionBottomSheet(
BuildContext context,
{
required String title,
required List<String> options,
String cancelText = '取消',
}
) async {
String? selectedOption;
await showModalBottomSheet(
context: context,
isScrollControlled: true,
backgroundColor: Colors.transparent,
builder: (BuildContext context) {
return Container(
height: 350,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(
top: Radius.circular(16.0),
),
),
child: Column(
children: [
// 顶部指示器
Container(
margin: const EdgeInsets.symmetric(vertical: 12.0),
width: 40.0,
height: 4.0,
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.circular(2.0),
),
),
// 标题
if (title.isNotEmpty)
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
child: Text(
title,
style: const TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.bold,
),
),
),
// 选项列表
Expanded(
child: ListView.builder(
itemCount: options.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(options[index]),
onTap: () {
selectedOption = options[index];
Navigator.of(context).pop();
},
);
},
),
),
// 取消按钮
Padding(
padding: const EdgeInsets.all(16.0),
child: ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
},
child: Text(cancelText),
),
),
],
),
);
},
);
return selectedOption;
}
}
技术要点
-
组件封装：将底部弹窗封装为独立组件，提高代码复用性和可维护性。
-
异步处理：使用
Future<bool>和Future<String?>异步返回用户的选择结果，便于调用方进行后续处理。 -
灵活性：支持自定义标题、内容、按钮文本、高度等，满足不同场景的需求。
-
状态管理：通过回调函数和异步返回值，实现底部弹窗与调用方的状态通信。
-
导航管理：使用
Navigator.of(context).pop()关闭底部弹窗并返回结果。 -
布局设计：实现了美观的底部弹窗布局，包括顶部指示器、标题、内容区域和按钮区域。
-
专用组件：提供了选项选择专用的底部弹窗，简化列表选择场景的开发。
首页集成使用
在首页中集成底部弹窗组件，展示不同类型的底部弹窗示例。
核心设计
- 添加
AppBar：设置标题和背景色，提高应用的美观度 - 实现三个按钮：分别用于显示基本底部弹窗、自定义内容底部弹窗和选项选择底部弹窗
- 添加结果显示区域：实时显示底部弹窗的操作结果
- 使用
ElevatedButton作为操作按钮，提高用户体验
代码实现
import 'package:flutter/material.dart';
import 'components/bottom_sheet.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter for openHarmony',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
debugShowCheckedModeBanner: false,
home: const MyHomePage(title: 'Flutter for openHarmony'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String _bottomSheetResult = '';
Future<void> _showBasicBottomSheet() async {
final result = await BottomSheetManager.showBottomSheet(
context,
title: '提示',
content: const Text('这是一个基本的底部弹窗，用于显示简单信息。'),
);
setState(() {
_bottomSheetResult = '基本底部弹窗结果: ${result ? '确定' : '取消'}';
});
}
Future<void> _showCustomBottomSheet() async {
final result = await BottomSheetManager.showBottomSheet(
context,
title: '自定义内容',
height: 400,
content: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('请选择您的兴趣爱好：'),
const SizedBox(height: 16),
Row(
children: [
Expanded(
child: CheckboxListTile(
title: const Text('阅读'),
value: false,
onChanged: (value) {},
),
),
Expanded(
child: CheckboxListTile(
title: const Text('运动'),
value: false,
onChanged: (value) {},
),
),
],
),
Row(
children: [
Expanded(
child: CheckboxListTile(
title: const Text('音乐'),
value: false,
onChanged: (value) {},
),
),
Expanded(
child: CheckboxListTile(
title: const Text('旅游'),
value: false,
onChanged: (value) {},
),
),
],
),
],
),
confirmText: '保存',
cancelText: '取消',
);
setState(() {
_bottomSheetResult = '自定义底部弹窗结果: ${result ? '保存' : '取消'}';
});
}
Future<void> _showSelectionBottomSheet() async {
final result = await BottomSheetManager.showSelectionBottomSheet(
context,
title: '选择城市',
options: ['北京', '上海', '广州', '深圳', '杭州', '成都', '武汉', '西安'],
);
setState(() {
_bottomSheetResult = '选择底部弹窗结果: ${result ?? '未选择'}';
});
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('底部弹窗示例'),
backgroundColor: Colors.deepPurple,
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const SizedBox(height: 20),
const Text(
'底部弹窗示例',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.deepPurple,
),
textAlign: TextAlign.center,
),
const SizedBox(height: 30),
ElevatedButton(
onPressed: _showBasicBottomSheet,
child: const Text('显示基本底部弹窗'),
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: _showCustomBottomSheet,
child: const Text('显示自定义内容底部弹窗'),
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: _showSelectionBottomSheet,
child: const Text('显示选项选择底部弹窗'),
),
const SizedBox(height: 40),
const Text(
'底部弹窗结果:',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 8),
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(8),
),
child: Text(
_bottomSheetResult,
style: const TextStyle(fontSize: 14),
),
),
],
),
),
);
}
}
技术要点
-
异步处理：使用
async/await处理底部弹窗的异步返回结果。 -
状态管理：使用
setState()更新界面状态，实时显示底部弹窗的操作结果。 -
布局设计：使用
Column和Padding实现清晰的垂直布局，提高界面的可读性。 -
用户体验：使用
ElevatedButton作为操作按钮，提供清晰的视觉反馈。 -
主题一致性：设置
AppBar的背景色为Colors.deepPurple，与应用主题保持一致。 -
自定义内容：展示了如何在底部弹窗中添加复杂的自定义内容，如复选框列表。
-
选项选择：展示了如何使用选项选择专用的底部弹窗，简化列表选择场景的开发。
开发中容易遇到的问题
-
上下文（Context）传递问题
- 问题描述：在某些情况下，可能会遇到无法获取正确的
BuildContext来显示底部弹窗的问题。 - 解决方案：确保在
build方法内部或通过正确的上下文传递来调用底部弹窗显示方法，避免在初始化方法或异步回调中直接使用可能无效的上下文。
- 问题描述：在某些情况下，可能会遇到无法获取正确的
-
异步结果处理问题
- 问题描述：如果不正确处理底部弹窗的异步返回结果，可能会导致应用崩溃或逻辑错误。
- 解决方案：使用
async/await正确处理Future<bool>或Future<String?>返回值，并添加空值检查，例如使用?? false来处理可能的null结果。
-
底部弹窗关闭问题
- 问题描述：如果忘记调用
Navigator.of(context).pop()，底部弹窗可能无法正常关闭。 - 解决方案：确保在底部弹窗的确认和取消回调中都调用
Navigator.of(context).pop()方法，并传递相应的结果值。
- 问题描述：如果忘记调用
-
布局溢出问题
- 问题描述：如果底部弹窗内容过长，可能会导致布局溢出或显示不全。
- 解决方案：对于长内容，可以在
content中使用SingleChildScrollView或限制内容长度，确保底部弹窗在不同屏幕尺寸上都能正常显示。
-
高度设置问题
- 问题描述：如果底部弹窗高度设置不当，可能会导致内容显示不全或占据过多屏幕空间。
- 解决方案：根据内容的实际需要设置合适的高度，或使用默认高度，确保底部弹窗既能够显示完整内容，又不会占据过多屏幕空间。
-
背景透明度问题
- 问题描述：底部弹窗的背景可能会显示默认的半透明遮罩，影响视觉效果。
- 解决方案：在调用
showModalBottomSheet时设置backgroundColor: Colors.transparent，可以自定义底部弹窗的背景效果。
-
多次点击问题
- 问题描述：用户快速多次点击按钮可能导致多个底部弹窗叠加显示。
- 解决方案：可以添加点击状态管理，在底部弹窗显示期间禁用按钮，或使用防抖技术防止快速多次点击。
总结开发中用到的技术点
-
组件封装技术
- 将底部弹窗封装为独立的
BottomSheetWidget组件，提高代码复用性和可维护性。 - 使用
BottomSheetManager类提供静态方法，简化底部弹窗的调用方式，减少重复代码。
- 将底部弹窗封装为独立的
-
异步编程技术
- 使用
Future<bool>和Future<String?>异步返回底部弹窗的操作结果，便于调用方进行后续处理。 - 使用
async/await语法糖，使异步代码更易读、易维护。
- 使用
-
状态管理技术
- 使用
setState()更新界面状态，实时显示底部弹窗的操作结果。 - 通过回调函数和异步返回值，实现底部弹窗与调用方的状态通信。
- 使用
-
导航管理技术
- 使用
Navigator.of(context).pop()关闭底部弹窗并返回结果。 - 利用 Flutter 的导航系统管理底部弹窗的显示和隐藏。
- 使用
-
布局设计技术
- 使用
Column和Padding实现清晰的垂直布局，提高界面的可读性。 - 使用
ElevatedButton和OutlinedButton作为操作按钮，提供清晰的视觉反馈。 - 使用
Container和BoxDecoration实现底部弹窗的圆角背景和顶部指示器。 - 使用
ListView.builder实现选项选择底部弹窗的列表布局。
- 使用
-
主题配置技术
- 使用
ThemeData和ColorScheme.fromSeed创建统一的应用主题。 - 设置
AppBar的背景色，与应用主题保持一致，提高视觉统一性。
- 使用
-
参数化设计技术
- 通过构造函数参数实现底部弹窗的高度可定制性，支持自定义标题、内容、按钮文本、高度等。
- 使用默认参数值，简化常见场景的调用方式。
-
空安全技术
- 使用空值运算符
??处理可能的null结果，提高代码的健壮性。 - 使用
String?类型处理可能为空的字符串返回值。 - 遵循 Dart 的空安全最佳实践，避免空指针异常。
- 使用空值运算符
-
用户体验优化技术
- 提供明确的视觉反馈，如按钮点击效果和底部弹窗动画。
- 实时显示操作结果，增强用户对系统状态的感知。
- 支持不同类型的底部弹窗，满足不同场景的用户交互需求。
- 实现美观的底部弹窗布局，包括顶部指示器、标题、内容区域和按钮区域。
-
跨平台兼容性技术
- 使用 Flutter 标准组件和 API，确保代码在不同平台上的一致性。
- 避免使用平台特定的功能，确保应用在 OpenHarmony 等平台上正常运行。
-
专用组件设计技术
- 提供了选项选择专用的底部弹窗，简化列表选择场景的开发。
- 通过封装常用场景的底部弹窗，提高开发效率和代码质量。
欢迎加入开源鸿蒙跨平台社区： https://openharmonycrossplatform.csdn.net
开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。
更多推荐
11
0- 0
已为社区贡献7条内容
所有评论(0)