Flutter使用Image.network时网格项内文字与图片间距调整问题

出现图片和底部文字紧贴的原因是GridTile默认将子组件铺满整个容器，底部的footer是悬浮叠加在子组件底部的，所以图片会直接延伸到footer顶部没有预留间距，可以通过以下两种方法修改：

方法1：保留GridTile结构，给图片添加底部内边距 #

给Image.network外层套Padding，预留出间距+footer高度即可，修改后对应代码如下：

widget = Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Colors.grey[100],
  ),
  child: GridTile(
    child: Padding(
      // 40是footer高度，额外加10作为图片和文字的间距，可自行调整数值
      padding: const EdgeInsets.only(bottom: 50),
      child: Image.network(
        'https://static.nike.com/a/images/t_prod_ss/w_640,c_limit,f_auto/qebbe6yb2crumsanfyu4/sacai-x-nike-ldwaffle-black-release-date.jpg',
        fit: BoxFit.cover, // 可选，保证图片缩放适配容器
      ),
    ),
    footer: Container(
      color: Colors.black54,
      height: 40,
      child: const GridTileBar(
        title: Text('Sacai x Nike Ldwaffle Black',
            maxLines: 2),
      ),
    ),
  ),
);

方法2：改用Column布局，灵活性更高 #

如果后续还要调整其他布局细节，直接放弃GridTile用Column手动排布更可控，还可以自行设置圆角和间距：

widget = Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Colors.grey[100],
  ),
  clipBehavior: Clip.hardEdge, // 裁剪子组件超出圆角的部分
  child: Column(
    children: [
      Expanded(
        child: Image.network(
          'https://static.nike.com/a/images/t_prod_ss/w_640,c_limit,f_auto/qebbe6yb2crumsanfyu4/sacai-x-nike-ldwaffle-black-release-date.jpg',
          fit: BoxFit.cover,
          width: double.infinity,
        ),
      ),
      const SizedBox(height: 8), // 这里就是图片和文字的间距，可自行调整
      Container(
        color: Colors.black54,
        height: 40,
        padding: const EdgeInsets.symmetric(horizontal: 16),
        alignment: Alignment.centerLeft,
        child: const Text(
          'Sacai x Nike Ldwaffle Black',
          maxLines: 2,
          style: TextStyle(color: Colors.white, fontSize: 14),
        ),
      )
    ],
  ),
);

内容的提问来源于stack exchange，提问作者Jian Yuan Ng