如何将一列小部件紧紧地包裹在Card中? [英] How can I tightly wrap a Column of widgets inside a Card?

问题描述

我的应用程序页面仅由Card组成，而Card包含Column，结尾处是MaterialList.即使我的列表只有一个或两个项目，该卡也会将其垂直空间扩展到屏幕底部，而不是停在列表项的末尾. 列文档表示这是正常的列行为(具有无限垂直约束的null或零弹性因子(例如，未扩展的弹性因子).我以为将列表包装在Flexible中可能会达到我想要的效果，但是当我尝试时出现以下错误:

I have a page of my app that consists solely of a Card that holds a Column at the end of which is a MaterialList. Even if my list only has one or two items, the Card extends its vertical space to the bottom of the screen rather than stopping at the end of the list items. The Column documentation suggests this is normal Column behavior ("Layout each child a null or zero flex factor (e.g., those that are not Expanded) with unbounded vertical constraints"). I thought wrapping the list in a Flexible might achieve my desired effect but when I tried I got the following error:

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.

对于这种布局应该如何工作，我显然有误解.

I'm clearly misunderstanding something about how this layout is supposed to work.

这是我现在作为此页面Scaffold的正文的示例代码:

Here is sample code of what I have now as the body of the Scaffold for this page:

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小部件的卡片?

How can I have a Card that tightly wraps a Column of widgets?

推荐答案

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

By default, Column expands to fill the maximum vertical space. You can change this behavior by setting the mainAxisSize property to MainAxisSize.min, which causes the Column to take up only the minimum amount of vertical space it needs to fit its children.

这篇关于如何将一列小部件紧紧地包裹在Card中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！