如何将一列小部件紧紧包裹在卡片中？

Posted 2023-02-23

【中文标题】如何将一列小部件紧紧包裹在卡片中？

【英文标题】：How can I tightly wrap a Column of widgets inside a Card?

【发布时间】：2017-06-10 06:50:42

【问题描述】：

我的应用程序页面仅包含一个Card，其中包含一个Column，其末尾是一个MaterialList。即使我的列表只有一两个项目，卡片也会将其垂直空间扩展到屏幕底部，而不是停在列表项目的末尾。 Column documentation 表明这是正常的 Column 行为（“为每个子项布局一个 null 或零弹性因子（例如，那些未展开的因子），具有无限的垂直约束”）。我认为将列表包装在 Flexible 中可能会达到我想要的效果，但是当我尝试时出现以下错误：

RenderFlex children have non-zero flex but incoming height constraints are unbounded.
I/flutter (11469): When a column is in a parent that does not provide a finite height constraint, for example if it is
I/flutter (11469): in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis. Setting a
I/flutter (11469): flex on a child (e.g. using a Flexible) indicates that the child is to expand to fill the remaining
I/flutter (11469): space in the vertical direction.
I/flutter (11469): These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child
I/flutter (11469): cannot simultaneously expand to fit its parent.

我显然误解了这个布局应该如何工作。

这是我现在拥有的示例代码，作为此页面的 Scaffold 正文：

new Container(
// Outer container so we can set margins and padding for the cards
// that will hold the rest of the view.
alignment: FractionalOffset.topCenter,
margin: new EdgeInsets.only(top: style.wideMargin),
padding: new EdgeInsets.symmetric(horizontal: style.defaultMargin),
child: new Card(
  child: new Column(
    children: [
      new CustomHeader(), // <-- a Row with some buttons in it
      new Divider(),
      new MaterialList(
        type: MaterialListType.twoLine,
        children: listItems, // <-- a list of custom Rows
      ),
    ],
  ),
),

)

我怎样才能拥有一张紧紧包裹Column 小部件的卡片？

【参考方案1】：

默认情况下，Column 会扩展以填充最大垂直空间。您可以通过将mainAxisSize 属性设置为MainAxisSize.min 来更改此行为，这会导致Column 只占用其子代所需的最小垂直空间。

【讨论】：

似乎Column 的行为在新版本中发生了变化。如果内部小部件是ListView，您可以通过将shrinkWrap 设置为true 来要求它只占用最小空间。

这就像构建一个渐变按钮的魅力，当它在横轴上设置拉伸的列中时会展开，但在不在列中时看起来很小。

【参考方案2】：

如果有人想缩小它的列表，Wrap 小部件可能会来拯救它，这与 @亚当回答

body: Container(
        child: Card(
          child: Wrap(
            direction: Axis.vertical,
            spacing: 10,
            children: <Widget>[
              Text('One'),
              Text('Two'),
              Text('Three'),
              Text('Four'),
            ],
          ),
        ),
      ), 

但是如果您为 Axis.vertical 添加 Column 为 Axis.Horizo​​ntal 添加 Row，则此 Wrap 可以同时完成 Row 和 Column 的工作。 您还可以为列和行中缺少的所有中间小部件添加相等的间距