Flutter中无数据的GridView.builder如何自动收起不占用空白空间

最优解决思路 #

直接对数据源做非空判断，为空时替换GridView为无尺寸占位组件，规避GridView自身的默认高度计算逻辑，实现成本最低且效果稳定。

代码修改示例 #

Widget getGrid() {
  // 新增空列表判断
  if (photos.isEmpty) {
    // 无需任何展示时返回0尺寸组件
    return const SizedBox.shrink();
    // 若需要展示空状态提示，可替换为自定义组件，例如：
    // return Padding(
    //   padding: EdgeInsets.all(20),
    //   child: Text("暂无上传的图片"),
    // );
  }
  return Container(
    child: GridView.builder(
      padding: EdgeInsets.all(0),
      shrinkWrap: true,
      physics:  NeverScrollableScrollPhysics(),
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 200,
      ),
      itemCount: photos.length,
      itemBuilder: (BuildContext ctx, index) {
        return Container(
          color: Colors.blueGrey,
        );
      },
    ),
  );
}

原因说明 #

即使设置了shrinkWrap: true，GridView作为滚动容器，在子项数量为0时，依然会根据gridDelegate的配置计算基础占位高度，不会自动收缩到0，主动判断空状态替换组件可以直接规避该底层逻辑问题。

问题原效果 #

• 空状态下空白占用效果：
  
• 添加1个元素后的正常效果：
  

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