Flutter鸿蒙next 封装对话框详解

✅近期推荐：求职神器

https://bbs.csdn.net/topics/619384540

🔥欢迎大家订阅系列专栏：flutter_鸿蒙next
💬淼学派语录：只有不断的否认自己和肯定自己，才能走出弯曲不平的泥泞路，因为平坦的大路，太tm无趣了！

写在前面

在 Flutter 中，对话框（Dialog）是非常常用的 UI 组件，可以用来展示信息、确认操作或者输入数据。通过封装自定义对话框，我们可以提升代码的可复用性和可维护性。本文将详细介绍如何在 Flutter 中封装一个对话框，并提供示例代码。

1. 创建 Flutter 项目

首先，确保你已经创建了一个 Flutter 项目。如果还没有，可以通过以下命令创建：

flutter create dialog_example
cd dialog_example

2. 添加依赖

在 pubspec.yaml 文件中添加必要的依赖（如果需要额外的 UI 库，可以在这里添加）。我们以标准 Flutter 组件为例，所以不需要额外依赖。

3. 封装对话框

我们将创建一个简单的自定义对话框类。这个对话框将包含标题、内容和两个按钮（确认和取消）。

3.1 创建 CustomDialog 类

在 lib 目录下创建一个新文件 custom_dialog.dart，并编写以下代码：

import 'package:flutter/material.dart';class CustomDialog {static Future<void> showDialogBox(BuildContext context, {required String title,required String content,String confirmText = "确认",String cancelText = "取消",required VoidCallback onConfirm,}) {return showDialog<void>(context: context,builder: (BuildContext context) {return AlertDialog(title: Text(title),content: Text(content),actions: <Widget>[TextButton(child: Text(cancelText),onPressed: () {Navigator.of(context).pop();},),TextButton(child: Text(confirmText),onPressed: () {onConfirm();Navigator.of(context).pop();},),],);},);}
}

3.2 代码解析

• showDialogBox 方法是一个静态方法，用于显示对话框。
• 参数：
  • context: 上下文。
  • title: 对话框标题。
  • content: 对话框内容。
  • confirmText 和 cancelText: 自定义按钮文本。
  • onConfirm: 确认按钮的回调函数。
• 使用 AlertDialog 创建对话框，包含标题、内容和操作按钮。

4. 使用自定义对话框

在 lib/main.dart 中，调用我们刚刚封装的对话框。示例代码如下：

import 'package:flutter/material.dart';
import 'custom_dialog.dart'; // 导入自定义对话框void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Dialog Example',home: Scaffold(appBar: AppBar(title: Text('Dialog Example'),),body: Center(child: ElevatedButton(onPressed: () {CustomDialog.showDialogBox(context,title: '确认操作',content: '你确定要执行此操作吗？',onConfirm: () {// 处理确认操作print('操作已确认');},);},child: Text('显示对话框'),),),),);}
}

高级封装对话框、定制样式、动画效果

1. 创建自定义对话框

首先，我们需要创建一个自定义对话框组件。在这个组件中，我们将使用 TextField 来接收用户输入。

1.1 代码实现

import 'package:flutter/material.dart';class CustomDialog extends StatelessWidget {final TextEditingController controller;final String title;CustomDialog({Key? key, required this.controller, required this.title}) : super(key: key);@overrideWidget build(BuildContext context) {return AlertDialog(title: Text(title),content: TextField(controller: controller,decoration: InputDecoration(hintText: '请输入内容',),),actions: [TextButton(onPressed: () {Navigator.of(context).pop(controller.text);},child: Text('提交'),),TextButton(onPressed: () {Navigator.of(context).pop();},child: Text('取消'),),],);}
}

1.2 解释代码

• TextEditingController: 用于控制和获取 TextField 的内容。
• AlertDialog: Flutter 提供的对话框组件，用于显示提示信息。
• TextButton: 用于实现按钮功能。

2. 样式定制

我们可以根据需要修改对话框的样式，比如背景颜色、字体等。

2.1 修改样式

在 AlertDialog 中，我们可以通过 backgroundColor 和 titleTextStyle 来定制样式。

@override
Widget build(BuildContext context) {return AlertDialog(backgroundColor: Colors.blue[50],title: Text(title,style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold),),content: TextField(controller: controller,decoration: InputDecoration(hintText: '请输入内容',border: OutlineInputBorder(),),),actions: [// 按钮部分不变],);
}

3. 动画效果

为对话框添加动画，可以使其展示更加生动。我们可以使用 showDialog 方法并结合 PageRouteBuilder 来实现。

3.1 添加动画

void _showCustomDialog(BuildContext context) {showDialog(context: context,builder: (context) {return PageRouteBuilder(pageBuilder: (context, animation, secondaryAnimation) {return FadeTransition(opacity: animation,child: CustomDialog(controller: TextEditingController(), title: '自定义对话框'),);},transitionsBuilder: (context, animation, secondaryAnimation, child) {const begin = Offset(0.0, 1.0);const end = Offset.zero;const curve = Curves.easeInOut;var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));var offsetAnimation = animation.drive(tween);return SlideTransition(position: offsetAnimation,child: child,);},);},);
}

3.2 解释动画代码

• PageRouteBuilder: 用于自定义页面路由，允许我们定义自己的动画。
• FadeTransition: 为对话框添加渐变效果。
• SlideTransition: 为对话框添加滑动效果。

4. 使用自定义对话框

最后，我们在主页面中调用这个自定义对话框。

4.1 主页面代码

import 'package:flutter/material.dart';void main() {runApp(MyApp());
}class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text('自定义对话框示例')),body: Center(child: ElevatedButton(onPressed: () => _showCustomDialog(context),child: Text('显示对话框'),),),),);}void _showCustomDialog(BuildContext context) {// 在这里调用自定义对话框}
}

总结

通过以上步骤，我们实现了一个包含输入框、样式定制和动画效果的自定义对话框。这个对话框不仅美观，还能增强用户体验。你可以根据需要进一步扩展和定制这个对话框，使其适应不同的场景。