Flutter：窗口调整时StaggeredGridView项无法自动重排的解决方法

问题核心原因：StaggeredGridView.extentBuilder 默认不会监听窗口尺寸变化，当窗口大小改变时，它不会自动触发重建，因此布局无法实时调整。

解决方案：触发网格在窗口尺寸变化时重建 #

以下两种方法均可让网格感知窗口尺寸变化并实时更新布局：

方法1：使用LayoutBuilder包裹网格

LayoutBuilder会在父组件约束变化（如窗口resize）时自动重建子组件，从而触发StaggeredGridView重新计算布局。

修改简化示例代码：

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return StaggeredGridView.extentBuilder(
          maxCrossAxisExtent: 200,
          staggeredTileBuilder: (index) => const StaggeredTile.fit(1),
          itemCount: 50,
          itemBuilder: (context, index) {
            return _buildCard(index);
          },
        );
      },
    );
  }

  Widget _buildCard(int index) {
    return Card(
      child: Text('Card $index'),
    );
  }
}

实际项目中只需将StaggeredGridView用LayoutBuilder包裹：

body: LayoutBuilder(
  builder: (context, constraints) {
    return StaggeredGridView.extentBuilder(
      maxCrossAxisExtent: 480,
      staggeredTileBuilder: (index) => StaggeredTile.fit(1),
      itemCount: _platformNames.length,
      itemBuilder: (context, index) {
        return _buildCard(_platformNames[index], index);
      },
    );
  },
),

方法2：监听MediaQuery变化

在组件build方法中访问MediaQuery.of(context)，让组件订阅媒体查询变化，窗口尺寸改变时自动触发重建。

修改代码：

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    // 订阅媒体查询变化，触发组件重建
    MediaQuery.of(context).size;
    
    return StaggeredGridView.extentBuilder(
      maxCrossAxisExtent: 200,
      staggeredTileBuilder: (index) => const StaggeredTile.fit(1),
      itemCount: 50,
      itemBuilder: (context, index) {
        return _buildCard(index);
      },
    );
  }
}

原理说明 #

两种方法本质都是让StaggeredGridView在窗口尺寸变化时重新执行build方法，从而重新计算网格列数和tile位置，实现实时布局更新。

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