如何确保对话框只出现在Flutter中调用'showDialog'函数的屏幕上

Question

我有两个屏幕 A 和 B。我目前在屏幕 A 上，我调用了一个在 10 秒后显示对话框的函数。问题是，当我在对话框出现之前导航到屏幕 B 时，对话框出现在屏幕 B 而不是 A 上，即使我使用了 _scaffoldKey.currentContext。

showDialog(
      context: _scaffoldKey.currentContext!,
      builder: (ctx) {
        return Widget();
      },
    )

如何确保对话框只出现在屏幕A上？

Answer 1

洪

这个问题可能是因为你在调用

context

方法时传入了

_scaffoldKey

的当前

showDialog

。但是，如果您在对话框出现之前

navigate

到屏幕 B，那么

current

context

可能不再指屏幕 A.

而不是明确依赖

_scaffoldKey.currentContext

，一种方法是用

Builder

包装小部件

class ScreenA extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Builder(
        builder: (BuildContext context) {
          return Center(
            child: ElevatedButton(
              child: Text('Show Dialog'),
              onPressed: () {
                Future.delayed(Duration(seconds: 10), () {
                  showDialog(
                    context: context, // Pass in the context of the Builder widget
                    builder: (ctx) {
                      return AlertDialog(
                        title: Text('Dialog'),
                        content: Text('This dialog will always appear on Screen A'),
                        actions: [
                          TextButton(
                            child: Text('OK'),
                            onPressed: () {
                              Navigator.of(ctx).pop();
                            },
                          ),
                        ],
                      );
                    },
                  );
                });
              },
            ),
          );
        },
      ),
    );
  }
}

希望对您有所帮助，还有

context

的基本定义，以进一步理清思路，

– 上下文是指向小部件在小部件树结构中的位置的链接。 – 上下文只能属于一个小部件。 – 如果一个小部件有子小部件，那么父小部件的上下文将成为直接子元素上下文的父上下文。