颤振.-如何在Gridview中拥有动态crossAxisCount

Question

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

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

Answer 1

您可以使用包装小部件而不是gridviewWrap布局每个子对象，并尝试将子对象放置在主轴上与前一个子对象相邻的位置(由方向给定(，在其间留出间距。您可以在本文中学习如何使用包装小部件：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