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

Question

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

所以我想做的是让我的容器填满垂直空间，同时仍然具有固定的宽度。 Two first is what I have and third is what I want。这个想法是通过手势 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()
                  ],
                ),
              )
            ],
          )
        ),
      ),
    ],
  )
);

}

考虑到我尝试了很多不同的东西但似乎没有任何效果，我很确定我错过了一些东西。

我还上传了一张带调试画的图片here。

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

Answer 1

只需输入：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 2

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

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

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

Answer 3

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

1. 约束：BoxConstraints.expand()，
2. 高度：double.infinity，

但是这两个答案都会给你一个类似的错误

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

输出：

Answer 4

我建议使用 Expanded 小部件（它允许我们避免使用 IntrinsicHeight 小部件），将它与 Container 的对齐属性结合起来，因此即使 Container 不是屏幕上唯一的一个，它也能正常工作。

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 5

截至 2020 年 1 月，最简单的方法是使用扩展小部件

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

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

Answer 6

将容器拉伸到容器小部件中父级使用属性constraints:BoxConstraints.expand() 的全高。容器独立于子widget占据完整空间

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

容器详情请参考链接Container Cheat sheet

Answer 7

诀窍是将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(...)
      ],
    ),
  )
)