Flutter如何按屏幕宽度设置响应式网格每行最大项数

ResponsiveGridList自动计算列数的逻辑是：在你设定的最小/最大列数区间内，结合minItemWidth和当前可用宽度算出能放下的最大列数。你之前配置minItemsPerRow:2、maxItemsPerRow:4时，中间宽度出现3列就是这个自动计算逻辑导致的。
要实现固定断点切换列数、不出现中间列数的效果，核心思路是根据屏幕宽度阈值，给minItemsPerRow和maxItemsPerRow传入相同的值，强制组件使用你指定的列数，跳过自动计算逻辑。

代码实现 #

@override
Widget build(BuildContext context) {
  // 获取当前屏幕宽度，已锁定竖屏无需额外处理方向变化
  final screenWidth = MediaQuery.of(context).size.width;
  // 按你设定的2000px阈值判断固定列数
  final fixedColumnCount = screenWidth > 2000 ? 4 : 2;

  return ResponsiveGridList(
    horizontalGridSpacing: 15, // 网格项水平间距
    verticalGridSpacing: 0, // 网格项垂直间距
    minItemWidth: 0, // 设为0避免最小宽度约束干扰固定列数规则
    minItemsPerRow: fixedColumnCount, // 最小/最大列数设为同一个值，强制固定列数
    maxItemsPerRow: fixedColumnCount,
    // 此处保留你原有的其他配置，比如children属性
    children: [],
  );
}

配置说明 #

• 同断点下minItemsPerRow和maxItemsPerRow值必须完全一致，否则组件仍会自动计算区间内的列数，出现你之前遇到的3列问题
• minItemWidth设为0是为了消除最小宽度约束的优先级影响，保证列数完全由你设置的fixedColumnCount控制，不会出现布局溢出或者列数不符合预期的问题
• 由于应用已经锁定竖屏，MediaQuery获取到的屏幕宽度不会随设备旋转突变，列数切换只会在你设定的2000px阈值处触发，完全符合手机2列、平板/PC4列的需求

内容的提问来源于stack exchange，提问作者Me too