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 {
  @override
  Widget 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);

  @override
  Widget 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 {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('自定义对话框示例')),
        body: Center(
          child: ElevatedButton(
            onPressed: () => _showCustomDialog(context),
            child: Text('显示对话框'),
          ),
        ),
      ),
    );
  }

  void _showCustomDialog(BuildContext context) {
    // 在这里调用自定义对话框
  }
}

总结

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