在颤动中点击警报对话框时屏幕未关闭

Question

嗨，我设计了一个颤动的屏幕。 我有AlertDialog ，我想在按下时关闭对话框和屏幕。 现在AlertDialog在按下时关闭，但屏幕没有关闭。

有谁知道如何做到这一点 ？

class ForgotPasswordScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return ForgotPasswordScreenState();
  }
}

class ForgotPasswordScreenState extends State<ForgotPasswordScreen> {
  var emailController = new TextEditingController();
  var authHandler = new Auth();
  bool isLoading = false;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        body: Container(
            height: MediaQuery.of(context).size.height,
            decoration: BoxDecoration(
              color: Colors.white,
            ),
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Row(
                  children: <Widget>[
                    new Expanded(
                        child: isLoading
                            ? Center(child: CircularProgressIndicator())
                            : new Container()),
                  ],
                ),
                new Row(
                  children: <Widget>[
                    new Expanded(
                      child: new Padding(
                        padding: const EdgeInsets.only(left: 40.0),
                        child: new Text(
                          "EMAIL",
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: Colors.redAccent,
                            fontSize: 15.0,
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
                new Container(
                  width: MediaQuery.of(context).size.width,
                  margin:
                      const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0),
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    border: Border(
                      bottom: BorderSide(
                          color: Colors.redAccent,
                          width: 0.5,
                          style: BorderStyle.solid),
                    ),
                  ),
                  padding: const EdgeInsets.only(left: 0.0, right: 10.0),
                  child: new Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      new Expanded(
                        child: TextField(
                          controller: emailController,
                          textAlign: TextAlign.left,
                          decoration: InputDecoration(
                            border: InputBorder.none,
                            hintText: 'PLEASE ENTER YOUR EMAIL',
                            hintStyle: TextStyle(color: Colors.grey),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
                Divider(
                  height: 24.0,
                ),
                new Container(
                  width: MediaQuery.of(context).size.width,
                  margin:
                      const EdgeInsets.only(left: 30.0, right: 30.0, top: 20.0),
                  alignment: Alignment.center,
                  child: new Row(
                    children: <Widget>[
                      new Expanded(
                        child: new FlatButton(
                          shape: new RoundedRectangleBorder(
                            borderRadius: new BorderRadius.circular(30.0),
                          ),
                          color: Colors.redAccent,
                          onPressed: () {
                            setState(() {
                              isLoading = true;
                            });
                            authHandler
                                .sendPasswordResetEmail(emailController.text)
                                .then((void nothing) {
                              showDialog(
                                context: context,
                                builder: (BuildContext context) {
                                  // return object of type Dialog
                                  return AlertDialog(
                                    content: new Text(
                                        "Password reset email has been sent."),
                                    actions: <Widget>[
                                      // usually buttons at the bottom of the dialog
                                      new FlatButton(
                                        child: new Text("OK"),
                                        onPressed: () {
                                          Navigator.pop(context);
                                        },
                                      ),
                                    ],
                                  );
                                },
                              );

                              setState(() {
                                isLoading = false;
                              });
                            }).catchError((e) => print(e));
                          },
                          child: new Container(
                            padding: const EdgeInsets.symmetric(
                              vertical: 20.0,
                              horizontal: 20.0,
                            ),
                            child: new Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                new Expanded(
                                  child: Text(
                                    "FORGOT PASSWORD",
                                    textAlign: TextAlign.center,
                                    style: TextStyle(
                                        color: Colors.white,
                                        fontWeight: FontWeight.bold),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            )));
  }
}

Answer 1

理想情况下，您需要多次调用pop 。 一个用于模态，另一个用于实际路线。

有几种方法可以实现此目的。 但理想情况下，您需要await对话框关闭后再触发另一个关闭：

foo() async {
  await showDialog(
    context: context,
    builder: (context) => AlertDialog(
          actions: [
            new FlatButton(
              child: new Text("OK"),
              onPressed: () => Navigator.pop(context),
            ),
          ],
        ),
  );
  Navigator.pop(context);
}

这样，路线和模式都可以根据自己的喜好处理它们的关闭。

Answer 2

这就是我如何处理我的

  bool _logout = false;

然后在构建 Widget 开始时

 @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        _onBackPressed(context);
        return _logout;
      },
      child: Container(),
      );
  }

并且方法 _onBackPressed 返回一个自定义对话框类，如下所示

 void _onBackPressed(BuildContext c) async {
    await showDialog(
        barrierColor: CustomColors.darkGrey.withOpacity(0.8),
        barrierDismissible: true,
        context: context,
        builder: (BuildContext context) {
          return CustomDialogBox(
            title: 'Logout',
            description: 'Are you sure you want to logout?',
            rightButtonText: 'Yes',
            onPClick: () {
              _logout = true;
              if (_logout == true) {
                Get.back();
              }
            },
            onNClick: () {
              _logout = false;
              Get.back();
            },
          );
        });
    if (_logout == true) {
      Get.back();
    }
  }

我的自定义 Dialog 类就在这里

class CustomDialogBox extends StatefulWidget {
  final String? title, description, leftButtonText, rightButtonText;
  final VoidCallback? onPClick, onNClick;
  final Image? image;

  const CustomDialogBox({
    Key? key,
    this.title,
    this.description,
    this.leftButtonText,
    this.rightButtonText,
    this.image,
    this.onPClick,
    this.onNClick,
  }) : super(key: key);

  @override
  _CustomDialogBoxState createState() =>
      // ignore: no_logic_in_create_state
      _CustomDialogBoxState(onPClick!, onNClick!);
}

class _CustomDialogBoxState extends State<CustomDialogBox> {
  final VoidCallback onPClick, onNClick;

  _CustomDialogBoxState(this.onPClick, this.onNClick);

  @override
  Widget build(BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(Dimensions.BORDER_RADIUS_4),
      ),
      elevation: 0,
      backgroundColor: Colors.transparent,
      child: Container(
        //height: 200,
        padding: const EdgeInsets.only(
          left: 10,
          right: 0,
          bottom: 10,
        ),
        decoration: BoxDecoration(
            shape: BoxShape.rectangle,
            color: Colors.white,
            borderRadius: BorderRadius.circular(8),
            boxShadow: [
              BoxShadow(
                color: CustomColors.darkGrey,
                offset: const Offset(0, 30),
                blurRadius: 20,
              ),
            ]),
        child: Wrap(children: <Widget>[
          dialogBody(context),
        ]),
      ),
    );
  }

  Widget dialogBody(context) {
    return Column(children: [
      Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
        Image.asset(
          Images.LOGO,
          height: MediaQuery.of(context).size.height * 0.035,
        ),
        IconButton(
          //padding: const EdgeInsets.all(0),
          onPressed: () {
            Get.back();
          },
          icon: const CircleAvatar(
            radius: 12.5,
            child: Icon(
              Icons.close,
              color: Colors.white,
            ),
            backgroundColor: Colors.red,
          ),
        ),
      ]),

      Padding(
        padding: const EdgeInsets.only(
          right: 10,
        ),
        child: Column(children: [
          //----//
          customText(
            text: widget.title ?? '',
            fontFamily: 'black',
            fontSize: 16,
          ),
          //----//
          const Space(0, 0.01),
          //----//
          customText(
            text: widget.description ?? '',
            fontSize: 14,
          ),
        ]),
      ),
      //----//
      const Space(0, 0.03),
      //----//
      Padding(
        padding: const EdgeInsets.only(
          right: 10,
        ),
        child:
            Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
          //----//
          raisedButton(
            text: widget.leftButtonText ?? 'Cancel',
            fontFamily: 'roman',
            height: 35,
            width: 105,
            buttonColor: CustomColors.red,
            onClick: () {
              return onNClick();
            },
            context: context,
          ),
          //----//
          raisedButton(
            text: widget.rightButtonText ?? 'Okay',
            fontFamily: 'roman',
            height: 35,
            width: 105,
            buttonColor: CustomColors.green,
            onClick: () {
              return onPClick();
            },
            context: context,
          ),
          //----//
        ]),
      ),
    ]);
  }
}

按钮和文本是自定义的，因此可以随意更改它们。 你在哪里看到 Get.back(); 是 GetX 代码.. 你可以用 Navigator.of(context).pop(); 替换

Answer 3

尝试这个

showPop() async {
    await showDialog(
      context:  context,
      barrierDismissible: true,
      builder: (context) => AlertDialog(
        actions: [
          new FlatButton(
            child: new Text("Close"),
             onPressed: () => Navigator.pop(context),
          ),
        ],
      ),
    );

  }