Flutter - 了解中心窗口小部件

假设我们想要在页面的顶部和中心显示我们的应用程序的徽标，如下所示：

起初，这似乎是一件容易的事，但要从中学到很多东西！

让我们首先实现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水平方向的中心：

这里有几个选项可以在屏幕上居中对齐文本。让我们这样做：

1. 将Text窗口小部件包装在与屏幕一样宽的另一个窗口小部件中，
2. 将Text窗口小部件对齐其父级的中心。

在这里该中心部件是非常有用的。请注意文档中的以下内容：

一个小部件，它将子部件集中在自己内部。

不要误解它：

1. 该Center插件是不是意味着要在其父的中心
2. 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，那么此小部件的宽度将始终是其子宽度的两倍。

事实：

1. 父组件给子组件施加了限制（这些被称为入境约束，因为他们来自父组件！）
2. 列不受限制或垂直无界。这意味着专栏告诉他们的子组件：“ 你可以在垂直方向上尽可能多地占用空间 ”。
3. 列受到水平约束或限制。这意味着专栏告诉他们的子组件：“ 你不能在水平方向自由地成长，这是有一定限度的！”。
4. 大多数情况下，当Incoming Constraint在给定方向上无界时，子窗口小部件决定在该方向上尽可能小。即它决定缩小自己以匹配其子组件的大小。在这里，专栏告诉它的子组件（包括中心小部件），“ 你没有限制在垂直方向上成长，你可以拥有你想要我的子组件的任何高度！”。因此，Center小部件决定将其高度缩小到其子级的高度（Text小部件）。这正是中心窗口小部件的文档所说的：“ 如果维度不受约束且相应的大小因子为空，则窗口小部件将匹配其在该维度中的子项大小。”。
5. 相反，当Incoming Constraint以给定方向限制时，子窗口小部件将尝试在该方向上尽可能大。在这里，专栏告诉它的子组件（包括中心小部件），“ 你只能在水平方向上成长，你只能长到屏幕的边缘！”。因此，Center小部件决定将其宽度扩展到Incoming Constraint允许的范围，直到屏幕边缘。这正是Center小部件的文档所说的：“ 如果它的尺寸受到约束并且widthFactor和heightFactor为null，那么这个小部件将尽可能大。”。

现在让我们给“Logo”的顶部留一些余地。我将这三种方式做到：

1. 将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