Flutter 颤振响应设计：如果屏幕较大，则动态地将列更改为行

如果设备的屏幕宽度高于某个树型窗口，如何将列窗口小部件动态更改为行窗口小部件

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

---

在CSS flexbox中，只需将类从flex行更改为flex列即可，但在Flatter中，使用了小部件

行

和

列

共享一个名为

Flex

的公共父级，该父级采用轴方向。只需更改

direction

的值，就可以将

Flex

更改为行或列

要获得屏幕宽度，可以使用

MediaQuery.of（context）.size.width

您的小部件应该如下所示：

@覆盖
小部件构建（构建上下文）{
bool isScreenWide=MediaQuery.of（context）.size.width>=kMinWidthOfLargeScreen；
返回脚手架(
主体：Flex(
方向：isScreenWide？轴。水平：轴。垂直，
儿童：[
...
],
)
);
}

要根据设备方向进行更改，您可以执行以下操作：

Orientation orientation = MediaQuery.of(context).orientation;

return orientation == Orientation.portrait
? Column(children: <Widget>[])
: Row(children: <Widget>[]);

Orientation-Orientation=MediaQuery.of（context.Orientation）；
返回方向==方向。纵向
? 列（子项：[]）
：世界其他地区（儿童：[]）；

我写了一个助手来做这件事（从列到行）

导入“包装：颤振/材料.省道”；
类定向开关扩展了无状态小部件{
最后儿童名单；
const-OrientationSwitcher（{Key-Key，this.children}）：super（Key:Key）；
@凌驾
小部件构建（构建上下文）{
方向=MediaQuery.of（context）.Orientation；
返回方向==方向。纵向
？列（子项：子项）
：世界其他地区（儿童：儿童）；
}
}

使用它

  Widget build(BuildContext context) {
    return OrientationSwitcher(
      children: <Widget>[
           // place children here like its a column or row.
        ]
    )
  }

小部件构建（构建上下文）{
返回方向开关(
儿童：[
//将孩子放在这里，就像它是一列或一行一样。
]
)
}

您也可以使用Flex（）或任何其他小部件来实现这一点

此外，除了方向，还有更多选项可用，请确保查看Flutter文档上的MediaQuery.of（context）实现

  Widget build(BuildContext context) {
    return OrientationSwitcher(
      children: <Widget>[
           // place children here like its a column or row.
        ]
    )
  }