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

Question

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

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

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

然而，这会在maxHeight处开启此框。

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

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

Answer 1

没有＆＃34;从最大/最小尺寸开始＃34;

问题是，import re cdl= re.compile("^cdl", re.IGNORECASE) for response in conn.collection.find({"hp": cdl},{"n":1 ,"hp":1 , "_id":0 ,"rsid" :1, "v":1}): print (response) 只会给它的孩子增加约束。但最终，它并没有选择尺寸。

如果您希望您的孩子点击minSize，那么他们必须不消费。哪个转换为宽度/高度为ContrainedBox的不。事实是double.INFINITY是许多小部件的默认值，包括double.INFINITY。

另一方面，某些小部件（例如Container）的默认大小为0。 这意味着这段代码：

DecoratedBox

将呈现5.0 * 5.0的红色方块。

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

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

Answer 3

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

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

在width的{​​{1}}和height属性中，使用Container和deviceWidth形成条件。

deviceHeight

注意：只有三元运算符Container( width: deviceWidth<200?50:deviceWidth*0.5, height: deviceHeight<500?50:deviceHeight>800?200:deviceHeight*0.2, child: //child, ) 用于指定高度和宽度的条件

Answer 4

是的，ConstrainedBox是用于此目的的正确小部件。 如果您仅给出minHeight参数，例如。 300，则孩子的身高将最小，并将根据其内容增加其大小。

这是一个例子：

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

如果SomeWidget（）要求的高度小于300，则其高度为300。否则，它将相应地增加其高度。 为了装饰和构造SomeWidget（），可以使用Container的padding和其他属性。

Answer 5

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也采用屏幕尺寸，从而忽略了其{{1} }参数。

Answer 6

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

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

所以，只需将 Column 包裹在 Stack 中。现在列大小变成了 150 甚至更多。