Flutter对话框管理插件flutter_app_dialog_stack的使用

Flutter对话框管理插件flutter_app_dialog_stack的使用

怎么使用

创建一个简单的Dialog

首先，我们需要创建一个继承自AppDialog的类，并实现其方法。

class TestDialog extends AppDialog {
  /// 是否允许弹出
  @override
  Future<bool> get allowShow => Future.value(true);

  /// 提前需要初始化的数据
  @override
  Future<void> preInit() async {}

  /// 执行弹出的逻辑
  @override
  Future<void> show() async {}
}

立即进行弹出弹框

接下来，我们可以使用AppDialogStackManager来立即弹出对话框。

final dialog = TestDialog();

/// 立即弹出对话框
AppDialogStackManager()..push(dialog, 1)..alert();

同时弹出设置优先级

我们还可以同时弹出多个对话框，并为它们设置不同的优先级。

final dialog1 = TestDialog();
final dialog2 = TestDialog();

/// 设置优先级，优先级高的对话框会先弹出
AppDialogStackManager()..push(dialog1, 1)..push(dialog2, 2)..alert();

只展示一次

如果你希望某个对话框只弹出一次，可以使用以下方式：

/// 只会弹出TestDialog一次，默认采用类名判断，
/// 但你也可以通过where: (dialog) => 自定义判断条件
AppDialogStackManager()..push(TestDialog())..alert();
AppDialogStackManager()..push(TestDialog())..alert();

延后弹出

如果你想延迟弹出某个对话框，可以先将其加入队列，然后在适当的时候触发弹出。

AppDialogStackManager()..push(TestDialog());
// 模拟延后操作
AppDialogStackManager()..alertWhere();

更多关于Flutter对话框管理插件flutter_app_dialog_stack的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter对话框管理插件flutter_app_dialog_stack的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_app_dialog_stack 是一个用于管理 Flutter 对话框中堆栈的插件。它可以帮助开发者更好地管理多个对话框的显示和隐藏，避免对话框重叠或其他相关问题。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 flutter_app_dialog_stack 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_app_dialog_stack: ^0.1.0  # 请使用最新版本

然后运行 flutter pub get 来安装插件。

基本使用

  1. 初始化 DialogStack

    在你的应用程序中，首先需要初始化 DialogStack。通常，你可以将它放在 MaterialApp 的 builder 中：

    import 'package:flutter/material.dart';
import 'package:flutter_app_dialog_stack/flutter_app_dialog_stack.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) {
        return DialogStack(
          child: child!,
        );
      },
      home: MyHomePage(),
    );
  }
}

  2. 显示对话框

    使用 DialogStack 的 showDialog 方法来显示对话框：

    class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dialog Stack Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            DialogStack.of(context).showDialog(
              builder: (context) {
                return AlertDialog(
                  title: Text('Dialog 1'),
                  content: Text('This is the first dialog.'),
                  actions: [
                    TextButton(
                      onPressed: () {
                        Navigator.of(context).pop();
                      },
                      child: Text('Close'),
                    ),
                  ],
                );
              },
            );
          },
          child: Text('Show Dialog 1'),
        ),
      ),
    );
  }
}

  3. 显示多个对话框

    你可以使用同样的方法来显示多个对话框，DialogStack 会自动管理它们的堆栈：

    class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dialog Stack Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                DialogStack.of(context).showDialog(
                  builder: (context) {
                    return AlertDialog(
                      title: Text('Dialog 1'),
                      content: Text('This is the first dialog.'),
                      actions: [
                        TextButton(
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                          child: Text('Close'),
                        ),
                      ],
                    );
                  },
                );
              },
              child: Text('Show Dialog 1'),
            ),
            ElevatedButton(
              onPressed: () {
                DialogStack.of(context).showDialog(
                  builder: (context) {
                    return AlertDialog(
                      title: Text('Dialog 2'),
                      content: Text('This is the second dialog.'),
                      actions: [
                        TextButton(
                          onPressed: () {
                            Navigator.of(context).pop();
                          },
                          child: Text('Close'),
                        ),
                      ],
                    );
                  },
                );
              },
              child: Text('Show Dialog 2'),
            ),
          ],
        ),
      ),
    );
  }
}

  4. 关闭所有对话框

    如果你需要关闭所有显示的对话框，可以使用 closeAllDialogs 方法：

    ElevatedButton(
  onPressed: () {
    DialogStack.of(context).closeAllDialogs();
  },
  child: Text('Close All Dialogs'),
);
回到顶部