Question

我目前正在设计一个带有飞镖抖动的应用程序，并且我一直在使用Flutter Speed Dial包，尝试使用marginRight和marginBottom值将其与屏幕的左下角对齐。 marginBottom很简单，但是marginRight的问题在于，取决于屏幕大小，相同的静态值可能最终会将小部件放在屏幕的中心，一直到屏幕的最左侧，甚至取决于屏幕的大小。

因此，我调用了mediaQuery来获取屏幕尺寸并将小部件以此为基础，边距仅比其所在屏幕的宽度稍小，以使该值具有响应性。

但是，它说MediaQuery是在上下文之外调用的，即使我在SpeedDial中调用它也是如此，该SpeedDial位于Scaffold的FloatingActionButton下，设置为MaterialApp的宿主，如下所示：

Widget build(BuildContext context) {
    return MaterialApp(
      home:Scaffold(
        body: Stack(
            children: [...]
          ),
        floatingActionButton:
        SpeedDial(
          marginRight: MediaQuery.of(context).size.width - 20,
          marginBottom: 65,
          [...]
          children: [
            SpeedDialChild(
                [...]
            ),
            SpeedDialChild(
              [...]
            ),
          ],
        ),
      )
    );
  }

完整错误如下：

使用不包含MediaQuery的上下文调用

MediaQuery.of（）。从传递给MediaQuery.of（）的上下文开始，找不到MediaQuery祖先。之所以会出现这种情况，是因为您没有WidgetsApp或MaterialApp小部件（这些小部件引入了MediaQuery），或者如果您使用的上下文来自这些小部件上方的小部件，则可能会发生这种情况。

在此先感谢您，这真令人沮丧:)非常感谢您的帮助。

Answer 1

要解决问题，只需将主窗口小部件包装为home小部件的MaterialApp，如下所示：

main.dart

void main() {
  runApp(
    MaterialApp(home: YourWidget()),
  );
}

并在此处删除MaterialApp小部件

yourwidget.dart


class YourWidget extends StatelessWidget {

Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
            children: [...]
          ),
        floatingActionButton:
        SpeedDial(
          marginRight: MediaQuery.of(context).size.width - 20,
          marginBottom: 65,
          [...]
          children: [
            SpeedDialChild(
                [...]
            ),
            SpeedDialChild(
              [...]
            ),
          ],
        ),
    );
  }
}

Answer 2

您正在丢失上下文，因为Speeddial正在使用其自己的上下文。要获取上下文，可以使用构建器。

或修改SpeedDial以接受BuildContext。

Widget build(BuildContext context) {
        return MaterialApp(
          home:Scaffold(
            body: Stack(
                children: [...]
              ),
            floatingActionButton: Builder(context) {
           return SpeedDial(
              marginRight: MediaQuery.of(context).size.width - 20,
              marginBottom: 65,
              [...]
              children: [
                SpeedDialChild(
                    [...]
                ),
                SpeedDialChild(
                  [...]
                ),
              ],
            ),
           }
          )
        );
      }

响应元素与MediaQuery的对齐-在不包含响应的上下文中调用

2 个答案: