使容器小部件垂直填充父级

Question

TL; DR需要容器填充垂直空间,以便它可以充当ontap监听器.尝试了大多数解决方案但似乎没有任何效果.

所以我要做的是让我的容器填满垂直空间,同时仍然有一个固定的宽度.第一个是我拥有的,第三个是我想要的.这个想法是让容器透明,带有一个手势ontap监听器.如果有人对不同的解决方案有更好的想法,请随时提出建议.

Widget build(BuildContext context) {
return new GestureDetector(
  onHorizontalDragUpdate: _move,
  onHorizontalDragEnd: _handleDragEnd,
  child: new Stack(
    children: <Widget>[
      new Positioned.fill(           
        child: new Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            new Container(
              child: new IconButton(                          
                padding: new EdgeInsets.only(top: 16.0, bottom: 16.0, left: 24.0, right: 24.0),
                icon: new Icon(Icons.warning),
                color: Colors.black12,
                onPressed: () {},
              )
            ),
          ],
        ),
      ),
      new SlideTransition(
        position: new Tween<Offset>(
          begin:  Offset(0.0, 0.0),
          end: const Offset(-0.6, 0.0),
        ).animate(_animation),
        child: new Card(
          child: new Row(
            children: <Widget>[
              new Container(
                width: 20.0,
                height: 20.0,
                color: Colors.amber,
              ),
              new Expanded(
                child: new Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[

                    _getListTile(),
                    _ifStoplineIsToBeShown()
                  ],
                ),
              )
            ],
          )
        ),
      ),
    ],
  )
);

}

考虑到我尝试了很多不同的事情并且似乎没有任何效果,我确信我已经遗漏了一些东西.

我还上传了与调试绘画的图像这里.

PS.我知道我已将高度设置为固定值,但这是显示容器的唯一方法.

Answer 1

诀窍是一个结合IntrinsicHeight部件和Row与crossAxisAlignment: CrossAxisAlignment.stretch

这会强制Row的子项垂直扩展,但Row将占用最少的垂直空间.

Card(
  child: IntrinsicHeight(
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        Container(
          width: 20.0,
          color: Colors.amber,
        ),
        // Expanded(...)
      ],
    ),
  )
)

Answer 2

截至 2020 年 1 月，最简单的方法是使用 Expanded Widget

Expanded(flex: 1,
         child: Container(..),
            ),

https://api.flutter.dev/flutter/widgets/Expanded-class.html

Answer 3

只需传入：double.infinity.

如果你想让一个 Container 填满所有可用空间，你可以传入：

width: double.infinity,
height: double.infinity

解释：

在 Flutter 中，子小部件不能超过其父小部件强加的“布局约束”。在布局阶段，Flutter 引擎使用约束求解器自动将“越界”值纠正为其父约束所允许的值。

例如，如果您有一个 50x50 的 Container，对于它的子容器，您传入另一个 300x300 的 Container，则内部容器将自动更正为“不超过其父容器”，即 50x50。因此，使用足够大的值将始终确保您“填充父级”。

事实上，甚至BoxConstraints.expand()在内部利用相同的想法。如果你打开 的源代码expand()，你会看到：

  /// Creates box constraints that expand to fill another box constraints.
  ///
  /// If width or height is given, the constraints will require exactly the
  /// given value in the given dimension.
  const BoxConstraints.expand({
    double width,
    double height,
  }) : minWidth = width ?? double.infinity,
       maxWidth = width ?? double.infinity,
       minHeight = height ?? double.infinity,
       maxHeight = height ?? double.infinity;

因此，如果您绝对确定要填充所有空间，则可以直观地传入一个大于父级（或大于整个屏幕）的数字，例如double.infinity.

Answer 4

要将容器拉伸到constraints:BoxConstraints.expand()容器小部件中父使用属性的最大高度。容器占据独立于子窗口小部件的完整空间

Container(
  color: Colors.green,
  child: Text("Flutter"),
  constraints: BoxConstraints.expand(),
)

请参阅链接容器备忘单以获取有关容器的更多信息

Answer 5

有很多答案建议使用两种东西

1. 约束：BoxConstraints.expand(),
2. 高度：双无穷大，

但这两个答案都会给你一个错误，比如

BoxConstraints 强制无限高度。

我们可以通过计算屏幕的高度来避免这些问题，例如

1. 应用栏
2. 顶部栏空间（存在于上方应用栏）
3. 剩余屏幕

1. 获取MediaQuery

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

输出：