如何解决与约束相关的中心小部件行为
基于Flutter Docs,
... 这个小部件将尽可能大,如果它的尺寸是 约束和 widthFactor 和 heightFactor 为空。如果一个维度 不受约束且相应的大小因子为空,则 小部件将匹配该维度中其子项的大小。 ...
虚拟代码:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',home: LoginPage(),);
}
}
class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Container(
//height: 100,child: Column(
children: <Widget>[
Center(
child: Text('logo'),),],);
}
}
输出:它只是打印水平居中但不是垂直居中的“徽标”。
这遵循文档,“如果维度不受约束......匹配其子级的大小”。在这种情况下,Column
具有无界的垂直约束,因此 Center
的传入约束也是无界的。因此,Center 匹配 Text
小部件的高度,而不是垂直居中。
虚拟代码(注释未注释):
我们运行完全相同的代码,但 //height: 100,
被取消注释。
我认为应该发生的事情:由于现在垂直尺寸受到限制,我认为“徽标”将垂直和水平居中。
问题:为什么会发生这种情况?根据文档:“小部件将尽可能大......为空”所以 Center
小部件不应该尽可能大并且垂直和水平地居中孩子。
旁注:如果我删除 Column
小部件,我只会得到水平和垂直居中的预期行为
解决方法
发生这种情况的原因是 Column
的 mainAxis
是高度是无界的,因此使 Center
与其孩子的身高相匹配。尽管您已将 Column
的 height
限制为 100,但其 mainAxis
仍然是无界的。把 Column
想象成一个 ListView
,虽然 ListView
的高度是有界的,但它仍然允许它的孩子占据比可用高度更多的空间。
解决方案:
- 您可以通过将
mainAxisAlignment
设置为MainAxisAlignment.center
来居中您的文本小部件 - 使用 Spacer()
例如:
children: [
Spacer(),Text(),Spacer(),]
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。