Flutter 响应式设计 : Dynamically change Column to Row if the screen is larger

Question

如果设备的屏幕宽度超过某个阈值，如何将 Column widget 动态更改为 Row Widget？

用例是当用户在平板电脑或横向模式下使用应用程序时，布局应该不同以优化可用宽度的使用。

在 CSS flexbox 中，它就像将类从 flex-row 更改为 flex-column 一样简单，但在 Flutter 中，使用了小部件。

Answer 1

Row 和 Column 共享一个名为 Flex 的公共(public)父级，该父级采用轴方向。只需更改 direction 的值，您就可以将 Flex 更改为行或列。

要获取屏幕宽度，您可以使用 MediaQuery.of(context).size.width。

您的小部件应如下所示:

@override
Widget build(BuildContext context) {
  bool isScreenWide = MediaQuery.of(context).size.width >= kMinWidthOfLargeScreen;

  return Scaffold(
    body: Flex(
      direction: isScreenWide ? Axis.horizontal : Axis.vertical,
      children: <Widget>[
        ...
      ],
    )
  );
}