在Flutter中将容器大小设置为屏幕大小的一半

Question

我想让一个容器的高度正好是屏幕高度的一半（考虑AppBar的高度），宽度也是屏幕宽度的一半。

这是我想到的代码...

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Flexible(
            child: Container(
              width: MediaQuery.of(context).size.width / 2,
              color: Colors.red,
            ),
          ),
          Flexible(
            flex: 1,
            child: Container(),
          )
        ],
      ),
    );
  }
}

有更好的方法吗？

- Doc

Answer 1

如果您想让容器的高度为可用空间的一半，您可以使用LayoutBuilder小部件。通过LayoutBuilder小部件，您可以在构建器函数中知道最大可用宽度和高度是什么。在您的情况下，示例用法如下：

Scaffold(
      appBar: AppBar(),
      body: Align(
        alignment: Alignment.topCenter,
        child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            return Container(
              height: constraints.maxHeight / 2,
              width: MediaQuery.of(context).size.width / 2,
              color: Colors.red,
            );
          },
        ),
      ),
    );

- dshukertjr

---

谢谢，你的 LayoutBuilder( builder: (BuildContext context, BoxConstraints constraints) 帮助我很多地理解了布局管理的基础。再次感谢。 - Emon

直接为ListView内部的Container设置宽度不起作用，因为该小部件会自动拉伸到屏幕的整个长度。然而，这种方法有效... - Muhammad Faisal

Answer 2

解决这类问题的最佳方式和最简单的方法是使用FractionallySizedBox小部件; 例如

FractionallySizedBox(
    alignment: Alignment.topCenter,
    widthFactor: 0.5,
    child: Container(
    height: 100,
  ),
),

这个小部件 (FractionallySizedBox) 允许您通过指定父容器中可用于child部件的宽度或高度的分数来构建child。之后，通过指定alignment，您可以指定其余空间分配的方式。

有关此小部件的更多帮助，请访问此小部件的官方帮助页面。

- Hossein Hadi

---

我找到的最佳答案。 - Shadab Hashmi

Answer 3

您可以减去 AppBar 的高度来配置 Container 的大小。

@override
Widget build(BuildContext context) {
  var appBar = AppBar();
  return Scaffold(
    appBar: appBar,
    body: Align(
      alignment: Alignment.topCenter,
      child: Container(
        height: (MediaQuery.of(context).size.height - appBar.preferredSize.height) / 2,
        width: MediaQuery.of(context).size.width / 2,
        color: Colors.red,
      ),
    ),
  );
}

- Pete Houston

---

我不知道你可以像这样获取小部件的大小。太棒了！ - dshukertjr

谢谢您提供获取组件高度的技巧。 - Prabowo Murti

Answer 4

你对使用MediaQuery的方向是正确的，但你的代码可以更简单：

  Scaffold(
    appBar: AppBar(),
    body: Align(
      alignment: Alignment.topCenter,
      child: Container(
        height: MediaQuery.of(context).size.height / 2,
        width: MediaQuery.of(context).size.width / 2,
        color: Colors.red,
      ),
    ),
  );

- dshukertjr

---

好的，但是这并没有考虑到AppBar的高度，所以容器的大小并不完全是一半。 - Doc

Answer 5

或者只是简单地...

SizedBox(
          height: MediaQuery.of(context).size.height*0.5,
          child: ...,
        ),

- Anurag Bhalekar