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

需要容器来填充垂直空间，以便它可以充当一个随机监听器。已经尝试了大多数的解决方案，但似乎没有工作。

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

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

我很确定我错过了一些东西，因为我已经尝试了很多不同的东西，但似乎没有一样是有效的。

我还上传了一个与调试绘画 给你的图像。

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

155337 次浏览
小开
最佳答案

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

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

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

Please refer the link 集装箱备忘单 for more about container

小开

从2020年1月开始，最简单的方法就是使用一个扩展的 Widget

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

Https://api.flutter.dev/flutter/widgets/expanded-class.html

小开

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

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

这样还可以避免潜在的应用程序崩溃，这种情况经常发生在当你不小心将窗口小部件树的某些部分水平和垂直扩展到无穷大的时候(这就是为什么在许多情况下你不能使用 BoxConstraint 窗口小部件)。

在这里，你可以阅读到更多有关 Flutter 通过限制的问题——必须阅读: ABc0

小开

简单传入: double.infinity。

如果希望容器填满所有可用空间，只需传入:

width: double.infinity,
height: double.infinity

说明:

In Flutter, a child widget cannot exceed the "layout constraints" imposed by its parent widget. During the layout phase, Flutter engine uses a constraint solver to automatically correct "out-of-bound" values into what's allowed by its parent constraints.

例如，如果您有一个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。

小开

There are many answers which suggest using two things

  1. 约束条件: BoxConstraints.expe () ,
  2. 高度: 两倍，无穷大,

But both these answer will give you an error like

BoxConstraint 强制执行无限高度。

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

  1. 应用程序栏
  2. 顶部栏空间(存在于上面的应用程序栏)
  3. 剩下的屏幕

1. 获取 MediaQuery

 final mediaQuery = MediaQuery.of(context);

2. 声明 AppBar 小部件和同一个应用程序栏实例应该用在脚手架应用程序栏中

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

产出:

enter image description here

小开

将容器的高度或宽度设置为 Double

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

您可以让小部件采用 Container 小部件的完整大小，然后将容器的高度和/或宽度设置为 Double。这将使 Container 获取高度和/或宽度或其父小部件

小开

这工作对我有用

height: MediaQuery.of(context).size.height,

提交答案