Flutter GetX - 如何关闭底部对话框？答案

【问题标题】：Flutter GetX - How to dismiss bottom dialog?Flutter GetX - 如何关闭底部对话框？
【发布时间】：2022-01-22 13:51:54
【问题描述】：

我正在使用 GetX。我正在显示两个对话框。一个在底部，一个在顶部。当我单击顶部对话框上的按钮时，我想关闭底部对话框，怎么办？请看下面的代码：

    Get.dialog(
        Container(
            width: double.infinity,
            height: double.infinity,
            alignment: Alignment.center,
            child: Text("Bottom Dialog")),
        name: "dialog1");

    Future.delayed(Duration(seconds: 1), () {
      Get.dialog(
          Container(
              width: double.infinity,
              height: double.infinity,
              alignment: Alignment.topRight,
              child: GestureDetector(
                  onTap: () {
                    print("close");

                    Get.removeRoute(GetPageRoute(routeName: "dialog1"));

                    // Get.key.currentState!.removeRoute(GetPageRoute(routeName: "dialog1"));
                  },
                  child: Text("Top Dialog"))),
          navigatorKey: Get.key);
    });

【问题讨论】：

尽管使用 getx Get.back() 有时会给我带来问题，因此我最终使用了Navigator.pop(context)

标签： flutter flutter-getx

【解决方案1】：

您可以使用以下方法关闭按钮：

Navigator.pop(context);

实现为：

showDialog(
    context: context,
    builder: (_) {
      return AlertDialog(
        title: Text('Wanna Exit?'),
        actions: [
          FlatButton(
            onPressed: () => Navigator.pop(context, false), // passing false
            child: Text('No'),
          ),
          FlatButton(
            onPressed: () => Navigator.pop(context, true), // passing true
            child: Text('Yes'),
          ),
        ],
      );
    }).then((exit) {
  if (exit == null) return;

  if (exit) {
    // user pressed Yes button
  } else {
    // user pressed No button
  }
});

【讨论】：

如何获取底部对话框的上下文？

【解决方案2】：

同时显示两个对话并不是好的 UI/UX 体验。相反，您可以在打开顶部对话框后立即关闭底部对话框。

要在 顶部对话框 关闭时再次重新打开 底部对话框，您可以使用 顶部对话框 的返回值

bool showFirstDialogue = await Get.dialog(DialogueTwo());
if(showFirstDialogue){
   // show first dialogue again here
}

当DialogueTwo关闭时，请确保在这种情况下返回bool值。

你可以使用

Get.back();

上面的代码sn-p不需要任何上下文。

确保导入 get 库

import 'package:get/get.dart';

要获得更简洁的代码版本，只需关闭打开的对话框，然后您可以检查以下条件：

if(Get.isDialogueOpen){
 Get.back();
}

【讨论】：