Flutter GridView多平台适配：移动端2列平板端5列实现咨询

1. 直接修改固定列数（快速满足需求） #

你只需要调整crossAxisCount的三元判断值，把平板端的3改成5，就能实现移动端2列、平板端5列的效果：

GridView.builder(
              physics: const NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              scrollDirection: Axis.vertical,
              itemBuilder: (context, index) {
                return SizedBox(
                  child: ProductCard(product: products[index]),
                );
              },
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                // 核心修改：平板端设置为5列
                crossAxisCount: isTablet(context) ? 5 : 2,
                crossAxisSpacing: 10.0,
                mainAxisSpacing: isTablet(context) ? 60.0 : 20.0,
                mainAxisExtent: isTablet(context) ? 180 : 170,
              ),
              itemCount: products.length,
            ),

2. 进阶：基于屏幕宽度动态适配（适配不同尺寸平板） #

如果希望平板端的列数能根据屏幕大小自动调整（比如大屏平板显示更多列，小屏平板保持5列左右），可以直接通过屏幕宽度计算列数，替代isTablet的固定判断：

GridView.builder(
              physics: const NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              scrollDirection: Axis.vertical,
              itemBuilder: (context, index) {
                return SizedBox(
                  child: ProductCard(product: products[index]),
                );
              },
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                // 以600dp为平板/移动端的分界，平板端按每列约140dp计算列数
                crossAxisCount: MediaQuery.sizeOf(context).width > 600 
                    ? (MediaQuery.sizeOf(context).width ~/ 140) 
                    : 2,
                crossAxisSpacing: 10.0,
                mainAxisSpacing: MediaQuery.sizeOf(context).width > 600 ? 60.0 : 20.0,
                mainAxisExtent: MediaQuery.sizeOf(context).width > 600 ? 180 : 170,
              ),
              itemCount: products.length,
            ),

这种方式会根据屏幕宽度自动计算列数，比如宽度800dp的平板，800/140≈5.7，取整后就是5列，刚好符合你的需求；更大的平板会自动增加列数，适配更灵活。

内容的提问来源于stack exchange，提问作者talal habib