如何将一个容器垂直拉伸到最大屏幕？

Question

body: SafeArea(
      child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
        Container(
          width: 100.00,
          height: 100.00,
          color: Colors.red,
        ),
      ])),
));

目前，高度是100.00，但我需要把它拉伸到无限大。

我尝试将高度改为double.infinity。

Container(
          width: 100.00,
          height: double.infinity,
          color: Colors.red,

但我收到以下错误

在 performLayout()期间抛出了以下断言：BoxConstraints 强制无限高。

Answer 1

用一个Expanded-Widget包裹你的Container，并完全移除高度。

Expanded(
          child: Container(
            width: 100.00,
            color: Colors.red,
          ),
        ),

Expanded-Widget沿着主轴填充一个Row或Column的子节点的可用空间。

Answer 2

为了达到这个目的，你可以

1) 使用一个名为 Expanded 小部件。

body: SafeArea(
      child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
       Expanded(
          child: Container(
            color: Colors.red,
          ),
        ),
      ])),
));

2) 给予 Container a height 和 width 使用设备屏幕上的 MediaQuery 阶层

body: SafeArea(
      child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
        Container(
          // give it a width equals to the device screen
          width: MediaQuery.of(context).size.width,
          // give it a height equals to the device screen
          height: MediaQuery.of(context).size.height,
          color: Colors.red,
        ),
      ])),
));

Answer 3

正确的高度分配方式是计算高度的

1. 应用栏
2. 顶部栏位(存在于上述应用栏上)
3. 剩余屏幕

逻辑上。

1. 获取MediaQuer

 final mediaQuery = MediaQuery.of(context);

2. 声明AppBar Widget，并且在脚手架App Bar中使用相同的App Bar实例。

final PreferredSizeWidget appBar = AppBar(
      title: Text('Home'),
    );

3. 使用计算高度

      Container(
              width: mediaQuery.size.width,
              height: (mediaQuery.size.height -
                  appBar.preferredSize.height -
                  mediaQuery.padding.top),
              color: Colors.red,
            ),