You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter:如何让Row内的Container占满全部可用垂直高度?

解决Flutter自定义ListTile图片容器随文本高度自适应问题

你当前的问题是左侧图片容器没有跟着右侧文本的高度自动填充垂直空间,只需要两处小修改就能搞定:

  1. 给包裹Image的左侧Container加上height: double.infinity,让它强制占满父级Expanded的全部可用垂直高度;
  2. 给外层Row设置crossAxisAlignment: CrossAxisAlignment.stretch,确保Row内的子元素都拉伸到Row的最大高度。

修改后的完整代码如下:

Container(
  decoration: BoxDecoration(
    color: ColorsApp.line_vertical_grey.withOpacity(.2),
    borderRadius: BorderRadius.circular(10),
  ),
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.stretch, // 让子元素拉伸至Row最大高度
    children: [
      Expanded(
        flex: 2,
        child: Container(
          height: double.infinity, // 强制占满垂直高度
          child: ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: Image.network(
              'https://images.unsplash.com/photo-1589198360919-1fb67e42bda5?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fGZpbmQlMjB5b3Vyc2VsZnxlbnwwfHwwfHx8MA%3D%3D',
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
      const SizedBox(
        width: 5,
      ),
      Expanded(
        flex: 5,
        child: Padding(
          padding: const EdgeInsets.all(15.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Row(
                children: [
                  Expanded(
                    child: Text(
                      'HR Genius',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  const SizedBox(
                    width: 20,
                  ),
                  Container(
                    padding: const EdgeInsets.symmetric(
                        horizontal: 6, vertical: 2),
                    decoration: BoxDecoration(
                      color: ColorsApp.black,
                      borderRadius: BorderRadius.circular(50),
                    ),
                    child: Text(
                      'HR',
                      style: TextStyle(
                        fontWeight: FontWeight.w600,
                        fontSize: 10,
                        color: ColorsApp.white,
                      ),
                    ),
                  ),
                ],
              ),
              const SizedBox(
                height: 5,
              ),
              Text(
                'Dicta velit consequatur beatae. Nisi ad eligendi in incidunt blanditiis sed dolorum. Et unde quam blanditiis ab dolor atque.',
                style: TextStyle(fontSize: 12),
                maxLines: 3,
                overflow: TextOverflow.ellipsis,
              )
            ],
          ),
        ),
      ),
    ],
  ),
);

修改完成后,图片容器会自动匹配右侧文本区域的高度,完全填充垂直方向的空间,不管文本内容多少都能自适应。

内容的提问来源于stack exchange,提问作者dipansh

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.02 10:57:16