Flutter-如何按比例将视图居中（以乘子偏移为中心）

Question

我想知道在Flutter中是否有任何模仿iOS Xcode约束的好方法，即您将视图居中放置在另一个视图内（例如，垂直放置），并提供一个乘数以使它不完全居中（占视图的50％在父视图的下方），它的位置是向下30％或70％向下。

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

Answer 1

FractionallySizedBox本身就足以应​​付这样的布局

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

这将使小部件居中居中，其高度等于其父级的高度和全宽度

Answer 2

我找到了一种方法，但是我不确定这是最干净的：

对于垂直比例居中：

将布局放入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。

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

Answer 3

在父视图的容器中设置

Container(alignment: Alignment.center, ...)

Answer 4

我所有的{ "from": 0, "size": 10, "query": { "bool": { "must": [ { "terms": { "color": [ "red", "yellow" ] } } ], "filter": [ { "match": { "availability": { "query": "in stock" } } } ] } } } 努力都不可靠，但是对我来说，这是一种更加稳定的方法-使用FractionallySizedBox和LayoutBuilder作为分隔符：

SizedBox

通过这种方式，LayoutBuilder(builder: (context, constraints) => Column( children: <Widget>[ SizedBox(height: (constraints.maxHeight - constraints.minHeight) * 0.2,), myWidget ], )) 使我能够计算父级高度的20％，并使用一个简单的SizedBox将其应用为间距。

Answer 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％