Flutter GridView中BoxDecoration底部溢出问题解决方案咨询

我明白你遇到的问题了——GridView的子项里，当文本过长换行或者图片尺寸没控制好时，Column的内容会撑破容器导致底部溢出。这是因为默认情况下，Text不会自动适配剩余空间，而Column会优先满足内容的高度需求，超出了GridView分配给子项的空间范围。

下面是修改后的代码，我会标注关键的调整点：

Expanded(
  child: Padding(
    padding: EdgeInsets.only(bottom: 10, left: 15, right: 10),
    child: GridView.count(
      crossAxisCount: 3,
      crossAxisSpacing: 5.0,
      mainAxisSpacing: 5.0,
      shrinkWrap: true,
      children: List.generate(25, (index) {
        return Padding(
          padding: EdgeInsets.all(3.0),
          child: Container(
            margin: const EdgeInsets.all(3.0),
            padding: const EdgeInsets.all(3.0),
            decoration: BoxDecoration(
              border: Border.all(
                width: 1.0,
                color: Color(0xFFF9AD16),
              ),
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Image.asset(
                  "images/register_top_logo.png",
                  height: 50,
                  width: 50,
                  fit: BoxFit.cover, // 确保图片按设定尺寸缩放，避免原始尺寸过大撑爆容器
                ),
                SizedBox(height: 10),
                // 核心调整：用Flexible包裹Text，让文本在剩余空间内自动换行
                Flexible(
                  child: Text(
                    "Categoryjkjkj",
                    style: TextStyle(
                      color: Color(0xFF0066CB),
                      fontSize: 20.0,
                    ),
                    textAlign: TextAlign.center, // 换行后文本保持居中，提升美观度
                    maxLines: null, // 允许文本根据空间自动换行，不限行数
                    overflow: TextOverflow.visible, // 确保文本完整显示（若需截断可改为ellipsis）
                  ),
                ),
              ],
            ),
          ),
        );
      }),
    ),
  ),
)

关键调整说明： #

• Flexible包裹Text：Flexible会告诉Column，这个Text组件可以占用子项的剩余可用空间，当文本过长时会自动换行，不会强制Column扩展高度导致溢出。
• Text的排版设置：maxLines: null解除行数限制让文本自动换行，textAlign: TextAlign.center让换行后的文本保持居中对齐。如果希望空间不足时文本截断并显示省略号，可以把overflow改成TextOverflow.ellipsis，同时设置maxLines: 2（比如限制最多两行）。
• Image的fit属性：添加fit: BoxFit.cover确保图片严格按照你设定的50x50尺寸显示，避免原始图片尺寸过大撑破容器。

内容的提问来源于stack exchange，提问作者mayur.pancholi