flutter - correct way to create a box that starts at minHeight, grows to maxHeight

小开

最佳答案

没有“从最大/最小大小开始”的概念。

问题是，ContrainedBox只是给它的子节点添加了约束，但最终它并没有选择一个大小。

如果你想让你的孩子达到 minSize，那么他们必须花费没有。转换成宽度/高度为 double.INFINITY的没有。事实上，double.INFINITY是许多小部件的默认值，包括 Container。

另一方面，一些小部件(如 DecoratedBox)的默认大小为0。也就是说这个代码:

return new ConstrainedBox(
constraints: new BoxConstraints(
minHeight: 5.0,
minWidth: 5.0,
maxHeight: 30.0,
maxWidth: 30.0,
),
child: new DecoratedBox(
decoration: new BoxDecoration(color: Colors.red),
),
);

将呈现一个5.0 * 5.0红色方块。

小开

可以使用 deviceWidth 和 deviceHeight 检查最小和最大条件。使用以下代码获取构建方法中的 deviceWidth 和 deviceHeight。

double deviceWidth = MediaQuery.of(context).size.width;
double deviceHeight = MediaQuery.of(context).size.height;

在 Container的 width和 height属性中，使用 deviceWidth和 deviceHeight来形成条件。

Container(
width: deviceWidth<200?50:deviceWidth*0.5,
height: deviceHeight<500?50:deviceHeight>800?200:deviceHeight*0.2,
child: //child,
)

注意: 只有三元操作符 ?:工程指定条件的高度和宽度

小开

下面的示例将帮助您根据需要增长小部件的大小

Container(
color: Colors.blueAccent,
constraints: BoxConstraints(
minHeight: 100, minWidth: double.infinity, maxHeight: 400),
child: ListView(
shrinkWrap: true,
children: <Widget>[
...List.generate(
10,  // Replace this with 1, 2 to see min height works.
(index) => Text(
'Sample Test: ${index}',
style: TextStyle(fontSize: 60, color: Colors.black),
),
),
],
),
),

单件最小高度输出:

10个项目的最低高度输出:

注意: 这将按照上面提到的 max-height 显示小部件。

博客: < a href = “ https://medium.com/flutterworld/flutter-how-to-set-the-most-height-to-widget-36967b310ffe”rel = “ norefrer”> https://medium.com/flutterworld/flutter-how-to-set-the-minimum-height-to-widget-36967b310ffe

小开

是的，ConstrainedBox 是用于此目的的正确小部件。如果只给出例如300的 minHeight 参数，那么子元素将是最小高度，并将根据其内容增加其大小。

这里有一个例子:

ConstrainedBox(
constraints: BoxConstraints(
minHeight: 300,
),
child: Container(child : SomeWidget(),)

如果 SomWidget ()所需的高度小于300，则它的高度为300。否则，它会相应地增加它的高度。对于 SomWidget ()的装饰和结构，可以使用 Container 的填充和其他属性。

小开

例如，对于 Column，minHeight不工作，我用下面的方法解决了它:

ConstrainedBox(
constraints: BoxConstraints(minHeight: 150),
child: Stack(
children: [
Column(
children: [dynamicChild1, dynamicChild2],
),
],
),
);

所以，只要在 Stack中包装 Column，列的大小就会变成150甚至更大。

小开

As Remi's answer points out, if your ConstrainedBox is initially maxing out a dimension when you expected it to be closer to or at the min, it's because a child wants to be big. (Re: 约束减少，大小增加，父级设置位置。) If you aren't sure which child is causing it, one handy way is to use the Widget Inspector in your IDE and check the properties of the descendants, then check the docs as to why and adjust accordingly.

例如，我在 Center中包装一个小部件时遇到过这种情况。通常，如果没有约束，居中的小部件将匹配子部件的高度。然而，当把 Center放在 ConstrainedBox中时，突然之间它就膨胀到最大限制。在检查了文件之后，我看到:

This widget will be as big as possible if its dimensions are constrained and widthFactor and heightFactor are null，解释新的布局。
但是: If a dimension is unconstrained and the corresponding size factor is null then the widget will match its child's size in that dimension，这解释了不使用 ConstrainedBox.
这告诉我如何修复它: If a size factor is non-null then the corresponding dimension of this widget will be the product of the child's dimension and the size factor, 即设置 Center的 heightFactor: 1。

所以注意你的孩子的行为！如果你强加外部约束，他们可能是贪婪的(或者不是，就像真正的孩子一样;)。

小开

尝试使用约束框代替大小框，因为大小框没有最小高度和最小宽度属性，它们只有高度和宽度属性

 ConstrainedBox(
constraints: const BoxConstraints(
maxHeight: Dimension.d9,
minHeight: Dimension.d9,
maxWidth: 144.0
),
);