Question

TL; DR需要容器填充垂直空间，以便它可以充当ontap侦听器。尝试了大多数解决方案，但似乎无济于事。

所以我想做的是使我的容器在保持固定宽度的同时填满垂直空间。 Two first is what I have and third is what I want。想法是使容器透明，并带有手势监听器。如果有人对其他解决方案有更好的主意，请随时提出建议。

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

}

考虑到我尝试了许多不同的事情，但似乎没有任何效果，我非常确定自己缺少一些东西。

我还上传了带有调试绘画here的图像。

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(flex: 1,
         child: Container(..),
            ),

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

Answer 3

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

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

有关容器的更多信息，请参考链接Container Cheat sheet

Answer 4

如果您希望容器填充所有可用空间，则可以简单地使用：

  width: double.infinity,
  height: double.infinity

说明：

虽然这看起来像是“黑客”，但实际上也是Flutter团队所使用的。看，最“正确”的方法可能是使用：

  constraints: 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 5

我建议使用扩展小部件（这使我们避免使用IntrinsicHeight小部件），将其与Container的alignment属性结合使用，即使容器不是屏幕上唯一的容器，也可以使其正常工作。

Expanded(
  child: Container(
    alignment: Alignment.center,
    child: Text('Your text', textAlign: TextAlign.center))),

这样一来，还可以避免潜在的应用崩溃，当您不小心将小部件树的某些部分水平和垂直扩展到无穷大时，这经常会发生（这就是为什么在许多情况下您无法使用BoxConstraints小部件的原因）。 >

在这里可以阅读有关Flutter中传递约束问题的更多信息-必须阅读：https://medium.com/flutter-community/flutter-the-advanced-layout-rule-even-beginners-must-know-edc9516d1a2

Answer 6

有很多答案建议使用两件事

约束：BoxConstraints.expand（），
高度：double.infinity

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

BoxConstraints强制无限高。

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

应用栏
顶部栏空间（位于上述应用栏上）
剩余屏幕

1。获取MediaQuer

 final mediaQuery = MediaQuery.of(context);

2。声明AppBar小部件，并且应该在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,
            ),

输出：

Answer 7

将容器的高度或宽度设置为double.maxFinite

Container(
   height: double.maxFinite,
    width: 100,)

您可以让您的小部件采用容器小部件的完整尺寸，然后将容器的高度和/或宽度设置为 double.maxFinite。这将使容器采用高度和/或宽度或其父小部件

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

7 个答案: