Flutter GetX -如何关闭底部对话框?

gjmwrych  于 2022-12-14  发布在  Flutter
关注(0)|答案(4)|浏览(299)

我正在使用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);
    });
gr8qqesn

gr8qqesn1#

试试这个

控制器

class DialogController extends GetxController {
      final isDialogOpen = RxBool(false);
   }

声明此控制器,其中对话框初始

final dialogContoller = Get.put(DialogController());

对话框:

Get.dialog(
                barrierDismissible: false,
                Dialog(
                  backgroundColor: Colors.transparent,
                  child: SingleChildScrollView(
                    scrollDirection: Axis.vertical,
                    child: Obx(
                      () => Column(
                        children: [
                          GestureDetector(
                            onTap: () {
                              dialogContoller.isDialogOpen.toggle();
                            },
                            child: Container(
                              width: Get.width,
                              height: 200,
                              decoration: BoxDecoration(
                                color: Colors.amber,
                                borderRadius: BorderRadius.all(
                                  Radius.circular(5),
                                ),
                              ),
                              padding: EdgeInsets.only(
                                  left: 15, right: 15, bottom: 15),
                              child: Center(child: Text('Top Dialog')),
                            ),
                          ),
                          if (!dialogContoller.isDialogOpen.value)
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                SizedBox(height: 100),
                                Container(
                                  width: Get.width,
                                  height: 200,
                                  decoration: BoxDecoration(
                                    color: Colors.red,
                                    borderRadius: BorderRadius.all(
                                      Radius.circular(5),
                                    ),
                                  ),
                                  padding: EdgeInsets.only(
                                      left: 15, right: 15, bottom: 15),
                                  child:
                                      Center(child: Text('Bottom Dialog')),
                                ),
                              ],
                            ),
                        ],
                      ),
                    ),
                  ),
                ),
              );
f45qwnt8

f45qwnt82#

您可以使用以下命令关闭该按钮:

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
  }
});
l0oc07j2

l0oc07j23#

同时显示两个对话框不是很好的UI/UX体验。相反,您可以在打开 * 顶部对话框 * 后立即关闭 * 底部对话框 *。
要在 * 顶部对话框 * 关闭时重新打开 * 底部对话框 *,您可以使用

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

在这种情况下,当DialogueTwo关闭时,请确保返回bool值。
你可以用

Get.back();

上面的代码片段不需要任何上下文。
确保导入get库

import 'package:get/get.dart';

要有更干净的版本的代码只是关闭打开的对话框,那么你可以检查的条件如下:

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

jpfvwuh44#

Navigator.of(Get.overlayContext!, rootNavigator: true).pop();

它对我有效,让我们检查一下

相关问题