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

没有"从最大/最小尺寸开始"的概念.

问题是,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的红色方块.

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

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

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

Answer 3

让我解释：

BoxConstraints如果( Columnwidget) 或 ( ListViewwidget)的子级maxHeight不能按预期工作，它将按 , 的方式工作height，以解决该问题：

1 - 如果 的子级BoxConstraints是Column，您的代码需要如下所示：

 Container(
    constraints: BoxConstraints(
      maxHeight: MediaQuery.of(context).size.height * .30
    ),
    child: SingleChildScrollView(
      child: Column(
        mainAxisSize: MainAxisSize.min,
  
        children: const [
          // growable childrens
        ],
      ),
    ),
);

2-如果 的子级BoxConstraints是ListView，您的代码需要如下所示：

Container(
  constraints: BoxConstraints(
    maxHeight: MediaQuery.of(context).size.height * .20,
  ),
  child: ListView(
    scrollDirection: Axis.vertical,
    shrinkWrap: true,
    children: const [
      // growable childrens
    ],
  ),
);

与情况一样，如果 is 的子级无法BoxConstraints按预期工作，它将像 一样工作，要解决这个问题，您需要设置为如下所示：RowmaxWidthwidthmainAxisSizeMainAxisSize.min

 Container(
    constraints: BoxConstraints(
      maxWidth: MediaQuery.of(context).size.width * .15
    ),
    child: SingleChildScrollView(
      child: Row(
        mainAxisSize: MainAxisSize.min,
  
        children: const [
          // growable childrens
        ],
      ),
    ),
);