Flutter如何根据屏幕方向改变页面布局？

Question

我还在学习 Flutter，所以我需要一些帮助。

以下页面布局为纵向模式：

我希望它在横向模式下更改为以下布局：

如何在不重复小部件的情况下做到这一点？

我想通过列表或 map 来完成，但我不知道如何将其应用到我的代码中

Answer 1

Flutter 为您提供了一些小部件，用于使您的 UI 适应屏幕的方向。 你有OrientationBuilder可以帮助你解决你的问题。

OrientationBuilder(
  builder: (context, orientation) {
    return orientation == Orientation.portrait ? MyWidgetUIPortrait : MyWidgetUILandscape
  },
),

您可以在文档中了解有关帮助您管理方向的小部件的更多信息： https://docs.flutter.dev/cookbook/design/orientation

Answer 2

您可以使用Warp小部件，它会自动根据空间更改 UI。

经