为什么列中的元素没有对齐?我尝试了不同的mainAxisSize和mainAxisAlignment值,但没有任何变化,所有文本都停留在顶部。告诉我如何解决此问题?
密码-
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),),
结果-
完整代码-
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(
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,),
],
),
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),),
],
)
],
)
)
),
);
}
}
2条答案
按热度按时间goucqfw61#
请试试这个
xa9qqrwz2#
根据您提供的代码片段,问题可能出在Column小部件的mainAxisSize属性上。您将其设置为MainAxisSize.max,这将导致Column在主轴中占用尽可能多的空间(在本例中为垂直)。这意味着Column将与其父代一样高,即使其子代没有占用所有空间。
尝试将mainAxisSize设置为MainAxisSize.min,这应会导致Column与其主轴中的子级一样小。您也可以尝试MainAxisSize.min并调整mainAxisAlignment以正确对齐元素。
如果你想让它们保持在顶部,另一个选择是在列周围添加一些填充,如下所示:
需要注意的是,由于text变量是相同的,它将显示相同的文本三次,如果不同,它将正确对齐。