Flutter中Column组件对齐属性失效,元素始终居顶的问题求助
问题原因与修复方案
你的问题出在外层Column没有占据整个可用垂直空间,同时内部需要居中的Column没有获得足够空间来执行居中对齐:
- 最外层
Column默认mainAxisSize: MainAxisSize.min,只会包裹子组件高度,不会撑满屏幕垂直空间; - 内部
Column即使设置了mainAxisSize: MainAxisSize.max,但因父Column未分配足够空间,mainAxisAlignment: MainAxisAlignment.center无法生效。
修复步骤
- 给最外层
Column添加mainAxisSize: MainAxisSize.max,让它占据整个屏幕垂直空间; - 用
Expanded包裹内部需要居中的Column,让它占据外层Column中Row之外的所有剩余垂直空间。
修改后的完整代码
var text = 'Эти данные нужны нам для того, чтобы мы могли выбрать наиболее подходящие для вас макеты.'; class FullName extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( backgroundColor: ConfigColor.background, body: SafeArea( child: Container( margin: const EdgeInsets.symmetric(horizontal: 12), child: Column( // 让外层Column占满垂直空间 mainAxisSize: MainAxisSize.max, children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ IconButton( onPressed: () { context.go('/sendCode'); }, icon: const Icon(Icons.chevron_left) ), Text('Как вас зовут?', style: TextStyle(color: ConfigColor.textBlack, fontWeight: FontWeight.w500, fontSize: 19),), const SizedBox(width: 24,), ], ), // 用Expanded包裹内部Column,占据剩余垂直空间 Expanded( child: Column( mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.center, children: [ Text(text, style: TextStyle(color: ConfigColor.grey, fontSize: 16, fontWeight: FontWeight.w400),), Text(text, style: TextStyle(color: ConfigColor.grey, fontSize: 16, fontWeight: FontWeight.w400),), Text(text, style: TextStyle(color: ConfigColor.grey, fontSize: 16, fontWeight: FontWeight.w400),), ], ), ) ], ) ) ), ); } }
内容的提问来源于stack exchange,提问作者Daniil
相关产品推荐
相关产品推荐

