如何在Flutter中针对横屏和竖屏显示不同的布局

Question

我想知道如何在Flutter中为横屏和竖屏显示不同的布局。在Android原生应用中，我们只需创建layout和layout-land文件夹并将xml文件放置其中，系统会自动检测适合方向的布局。如果有关于Flutter的任何帮助，感激不尽。谢谢。

- Dipankar Baghel

Answer 1

按照文档所说，使用官方小部件 https://flutter.dev/docs/cookbook/design/orientation

OrientationBuilder(
  builder: (context, orientation) {
    return GridView.count(
      // Create a grid with 2 columns in portrait mode,
      // or 3 columns in landscape mode.
      crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
    );
  },
);

- Naveen Avidi

Answer 2

使用方向生成器并在内部检查方向是纵向还是横向。请查看文档此处。

示例代码：

OrientationBuilder(
  builder: (context, orientation) {
    return GridView.count(
      // Create a grid with 2 columns in portrait mode,
      // or 3 columns in landscape mode.
      crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
    );
  },
);

- mr.SoSerious