前言
弹窗对话框是OA系统中进行用户交互的重要组件，它用于确认操作、展示信息、收集输入等场景。一个优秀的弹窗组件需要支持多种类型、自定义内容、动画效果等功能。本文将详细介绍如何使用Flutter和OpenHarmony开发一套功能完善的弹窗对话框组件。
组件功能设计
弹窗对话框组件需要支持确认框、提示框、输入框、选择框等多种类型。组件需要支持自定义标题、内容、按钮，以及自定义内容区域。在交互上，需要支持点击遮罩关闭、按钮回调、键盘事件等。动画效果包括淡入淡出、缩放、滑入等。
Flutter端实现
定义弹窗类型和配置：
dart
enum DialogType { alert, confirm, prompt, custom }
class DialogConfig {
final String? title;
final String? message;
final String? confirmText;
final String? cancelText;
final bool barrierDismissible;
final Widget? customContent;
DialogConfig({
this.title,
this.message,
this.confirmText = '确定',
this.cancelText = '取消',
this.barrierDismissible = true,
this.customContent,
});
}DialogConfig定义弹窗配置，支持标题、消息、按钮文字等自定义。barrierDismissible控制点击遮罩是否关闭弹窗，customContent支持自定义内容。
确认弹窗实现：
dart
class DialogHelper {
static Future<bool?> showConfirm(
BuildContext context, {
String? title,
required String message,
String confirmText = '确定',
String cancelText = '取消',
}) {
return showDialog<bool>(
context: context,
builder: (context) => AlertDialog(
title: title != null ? Text(title) : null,
content: Text(message),
actions: [
TextButton(
onPressed: () => Navigator.pop(context, false),
child: Text(cancelText),
),
TextButton(
onPressed: () => Navigator.pop(context, true),
child: Text(confirmText),
),
],
),
);
}
}DialogHelper提供静态方法显示各类弹窗，showConfirm返回Future<bool?>，用户点击确定返回true，点击取消返回false。
输入弹窗实现：
dart
static Future<String?> showPrompt(
BuildContext context, {
String? title,
String? hint,
String? initialValue,
String confirmText = '确定',
String cancelText = '取消',
}) {
final controller = TextEditingController(text: initialValue);
return showDialog<String>(
context: context,
builder: (context) => AlertDialog(
title: title != null ? Text(title) : null,
content: TextField(
controller: controller,
decoration: InputDecoration(hintText: hint),
autofocus: true,
),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text(cancelText),
),
TextButton(
onPressed: () => Navigator.pop(context, controller.text),
child: Text(confirmText),
),
],
),
);
}输入弹窗包含文本输入框，autofocus自动获取焦点。确定时返回输入内容，取消时返回null。
底部选择弹窗：
dart
static Future<T?> showBottomSheet<T>(
BuildContext context, {
String? title,
required List<T> options,
required String Function(T) labelBuilder,
T? selectedValue,
}) {
return showModalBottomSheet<T>(
context: context,
builder: (context) => Column(
mainAxisSize: MainAxisSize.min,
children: [
if (title != null)
Padding(
padding: EdgeInsets.all(16),
child: Text(title, style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500)),
),
...options.map((option) => ListTile(
title: Text(labelBuilder(option)),
trailing: option == selectedValue ? Icon(Icons.check, color: Colors.blue) : null,
onTap: () => Navigator.pop(context, option),
)),
SizedBox(height: 16),
],
),
);
}底部选择弹窗显示选项列表，当前选中项显示勾选图标。泛型设计支持任意类型的选项数据。
OpenHarmony鸿蒙端实现
确认弹窗实现：
typescript
class DialogHelper {
static showConfirm(options: {
title?: string
message: string
confirmText?: string
cancelText?: string
onConfirm?: () => void
onCancel?: () => void
}) {
AlertDialog.show({
title: options.title,
message: options.message,
primaryButton: {
value: options.cancelText || '取消',
action: () => options.onCancel?.()
},
secondaryButton: {
value: options.confirmText || '确定',
action: () => options.onConfirm?.()
}
})
}
}鸿蒙使用AlertDialog.show显示系统弹窗，primaryButton和secondaryButton定义两个按钮。回调函数处理用户操作。
输入弹窗实现：
typescript
static showPrompt(options: {
title?: string
placeholder?: string
defaultValue?: string
onConfirm?: (value: string) => void
onCancel?: () => void
}) {
let inputValue = options.defaultValue || ''
CustomDialog.show({
builder: () => {
Column() {
if (options.title) {
Text(options.title)
.fontSize(18)
.fontWeight(FontWeight.Medium)
.margin({ bottom: 16 })
}
TextInput({ placeholder: options.placeholder, text: inputValue })
.width('100%')
.height(44)
.onChange((value: string) => {
inputValue = value
})
Row() {
Button('取消')
.type(ButtonType.Normal)
.backgroundColor('#F5F5F5')
.fontColor('#666666')
.layoutWeight(1)
.onClick(() => {
options.onCancel?.()
})
Button('确定')
.type(ButtonType.Normal)
.backgroundColor('#1890FF')
.fontColor(Color.White)
.layoutWeight(1)
.margin({ left: 12 })
.onClick(() => {
options.onConfirm?.(inputValue)
})
}
.width('100%')
.margin({ top: 24 })
}
.padding(24)
.backgroundColor(Color.White)
.borderRadius(12)
}
})
}输入弹窗使用CustomDialog自定义内容，包含标题、输入框和按钮。onChange监听输入变化，确定时传递输入值。
底部选择弹窗：
typescript
static showActionSheet<T>(options: {
title?: string
items: Array<{ label: string, value: T }>
selectedValue?: T
onSelect?: (value: T) => void
}) {
ActionSheet.show({
title: options.title,
sheets: options.items.map(item => ({
title: item.label,
action: () => options.onSelect?.(item.value)
}))
})
}底部选择弹窗使用ActionSheet显示选项列表，sheets数组定义各个选项。点击选项触发onSelect回调。
加载弹窗：
typescript
static showLoading(message: string = '加载中...') {
CustomDialog.show({
builder: () => {
Row() {
LoadingProgress()
.width(32)
.height(32)
Text(message)
.fontSize(14)
.fontColor('#666666')
.margin({ left: 12 })
}
.padding(24)
.backgroundColor(Color.White)
.borderRadius(8)
},
autoCancel: false
})
}
static hideLoading() {
CustomDialog.close()
}加载弹窗显示加载动画和提示文字，autoCancel设为false防止点击遮罩关闭。hideLoading方法关闭弹窗。
Toast提示：
typescript
static showToast(message: string, duration: number = 2000) {
promptAction.showToast({
message: message,
duration: duration
})
}Toast提示使用promptAction.showToast显示轻量级提示，duration控制显示时长。适合显示操作结果等简短信息。
总结
本文详细介绍了Flutter和OpenHarmony平台上弹窗对话框组件的开发方法。弹窗是OA系统中进行用户交互的重要组件，需要支持确认框、输入框、选择框等多种类型。Flutter使用showDialog和showModalBottomSheet，鸿蒙使用AlertDialog和CustomDialog。开发者需要注意弹窗的交互设计和回调处理。
欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net