在颤动中调整容器大小以精确到屏幕大小的一半答案

【问题标题】：Sizing a container to exact half the screen size in flutter在颤动中调整容器大小以精确到屏幕大小的一半
【发布时间】：2019-06-06 22:57:49
【问题描述】：

我试图让容器恰好是屏幕高度的一半[在考虑 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(),
          )
        ],
      ),
    );
  }
}

有没有更好的方法？

【问题讨论】：

标签： flutter flutter-layout

【解决方案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,
            );
          },
        ),
      ),
    );

【讨论】：

谢谢你的`LayoutBuilder(builder: (BuildContext context, BoxConstraints constraints)`帮助我理解了布局管理的基础知识。再次感谢。

【解决方案2】：

你可以扣除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,
      ),
    ),
  );
}

【讨论】：

我不知道你可以像这样获得小部件的大小。太棒了！
感谢您提供获取组件高度的提示

【解决方案3】：

解决这个问题和类似问题的最佳方法和最简单的方法就是使用 FractionallySizedBox 小部件；例如

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

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

有关此小部件的更多帮助，请访问offical help page of this widget。

【讨论】：

【解决方案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,
      ),
    ),
  );

【讨论】：

好的，但是这里没有考虑到AppBar的高度，所以容器的大小不正好是一半。

【解决方案5】：

或者干脆……

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

【讨论】：