Flutter优化Dialog使用

• 概述

  Flutter中提供了对话框组件和弹出对话框的方法，但是这些方法都需要传入一个BuildContext参数，这使得我们必须要在构建树中传入BuildContext才行，这限制了我们调起弹框的位置，所以我们需要一个可以在任何位置显示和隐藏的弹框。

• 原理

  Flutter的原生调用中，提供了诸如AlertDialog、SimpleDialog、Dialog等组件，并且提供了诸如showDialog、showModalBottomSheet(底部弹窗)等方法来显示Dialog。

  组件部分没什么好说的，我们可以定义自己的弹框样式，主要是显示和隐藏的原理。

  我们来想想一下可以实现一个对话框效果的方法。

  我们知道，Flutter的组件是通过构建组件树的方式显示在界面上的，如果要实现一个对话框的效果，我们可能会首先想到通过Stack来实现，把对话框放在Statck的最后一个，然后通过它的显示和隐藏来达到效果。但是这样一来，我们的对话框就和组件树绑定在一起了，在实现层面上，它不会影响最终的呈现，但是在规范上总觉得它不该属于组件树。不仅如此，这样实现，我们每个页面需要对话框的时候都需要和页面组件树绑定，重复代码太多，每个页面都需要维护一个自己的弹框。所以，这种方式可以实现但是太不灵活。

  那原生是怎么做的？Flutter中使用路由的方式来实现对话框。

  showDialog方法中：

  return Navigator.of(context, rootNavigator: useRootNavigator).push(DialogRoute(
    context: context,
    builder: builder,
    barrierColor: barrierColor,
    barrierDismissible: barrierDismissible,
    barrierLabel: barrierLabel,
    useSafeArea: useSafeArea,
    settings: routeSettings,
    themes: themes,
  ));
  

  可以看到，显示就是一个push一个新页面，那隐藏很明显就是调用Navigator的pop方法。

  DialogRoute会间接继承自PopupRoute，这个类中重写了ModalRoute的两个属性值：

  //这个属性可以设置遮盖层透明度是否完全遮盖住前一个页面
  @override
  bool get opaque => false;
  //这个属性设置当该route不可见时是否可以被内存杀死
  @override
  bool get maintainState => true;
  

  这两个属性就保证了对话框的显示效果以及和其他route一样正常被系统处理。

  再往上一级，DialogRoute继承了RawDialogRoute，RawDialogRoute继承自PopupRoute，这个类中首先把DialogRoute构造时传入的参数和ModalRoute中的属性对应起来：

  //决定点击遮盖层是否可以pop该route
  @override
  bool get barrierDismissible => _barrierDismissible;
  final bool _barrierDismissible;
  //遮盖层的颜色，这就是阴影区的颜色，可以通过给他设置透明度来达到半透明效果
  @override
  Color? get barrierColor => _barrierColor;
  final Color? _barrierColor;
  //route显示隐藏的时长
  @override
  Duration get transitionDuration => _transitionDuration;
  final Duration _transitionDuration;
  

  然后重写了ModalRoute的两个方法：

  @override
  Widget buildPage(BuildContext context, Animation animation, Animation secondaryAnimation) {
    return Semantics(
      scopesRoute: true,
      explicitChildNodes: true,
      child: _pageBuilder(context, animation, secondaryAnimation),
    );
  }
  
  @override
  Widget buildTransitions(BuildContext context, Animation animation, Animation secondaryAnimation, Widget child) {
    if (_transitionBuilder == null) {
      return FadeTransition(
        opacity: CurvedAnimation(
          parent: animation,
          curve: Curves.linear,
        ),
        child: child,
      );
    } // Some default transition
    return _transitionBuilder!(context, animation, secondaryAnimation, child);
  }
  

  我们知道，在Flutter的路由流程中，最终就是通过buildPage方法来获取route中的组件树的，这里通过暴露的_pageBuilder函数来设置组件。buildTransitions是用来构建显示隐藏的动画转换效果。

  通过上面的分析，我们发现这种实现要好了很多，至少我不需要在每个页面的组件树中插入Dialog组件了，但是还不够优雅，我们发现这里必须要传入一个BuildContext，因为Navigator需要它，那么有什么方法解决这个问题呢？

• get框架的实现

  首先我们要明白，Navigator中需要的BuildContext必须是当前显示的route的context，因为我们要根据它才能知道我们的新route放在哪里。

  get框架中对dialog的使用也做了封装，使用时不用再传入BuildContext了，这就使得我们可以在非BuildContext持有类中操作Dialog，我们看一下他是怎么解决这个问题的。

  get通过Get.dialog方法来显示一个Dialog，通过Get.back方法来关闭一个Dialog，dialog方法中：

  return generalDialog(
    pageBuilder: (buildContext, animation, secondaryAnimation) {
      final pageChild = widget;
      Widget dialog = Builder(builder: (context) {
        return Theme(data: theme, child: pageChild);
      });
      if (useSafeArea) {
        dialog = SafeArea(child: dialog);
      }
      return dialog;
    },
    barrierDismissible: barrierDismissible,
    barrierLabel: MaterialLocalizations.of(context!).modalBarrierDismissLabel,
    barrierColor: barrierColor ?? Colors.black54,
    transitionDuration: transitionDuration ?? defaultDialogTransitionDuration,
    transitionBuilder: (context, animation, secondaryAnimation, child) {
      return FadeTransition(
        opacity: CurvedAnimation(
          parent: animation,
          curve: transitionCurve ?? defaultDialogTransitionCurve,
        ),
        child: child,
      );
    },
    navigatorKey: navigatorKey,
    routeSettings:
        routeSettings ?? RouteSettings(arguments: arguments, name: name),
  );
  

  generalDialog方法如下：

  Future generalDialog({
    required RoutePageBuilder pageBuilder,
    bool barrierDismissible = false,
    String? barrierLabel,
    Color barrierColor = const Color(0x80000000),
    Duration transitionDuration = const Duration(milliseconds: 200),
    RouteTransitionsBuilder? transitionBuilder,
    GlobalKey? navigatorKey,
    RouteSettings? routeSettings,
  }) {
    assert(!barrierDismissible || barrierLabel != null);
    final nav = navigatorKey?.currentState ??
        Navigator.of(overlayContext!,
            rootNavigator:
                true); //overlay context will always return the root navigator
    return nav.push(
      GetDialogRoute(
        pageBuilder: pageBuilder,
        barrierDismissible: barrierDismissible,
        barrierLabel: barrierLabel,
        barrierColor: barrierColor,
        transitionDuration: transitionDuration,
        transitionBuilder: transitionBuilder,
        settings: routeSettings,
      ),
    );
  }
  

  可见，get同样是通过Navigator来实现的，我们来看它的BuildContext问题是怎么不需要传递的。

  我们发现它传入了一个overlayContext：

  BuildContext? get overlayContext {
    BuildContext? overlay;
    key.currentState?.overlay?.context.visitChildElements((element) {
      overlay = element;
    });
    return overlay;
  }
  

  key是什么：

  GlobalKey get key => _getxController.key;
  //extension GetNavigation中
  static GetMaterialController _getxController = GetMaterialController();
  //GetMaterialController中
  var _key = GlobalKey(debugLabel: 'Key Created by default');
  

  而这个key是在第一次使用Navigator的时候在mount方法生成的，也可以理解成根NavigatorState的GlobalKey，所以通过它获取的context也就是根NavigatorState的Element，然后通过visitChildElements方法循环，最终会得到一个最上层的Overlay。什么是Overlay，它就是上面说的遮盖层，每一个route都有自己的遮盖层，我们的组件树最终就是要呈现在它上面。

  所以原理就是通过根NavigatorState获取最上层的（也就是当前显示的）route的Element（也就是BuildContext），然后传给Navigator来调起路由。

• 总结

  现在我们知道了Flutter中Dialog是如何实现的，并且我们知道了怎么去优化Dialog的使用让它变得更优雅。

  现在，我们可以结合get框架封装一个工具类来使用它：

  class DialogUtil {
    static void show() {
      if (Get.isDialogOpen == true) {
        return;
      }
      Get.dialog(
        LoadingWidget(),
        barrierColor: Color.fromRGBO(0, 0, 0, 0.5),
        barrierDismissible: false,
      );
    }
  
    static void dismiss() {
      if (Get.isDialogOpen == true) {
        Get.back();
      }
    }
  }
  

  isDialogOpen在使用get进行路由跳转时会记录当前route是否是Dialog类型的，我们可以根据它来判断当前dialog是否在展示，就是一个标识位，我们自己也不难实现。