Flutter如何实现自适应高度GridView并解决底部溢出报错问题

问题原因 #

你的溢出错误和SingleChildScrollView嵌套GridView的配置无关（你已经正确配置了shrinkWrap: true和primary: false），问题出在GridView子项内部的布局逻辑：

• 子项是高度自适应的Container，内部Column使用了Expanded组件，在无固定高度的父容器中Expanded会尝试无限拉伸占据剩余空间，触发布局溢出
• 商品描述长文本没有做行数限制和溢出处理，文本内容过长会撑高父容器，超出Grid子项默认分配的高度

解决方案 #

• 第一步：删除包裹Text("Informatique")的Expanded组件，不需要通过Expanded撑空间
• 第二步：给长文本组件添加maxLines和overflow属性，限制最大行数，超出部分显示省略号
• 第三步（可选）：给GridView.count添加childAspectRatio参数，手动调整子项的宽高比，适配你的卡片内容高度

修改后完整代码 #

SingleChildScrollView(
  scrollDirection: Axis.vertical,
  child: GridView.count(
    padding: const EdgeInsets.all(10),
    shrinkWrap: true,
    primary: false,
    crossAxisSpacing: 10,
    mainAxisSpacing: 10,
    crossAxisCount: 2,
    // 新增：调整子项宽高比，根据你的内容调整数值即可，数值越小高度越高
    childAspectRatio: 0.75,
    children: <Widget>[
      Container(
        decoration: BoxDecoration(
          color: LightColor.background,
          borderRadius: BorderRadius.all(Radius.circular(20)),
          boxShadow: <BoxShadow>[
            BoxShadow(
                color: Color(0xfff8f8f8),
                blurRadius: 15,
                spreadRadius: 10),
          ],
        ),
        child: Container(
          padding: EdgeInsets.symmetric(
              horizontal: 20, vertical: 10),
          child: Stack(
            alignment: Alignment.center,
            children: <Widget>[
              Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment:
                    MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  Container(
                    width: 100,
                    height: 100,
                    child: Stack(
                      alignment: Alignment.center,
                      children: <Widget>[
                        CircleAvatar(
                          radius: 40,
                          backgroundColor:
                              LightColor.orange.withAlpha(40),
                        ),
                        Image.network(
                            "https://assets.swappie.com/iPhone-11-Pro-midnight-green-back.png")
                      ],
                    ),
                  ),
                  // 移除了外层Expanded
                  Text("Informatique"),
                  Center(
                    // 新增：长文本限制行数和溢出处理
                    child: Text(
                        "Sony PS4 + Controller jdjjedjdjjfr hjhhjjhhjhj hjhjhbbhbh , hhhh ",
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                    ),
                  ),
                  Text("Brdo,Tunis"),
                  Text("1200 DT")
                ],
              ),
            ],
          ),
        ),
      ),
    ],
  ),
)

如果修改后觉得卡片高度不合适，调整childAspectRatio的数值即可，数值越小卡片高度越高，反之越矮。

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