Flutter中实现GridView动态高度适配2*2网格 解决固定高度布局问题

核心实现逻辑：全平台网格类组件默认自带滚动属性，会优先占用父容器分配的最大可用高度。要实现高度仅适配2*2内容，核心是关闭网格组件的滚动特性，强制其高度随内部子元素总高度计算。

Flutter 场景 #

使用GridView.count构造，配合两个关键属性即可实现高度自适应：

GridView.count(
  crossAxisCount: 2, // 指定2列
  shrinkWrap: true, // 高度仅包裹内部内容
  physics: const NeverScrollableScrollPhysics(), // 禁用组件自身滚动能力
  childAspectRatio: 1.2, // 按需调整子项宽高比，控制整体网格高度
  children: const [
    // 此处放置你的4个子组件
    Card(child: Text('项1')),
    Card(child: Text('项2')),
    Card(child: Text('项3')),
    Card(child: Text('项4')),
  ],
)

如果子项高度不固定，可替换为GridView.builder配合SliverChildListDelegate实现动态高度适配。

Android Jetpack Compose 场景 #

使用LazyVerticalGrid时添加自适应高度修饰符，同时关闭滚动即可：

LazyVerticalGrid(
  columns = GridCells.Fixed(2),
  modifier = Modifier.wrapContentHeight(), // 高度随内容自动计算
  userScrollEnabled = false, // 禁用滚动
  verticalArrangement = Arrangement.spacedBy(8.dp),
  horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
  items(4) { index ->
    // 此处放置你的子项布局
    Text(text = "项$index")
  }
}

如果子项高度差异较大，也可以直接用嵌套Column+Row实现非懒加载的22网格，高度会完全随内容适配。*

前端CSS 场景 #

使用原生CSS Grid布局，无需设置固定高度，高度会自动根据子项总高度撑开：

.grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列等宽分配 */
  grid-template-rows: repeat(2, auto); /* 2行高度随内容自动调整 */
  gap: 8px; /* 格子间距可按需调整 */
}

<div class="grid-2x2">
  <div>项1</div>
  <div>项2</div>
  <div>项3</div>
  <div>项4</div>
</div>

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