“MediaQuery.of(context).size” VS “LayouBuilder(BoxConstraints 约束)”

Question

我是一个新的 Flutter 学习者。我正在尝试使用相同的代码库编写移动和网络应用程序。我想知道我应该在哪里使用MediaQuery.of(context).size以及在哪里LayouBuilder( BoxConstraints constraints)？

还想知道在一个大型应用程序中仅使用其中一个是否有效，或者它们是相互补充的？

编辑：我也喜欢更多地了解这些方法的行为

• 用户放大/缩小屏幕

• 用户更改移动应用程序上的屏幕方向或桌面计算机上的网络浏览器大小

这两种情况哪种方法更适合呢？

Answer 1

LayoutBuilder基于其父窗口小部件提供约束。您可以LayoutBuilder使用 SizedBox 进行包装，然后检查它的约束。

但对于它来说，MediaQuery.of(context).size它会提供屏幕尺寸，无论它是否用 SizedBox 包裹。

• 要获取小部件树中的屏幕大小，您可以使用MediaQuery.of(context).size，媒体的大小（以逻辑像素为单位）（例如，屏幕的大小）。
• 要获取父窗口小部件的大小，并根据父窗口布局内部子窗口，请使用LayouBuilder

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
      children: [
        SizedBox(
          width: 100,
          height: 100,
          child: LayoutBuilder(
            builder: (context, constraints) {
              return Container(
                width: constraints.maxWidth,
                height: constraints.maxHeight,
                color: Colors.red.withOpacity(.3),
                alignment: Alignment.center,
                child: Text("Using layout Builder"),
              );
            },
          ),
        ),
        Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          color: Colors.green.withOpacity(.3),
          alignment: Alignment.center,
          child: Text("Using MediaQuery"),
        )
      ],
    ));
  }
}

对于大小，您可以使用 LayoutBuilder，而主管将基于父窗口小部件，并且它不会调用查询。在某些情况下，例如在 showDialog 上，您需要 mediaQuery 来获取大小。LayoutBuilder尽可能使用。

• 创建响应式 flutter 应用程序

LayoutBuilder有关MediaQueryData/size的更多信息