Flutter中Card子Image高度超出父组件，求布局解决方案

问题描述 #

使用GridView展示包含Image的Card时，Image高度超出Card范围，需实现以下布局效果：

• 每行显示2个Card；
• Card的宽高不固定；
• Image高度根据自身宽度等比缩放。

问题原因 #

默认的Image组件会按照图片原始尺寸渲染，没有自身尺寸约束；同时Column组件默认允许子项无限扩展，导致Image突破Card的边界限制。

解决方法 #

通过AspectRatio组件约束Image的宽高比，结合BoxFit属性实现等比缩放，同时调整Column的布局约束让子项适配Card宽度。

修改后的代码 #

class SquadSelectionScreen extends StatelessWidget {
  final List<Team> teams;

  const SquadSelectionScreen({super.key, required this.teams});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Squads'),
      ),
      body: GridView.count(
        crossAxisSpacing: 10,
        crossAxisCount: 2,
        padding: const EdgeInsets.all(16),
        children: teams
            .map(
              (team) => SquadView(team: team),
            )
            .toList(),
      ),
    );
  }
}

class SquadView extends StatelessWidget {
  final Team team;

  const SquadView({super.key, required this.team});

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        context.push('/squads/${team.code}');
      },
      child: Card(
        elevation: 1,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // 自定义图片宽高比，示例为1:1，可根据实际图片比例调整
            AspectRatio(
              aspectRatio: 1,
              child: Image(
                image: NetworkImage(team.imageUrl),
                fit: BoxFit.cover,
              ),
            ),
            const SizedBox(height: 8),
            Center(
              child: Text(team.name),
            ),
            const SizedBox(height: 8),
          ],
        ),
      ),
    );
  }
}

关键修改说明 #

• crossAxisAlignment: CrossAxisAlignment.stretch：让Image撑满Card的宽度，保证每行两个Card的宽度一致；
• AspectRatio：指定图片宽高比，Image会根据Card宽度自动计算高度，实现等比缩放；
• fit: BoxFit.cover：图片填满容器且保持比例，超出部分自动裁剪（若需完整显示图片，可替换为BoxFit.contain）；
• 底部SizedBox：避免文字贴住Card边缘，优化视觉体验。

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