假设我们想要在页面的顶部和中心显示我们的应用程序的徽标，如下所示：
起初，这似乎是一件容易的事，但要从中学到很多东西！
让我们首先实现main函数，它将实例化并显示LoginPage小部件：
main.dart
import 'package:flutter/material.dart';
import 'package:logo/pages/login_page.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: LoginPage(),
);
}
}
我们很可能想在我们的徽标下面添加另一个小部件，比如用户名和密码的两个输入框。因此，使用以下命令启动我们的小部件树是个好主意Column：
login_page.dart
import 'package:flutter/material.dart';
class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: <Widget>[
Text('Logo'),
],
),
);
}
}
到目前为止，我们在状态栏下面有一个带有“Logo”的空白页面：
我几乎看不到“徽标”，因为它隐藏在状态栏下面。是否有可能告诉Flutter状态栏区域不属于我们的应用程序？是! 通过将我们的Scaffold小部件包装在SafeArea小部件中：
一个小部件，通过足够的填充来保护其子级，以避免操作系统的入侵。例如，这将使子项缩进足以避免屏幕顶部的状态栏。它还会缩小子级的尺寸以避免iPhone X上的凹槽或显示器的其他类似创意物理特征。
所以让我们把它包起来：
login_page.dart
import 'package:flutter/material.dart';
class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Column(
children: <Widget>[
Text('Logo'),
],
),
),
);
}
}
结果：
正如您所看到的，现在状态栏下的区域不是我们应用程序的一部分，我的手机不会使状态栏透明，因为我不需要再看它下面的内容了！
现在让我们以小部件为中心。
问题：我们知道Column小部件的子级默认中心水平对齐（沿着交叉轴）。那么为什么“Logo”中心不在列中对齐？
答：是的！但重点是我们的专栏与其最宽的孩子一样宽，因此与“徽标”一样宽。
可以使用名为“Flutter Inspector”的工具查看我们的小部件的边界。如果您使用的是Android Studio，请从IDE的右边缘选择“Flutter Inspector”选项卡，然后按“Toggle Debug Paint”按钮：
检查工具
现在，窗口小部件边界将对您可见。可以很容易地看出Column小部件和它最宽的子节点一样宽，毫无疑问Text小部件位于Column水平方向的中心：
这里有几个选项可以在屏幕上居中对齐文本。让我们这样做：
- 将
Text窗口小部件包装在与屏幕一样宽的另一个窗口小部件中， - 将
Text窗口小部件对齐其父级的中心。
在这里该中心部件是非常有用的。请注意文档中的以下内容：
一个小部件，它将子部件集中在自己内部。
不要误解它：
- 该
Center插件是不是意味着要在其父的中心 -
Center窗口小部件的子项旨在放置在Center窗口小部件的中心
因此，中心窗口小部件与其子窗口大小相同将毫无意义！中心小部件将始终尝试扩展自己！
让我们看看它的实际效果：
import 'package:flutter/material.dart';
class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Column(
children: <Widget>[
Center(
child: Text('Logo'),
),
],
),
),
);
}
}
边界保持可见的结果：
如您所见，Center窗口小部件已变得与屏幕一样宽，并且Text窗口小部件在其中心对齐。
正如我告诉你的那样，Center小部件将尽可能大。但为什么它只是水平拉伸？为什么它不垂直扩展到页面底部？答案在于：
如果它的尺寸受到约束且widthFactor和heightFactor为null，则此窗口小部件将尽可能大。如果维度不受约束且相应的大小因子为null，则窗口小部件将匹配其在该维度中的子项大小。如果大小因子不为null，则此小部件的相应维度将是子维度和大小因子的乘积。例如，如果width Factor为2.0，那么此小部件的宽度将始终是其子宽度的两倍。
事实：
- 父组件给子组件施加了限制（这些被称为入境约束，因为他们来自父组件！）
- 列不受限制或垂直无界。这意味着专栏告诉他们的子组件：“ 你可以在垂直方向上尽可能多地占用空间 ”。
- 列受到水平约束或限制。这意味着专栏告诉他们的子组件：“ 你不能在水平方向自由地成长，这是有一定限度的！”。
- 大多数情况下，当Incoming Constraint在给定方向上无界时，子窗口小部件决定在该方向上尽可能小。即它决定缩小自己以匹配其子组件的大小。在这里，专栏告诉它的子组件（包括中心小部件），“ 你没有限制在垂直方向上成长，你可以拥有你想要我的子组件的任何高度！”。因此，Center小部件决定将其高度缩小到其子级的高度（Text小部件）。这正是中心窗口小部件的文档所说的：“ 如果维度不受约束且相应的大小因子为空，则窗口小部件将匹配其在该维度中的子项大小。”。
- 相反，当Incoming Constraint以给定方向限制时，子窗口小部件将尝试在该方向上尽可能大。在这里，专栏告诉它的子组件（包括中心小部件），“ 你只能在水平方向上成长，你只能长到屏幕的边缘！”。因此，Center小部件决定将其宽度扩展到Incoming Constraint允许的范围，直到屏幕边缘。这正是Center小部件的文档所说的：“ 如果它的尺寸受到约束并且widthFactor和heightFactor为null，那么这个小部件将尽可能大。”。
现在让我们给“Logo”的顶部留一些余地。我将这三种方式做到：
- 将Center小部件包装在Container中，并设置Container的上边距。
import 'package:flutter/material.dart';
class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 100),
child: Center(
child: Text('Logo'),
),
),
],
),
),
);
}
}
2.在中心窗口小部件之前添加具有特定高度的“SizedBox”：
import 'package:flutter/material.dart';
class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Column(
children: <Widget>[
SizedBox(
height: 100,
),
Center(
child: Text('Logo'),
),
],
),
),
);
}
}
3.使用heightFactor中心小部件！让我们再次阅读Center小部件的文档：
如果大小因子不为null，则此小部件的相应维度将是子维度和大小因子的乘积。例如，如果widthFactor为2.0，则此窗口小部件的宽度将始终是子窗口宽度的两倍。
这意味着如果我们设置heightFactor为10，则中心窗口小部件的高度将变为“ 其子项的*10 高度 ”，即“ *文本窗口小部件的10 高度 ”。这将导致我们的“徽标”之上的一些余量：
class LoginPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Column(
children: <Widget>[
Center(
heightFactor: 10,
child: Text('Logo'),
),
],
),
),
);
}
}
结果是：
如您所见，Center小部件的边界显示Center小部件的高度现在是“Logo”文本小部件高度的十倍。当然，这不是添加上边距的好方法，因为它取决于文本的大小。我只使用此方法来演示“heightFactor”和“widthFactor”参数的含义。
谢谢阅读！
翻译自：https://medium.com/@meysam.mahfouzi/center-widget-the-story-of-a-logo-8c0380bcdc45
