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

如何让Flutter中Row内的Column垂直扩展至最大高度?

解决Row内蓝色区域垂直占满最大高度的问题

需要让Row内的蓝色Column垂直扩展至最大高度,已查阅类似问题并尝试解决但未成功,以下是原始代码:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Card(
      color: Colors.amber,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Expanded(
              child: ListTile(
            contentPadding: const EdgeInsets.symmetric(horizontal: 40),
            title: AutoSizeText('text',
                maxLines: 1,
                style: Theme.of(context).textTheme.bodyText1),
            subtitle: AutoSizeText(
              'subText',
              maxLines: 1,
              style: Theme.of(context).textTheme.subtitle1!.copyWith(
                  color: Theme.of(context).colorScheme.onSurfaceVariant,
                  fontWeight: FontWeight.w500),
            ),
          )),
          Column(
            children: [
              Container(
                padding: EdgeInsets.zero,
                margin: EdgeInsets.zero,
                clipBehavior: Clip.antiAlias,
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
                child: FaIcon(
                  FontAwesomeIcons.locationDot,
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  ],
)

预期效果

预期效果


修改方案

核心问题是右侧蓝色区域默认仅包裹内容高度,需通过Expanded让它匹配Row的整体高度,同时确保图标居中:

修改后的代码:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Card(
      color: Colors.amber,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          Expanded(
            child: ListTile(
              contentPadding: const EdgeInsets.symmetric(horizontal: 40),
              title: AutoSizeText('text',
                  maxLines: 1,
                  style: Theme.of(context).textTheme.bodyText1),
              subtitle: AutoSizeText(
                'subText',
                maxLines: 1,
                style: Theme.of(context).textTheme.subtitle1!.copyWith(
                      color: Theme.of(context).colorScheme.onSurfaceVariant,
                      fontWeight: FontWeight.w500,
                    ),
              ),
            ),
          ),
          // 用Expanded包裹蓝色容器,使其占满Row高度
          Expanded(
            child: Container(
              color: Colors.blue,
              child: const Center(
                child: FaIcon(FontAwesomeIcons.locationDot),
              ),
            ),
          ),
        ],
      ),
    ),
  ],
)

关键说明

  1. Expanded会让子组件占据Row中剩余的可用空间,自动匹配Row由左侧ListTile撑开的高度
  2. Center组件确保图标在蓝色容器内垂直水平居中
  3. 移除冗余的Column嵌套,直接用Container配合Expanded简化布局

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

相关产品推荐
方舟 Agent Plan

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

最近更新时间:2026.08.05 08:22:49