如何将容器垂直拉伸到最大屏幕？答案

【问题标题】：How can I stretch a container vertically to max screen?如何将容器垂直拉伸到最大屏幕？
【发布时间】：2020-09-07 02:45:48
【问题描述】：

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 强制无限高。

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

要实现这一点，您可以：

1) 使用名为Expanded 的小部件。

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

2) 使用MediaQuery 类给设备屏幕的Container 一个height 和width

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

【讨论】：

【解决方案2】：

用 Expanded-Widget 包裹您的 Container 并完全移除高度。

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

Expanded-Widget 沿主轴填充 Row 或 Column 子级的可用空间。

【讨论】：

【解决方案3】：

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

应用栏
顶部栏空间（存在于上面的应用栏上）
剩余屏幕

逻辑：

1.获取 MediaQuer

 final mediaQuery = MediaQuery.of(context);

2。声明 AppBar Widget 并在 Scaffold 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,
            ),

【讨论】：