Flutter模态窗口插件modal_widget的使用

显示互动性对于应用程序非常重要，尤其是在执行阻塞任务（如登录、从互联网读取数据等）期间。在此类期间，方便的操作是阻止界面访问，并显示一个通知（例如，“正在读取数据”）或一个精美的小部件（如Flutter Spinkit）。

虽然构建并根据StatefulWidget的状态显示覆盖层相对简单，但不构建它则更加方便。

此插件提供了一个混入类，使在另一个小部件上叠加任意小部件以显示长时间任务的执行过程变得更加容易。

功能

此混入的基本功能包括：

1. 在有限时间内（例如2秒）显示一个小部件。
2. 在函数执行期间显示一个小部件。
3. 显示一个小部件并在之后通过编程方式隐藏它。

效果如下图所示：

开始使用

要开始使用此包，请将其添加到您的pubspec.yaml文件中：

dependencies:
  modal_widget:

然后获取依赖项（例如flutter pub get），并将其导入到您的应用中：

import 'package:modal_widget/modal_widget.dart';

使用方法

您需要将混入添加到您的StatefulWidget中，然后在build方法中使用buildWithModalWidget函数：

class _ModalWidgetDemoState extends State<ModalWidgetDemo> with ModalWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: null,
      body: buildWithModalWidget(
        child: Center(
          child: ElevatedButton(
            onPressed: () => showModalWidgetWhile(
              () async => await Future.delayed(const Duration(seconds: 3)),
            ),
            child: const Text("显示覆盖层"),
          ),
        ),
        modalWidget: const Center(
          child: Text(
            "处理中",
            style: TextStyle(fontSize: 50),
          ),
        ),
      ),
    );
  }
}

额外信息

有多种机制和选项可以控制何时以及如何显示覆盖层：显示小部件直到通过编程方式隐藏（即showModalWidget…hideModalWidget），在函数执行期间显示小部件，或者在一段时间内显示小部件。

构建覆盖层的函数接口如下：

Widget buildWithModalWidget({
  required Widget child,
  Widget? modalWidget,
  bool blurContent = false,
  double opacity = 0.8,
  VoidCallback? onHide,
})

该函数定义了过程的默认值，但某些值可以在显示动画时被覆盖。

• child：在覆盖层下显示的内容。
• modalWidget：等待时叠加到内容上的小部件。
• blurContent（默认为false）：如果设置为true，子小部件将被模糊（以使其感觉不互动）。
• opacity（默认为0.8）：如果设置为不同于1的值，子小部件将按此因子设置为半透明。
• onHide：当动画隐藏时（无论是自动关闭还是使用hideModalWidget函数关闭）调用的回调。

显示覆盖层

有多个函数可以显示覆盖层：

Future<bool> showModalWidget({bool force = false, VoidCallback? onHide}) async {

这是基本的函数，用于显示modalWidget，并在动画隐藏时调用onHide函数。如果未提供onHide，则默认为在调用buildWithModalWidget时提供的值。

如果动画已经显示，则不会更改小部件状态，并且不会调用onHide。除非参数force设置为true，否则这种情况会发生。

它被设置为Future<bool>以启用函数执行链（例如使用then）。未来接收的结果是指动画是否已显示（即true）或已显示（即false）。

void hideModalWidget([bool force = false]) {

此函数隐藏覆盖层并重新启用子小部件。该函数旨在在调用showModalWidget后调用，但建议使用自动关闭功能。

如果小部件已经隐藏，则不会更改小部件状态，除非参数force设置为true。

Future<bool> showModalWidgetWhile(Function callback, {Duration? timeout, VoidCallback? onTimeout, VoidCallback? onHide})

此函数在执行callback时显示覆盖层。可以为执行设置一个timeout。如果执行时间超过该时间，则callback的执行将被终止，并调用onTimeout函数。

如果未提供onHide，则默认为在调用buildWithModalWidget时提供的值。

该函数返回一个Future<bool>，在callback执行完毕（或终止）后解析。因此，可以通过await或then程序链式调用其他函数。此过程独立于onHide回调，因此两者都可能被调用并且then链式调用可以被执行。

布尔结果设置为true，如果小部件已被显示和隐藏。如果在调用showModalWidgetWhile时小部件已显示，则future的结果将被设置为false。

Future<bool> showModalWidgetDuring(Duration period, {VoidCallback? onHide}) {

此函数在period期间显示小部件。如果未提供onHide，则默认为在调用buildWithModalWidget时提供的值。

这实际上是return showModalWidgetWhile(() async => await Future.delayed(period), onHide: onHide)的快捷方式。

示例代码

以下是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:modal_widget/modal_widget.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: ModalWidgetDemo(),
    );
  }
}

class ModalWidgetDemo extends StatefulWidget {
  const ModalWidgetDemo({super.key});

  [@override](/user/override)
  State<ModalWidgetDemo> createState() => _ModalWidgetDemoState();
}

class _ModalWidgetDemoState extends State<ModalWidgetDemo> with ModalWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: null,
      body: buildWithModalWidget(
        child: Center(
          child: ElevatedButton(
            onPressed: () => showModalWidgetWhile(() async =>
                await Future.delayed(const Duration(seconds: 3))),
            child: const Text("显示覆盖层"),
          ),
        ),
        modalWidget: const Center(
          child: Text(
            "处理中",
            style: TextStyle(fontSize: 50),
          ),
        ),
      ),
    );
  }
}