调整容器大小，使其恰好为屏幕颤动的一半

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(),
          )
        ],
      ),
    );
  }
}

有没有更好的办法？

Answer 1

如果您希望容器的高度是可用空间的一半，您可以使用 LayoutBuilder 小部件。使用 LayoutBuilder 小部件，您可以在 builder 函数中知道最大可用宽度和高度是多少。您的案例中的示例用法如下所示：

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,
            );
          },
        ),
      ),
    );

Answer 2

解决这个问题和类似问题的最好方法和最简单的方法就是使用FractionallySizedBoxwidget ；例如

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

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

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

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,
      ),
    ),
  );
}

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,
      ),
    ),
  );

Answer 5

或者只是简单地...

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