如何让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), ), ), ), ], ), ), ], )
关键说明
Expanded会让子组件占据Row中剩余的可用空间,自动匹配Row由左侧ListTile撑开的高度Center组件确保图标在蓝色容器内垂直水平居中- 移除冗余的Column嵌套,直接用Container配合Expanded简化布局
内容的提问来源于stack exchange,提问作者Mus
相关产品推荐
相关产品推荐

