Flutter优化Dialog使用

概述

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

原理

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

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

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

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

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

showDialog方法中：

return Navigator.of(context, rootNavigator: useRootNavigator).push<T>(DialogRoute<T>(
  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<double> animation, Animation<double> secondaryAnimation) {
  return Semantics(
    scopesRoute: true,
    explicitChildNodes: true,
    child: _pageBuilder(context, animation, secondaryAnimation),
  );
}

@override
Widget buildTransitions(BuildContext context, Animation<double> animation, Animation<double> 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<T>(
  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<T?> generalDialog<T>({
  required RoutePageBuilder pageBuilder,
  bool barrierDismissible = false,
  String? barrierLabel,
  Color barrierColor = const Color(0x80000000),
  Duration transitionDuration = const Duration(milliseconds: 200),
  RouteTransitionsBuilder? transitionBuilder,
  GlobalKey<NavigatorState>? 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<T>(
    GetDialogRoute<T>(
      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<NavigatorState> get key => _getxController.key;
//extension GetNavigation中
static GetMaterialController _getxController = GetMaterialController();
//GetMaterialController中
var _key = GlobalKey<NavigatorState>(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是否在展示，就是一个标识位，我们自己也不难实现。