flutter - 小部件占据屏幕 1/3 的好方法是什么？

Question

无论手机方向如何，我都试图让小部件占据屏幕的 1/3。我该如何做到这一点？

Answer 1

通过使用 Column 并将内容包装在 Flexible 中并更改 flex 以使孩子占据屏幕的 1/3，我得到了我想要的：

new Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    new Flexible(flex: 2, child: new SizedBox()),
    new Flexible(flex: 1, child: createTextBox())
  ]
);

Answer 2

有一些小部件可能会有所帮助：特别是 AspectRatio、Column/Expanded 和 CustomSingleChildLayout。如果不确切知道您想要做什么，很难给出一个好的答案。

Answer 3

您应该尝试使用Expanded小部件作为行的子级，如下所示：

new Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    new Expanded(
      child: yourFirstContentWidget,
               ),
    new Expanded(
      child: yourNextContentWidget,
               ),
    new Expanded(
      child: yourLastContentWidget,
               )
            ]
        )

Expanded 小部件都将尝试尽可能多地填充行的空间。由于他们三个，他们将不得不共享空间，你最终将占据行的 1/3。