颤振 - 创建一个从 minHeight 开始，增长到 maxHeight 的盒子的正确方法

Posted 2023-02-23

【中文标题】颤振 - 创建一个从 minHeight 开始，增长到 maxHeight 的盒子的正确方法

【英文标题】：flutter - correct way to create a box that starts at minHeight, grows to maxHeight

【发布时间】：2018-07-18 10:48:11

【问题描述】：

我有一个容器，我想以最小大小开始并增长（如果在用户添加内容时其内容增长）到最大大小，然后停止。

正确的小部件似乎是 ConstrainedBox，如下所示：

new ConstrainedBox(
  constraints: new BoxConstraints(
    minHeight: 35.0,
    maxHeight: 60.0,
  ),
  child: ...child with growing content (has default height 25.0)...
),

但是，这会在 maxHeight 处启动盒子。

我尝试使用 hasBoundedHeight，但似乎无法为其构造正确的语法或在文档中找到示例。

让盒子按描述工作的最佳方法是什么？

【参考方案1】：

例如，对于Column，minHeight 不起作用。我用这个 hack 解决了它：

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

因此，只需将 Column 包装在 Stack 中即可。现在列大小变成了 150 甚至更多。

【参考方案2】：

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

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 个项目的最小高度输出：

注意：这将根据提到的最大高度显示小部件。

博客： https://medium.com/flutterworld/flutter-how-to-set-the-minimum-height-to-widget-36967b310ffe

【参考方案3】：

ConstrainedBox(
   constraints: BoxConstraints(
      minWidth: 70, 
      minHeight: 70,
      maxWidth: 150, 
      maxHeight: 150,
   ),
   child: Container(color: Colors.red, width: 10, height: 10),
)

您可能会猜测Container 必须在 70 到 150 像素之间，但您错了。 ConstrainedBox 仅对它从其父级接收到的约束施加附加约束。

这里，屏幕强制ConstrainedBox 与屏幕大小完全相同，因此它告诉其子Container 也采用屏幕大小，从而忽略其constraints 参数。

【参考方案4】：

是的，ConstrainedBox 是正确的小部件。 如果您只给出 minHeight 参数，例如。 300，孩子的身高最小，并会根据其内容增加其大小。

这是一个例子：

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

如果 SomeWidget() 要求的高度小于 300，则高度为 300。否则，它会相应增加高度。 对于 SomeWidget() 的修饰和结构化，您可以使用 Container 的 padding 和其他属性。

【参考方案5】：

您可以使用 deviceWidth 和 deviceHeight 检查最小和最大条件。 使用以下代码在 build 方法中获取 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,
)

注意：只有三元运算符 ?: 可用于指定高度和宽度的条件

【参考方案6】：

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

问题是，ContrainedBox 只为它的孩子添加约束。但最终，它并没有选择尺寸。

如果您希望您的孩子达到 minSize，那么他们必须不消耗。这意味着 not 的宽度/高度为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 的红色方块。

【讨论】：

噢噢噢噢。所以我需要一个新问题，“如何倾听和测量一个以一种尺寸开始并以另一种尺寸结束的物体的尺寸”

你通常不需要这个。大多数小部件都有“适合最小尺寸”的选项。例如，ListView/GridView 具有 shrinkWrap 属性。 Row/Column 有mainAxisSize 可以设置为MainAxisSize.min, ...

我真正关心的是在这种情况下对象何时增长到最大尺寸。

是的，但您可以将它与 ConstrainedBox 结合使用。

感谢您介绍这个 ConstrainedBox。效果很棒