Flutter

Question

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

（我不想使用屏幕顶部的固定边距，而是 "float" 将 header 视图向下缩小屏幕高度的 20%...）

Answer 1

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

对于垂直比例居中：

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

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

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

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

Answer 2

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

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

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

Answer 3

我所有的 FractionallySizedBox 努力都是不可靠的，但有一种方法对我来说更稳定 - 使用 LayoutBuilder 和 SizedBox 作为间隔：

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

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

Answer 4

使用 FractionallySizedBox 相对于所有可用的 space 调整小部件的大小，并用 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 class，它有2个参数，用于x轴和y轴对齐，范围从-1到+1。例如，(0,0) 是中心，(-1, -1) 是左上角，所以这里 (0, -0.5) 将它水平居中并垂直提升一半，导致从顶部填充 25% .

Answer 5

在父视图的容器中设置

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

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

Flutter - How to proportionally center a view (centered with multiplier offset)

flutter-layout