扑。- 如何在Gridview中拥有动态crossAxisCount

Question

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

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

Answer 1

您可以使用换行小部件而不是 gridview 换行对每个子项进行布局，并尝试将子项放置在主轴中与前一个子项相邻的位置（由方向给定），并在两者之间留有间距。您可以在本文中了解如何使用包装小部件： https://medium.com/flutter-community/flutter-wrap-widget-e1ee0b005b16

Answer 2

你可以检查设备的最短边是否< 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