扑。 - 如何在 Gridview 中动态 crossAxisCount

Question

我有一个 GridView，我希望 crossAxisCount 根据设备大小特别是移动设备 (crossAxisCount:3) 和平板电脑 (crossAxisCount:4) 进行更改。 我是 Flutter 的新手，我知道有 MediaQuery，但我不知道如何使用它。

我还附上了一张图片以供参考。 我在寻找什么。

Answer 1

您可以检查设备的最短边是否 < 600 所以它是电话

crossAxisCount: MediaQuery.of(context).size.shortestSide < 600 ? 2 : 4,

作为一个选项，您可以像这样为 BuildContext 创建扩展

extension ContextExtension on BuildContext {
  bool get isTablet => MediaQuery.of(this).size.shortestSide > 600;

  bool get isPhone => MediaQuery.of(this).size.shortestSide < 600;
}

并使用它：

crossAxisCount: context.isTablet ? 4 : 2

Answer 2

您可以使用 wrap 小部件而不是 gridview 您可以在本文中了解如何使用 wrap 小部件： https : //medium.com/flutter-community/flutter-wrap-widget-e1ee0b005b16