Flutter - 如何按比例居中视图（以乘数偏移为中心）答案

【问题标题】：Flutter - How to proportionally center a view (centered with multiplier offset)Flutter - 如何按比例居中视图（以乘数偏移为中心）
【发布时间】：2018-08-03 14:07:34
【问题描述】：

我想知道在 Flutter 中是否有任何模仿 iOS Xcode 约束的好方法，您可以在另一个视图中居中（例如，垂直），并提供一个乘数，而不是完全居中（50%远低于父视图），它被定位在向下 30% 或向下 70% 或其他位置。

（而不是使用屏幕顶部的固定边距，我想将标题视图“浮动”到屏幕高度的 20%...）

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

FractionallySizedBox 本身就足以处理这样的布局

FractionallySizedBox(
  heightFactor: .5,
  widthFactor: 1.0,
  alignment: Alignment.topCenter,
  child: child,
)

这将使一个小部件居中，占据其父级的高度和全宽

【讨论】：

恐怕我无法让它工作 - 这个 FractionallySizedBox 的 Container 孩子只是填充它的宽度和高度......
除非您的意思是，在我的示例中，使用 0.2 heightFactor 的 FractionallySizedBox，然后将其用作列内的分隔符。即不要将标题视图作为其子视图，而是将其放在下面..

【解决方案2】：

我在FractionallySizedBox 所做的所有努力都不可靠，但事实证明，这是一种对我来说更稳定的方法——使用LayoutBuilder 和SizedBox 作为间隔：

LayoutBuilder(builder: (context, constraints) => Column(
  children: <Widget>[
    SizedBox(height: (constraints.maxHeight - constraints.minHeight) * 0.2,),
    myWidget
  ],
))

这种方式constraints 让我能够计算父高度的 20%，并使用简单的 SizedBox 将其应用为间距。

【讨论】：

【解决方案3】：

我找到了一种方法，但我不确定它是否是最整洁的：

对于垂直比例居中：

将您的布局嵌入到 Center 小部件中，该小部件本身位于 FractionallySizedBox 中。假设FractionallySizedBox 位于屏幕顶部，通过更改其heightFactor，您可以有效地更改Center 小部件引起的居中位置。

new FractionallySizedBox(
  heightFactor: someHeightFactor,
    child: Center(
      child: myChildWidget
    ),
);

即如果parentHeight = 父小部件到此FractionallySizedBox 的高度，并且parentY = 该父小部件的（绝对）y 原点，则设置heightFactor = 0.6 会将您的UI 子控件置于测量0.6 * parentHeight 的区域内，因此绝对 y 中心 = parentY + 0.3 * parentHeight。

水平比例居中将是相同的，但在 FractionallySizedBox 上使用 widthFactor。

【讨论】：

【解决方案4】：

在父视图的容器中设置

容器（对齐：Alignment.center，...）

【讨论】：

【解决方案5】：

使用FractionallySizedBox 相对于所有可用空间调整小部件的大小，并用Container 或Align 包装它以指定它的对齐方式。

例如：

Container(
  alignment: Alignment(0, -0.5),
  child: FractionallySizedBox(
    heightFactor: 0.5,
    widthFactor: 0.8,
    child: Container(color: Colors.blue),
  ),
)

这会生成一个占屏幕高度 50% 和屏幕宽度 80% 的蓝色框，垂直向下定位 25%。

注意，对于Alignment 类，它接受2 个参数，用于x 和y 轴对齐，范围从-1 到+1。例如，(0,0) 是中心，(-1, -1) 是左上角，所以这里 (0, -0.5) 将其水平居中并垂直向上提升一半，从顶部产生 25% 的填充.

【讨论】：