dart - 包含卡片的 GridView 无法正确计算高度

Question

我有一个使用 GridView 的应用程序来尝试布置一些 Card。相关代码看起来有点像这样

body: new GridView.count(
  crossAxisCount: 2,
  children: [new Card(
    child: new Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        const ListTile(
          leading: const Text("0", style: const TextStyle(
              fontWeight: FontWeight.bold, fontSize: 24.0)),
          title: const Text('Some Heading'),
          subtitle: const Text('My Subtitle'),
        ),
        new ButtonTheme
            .bar( // make buttons use the appropriate styles for cards
          child: new ButtonBar(
            children: <Widget>[
              new FlatButton(
                child: const Text('CALL TO ACTION'),
                onPressed: () {
                  /* ... */
                },
              ),
            ],
          ),
        ),
      ],
    ),
  ),
  // same card repeated
  ],
),

不幸的是，它渲染得不好:

卡片太高，它们应该位于“号召性用语”按钮下方。我该如何解决这个问题，并使网格行自动尊重内容的高度？

Answer 1

您的问题是 GridView.count 的图 block 的默认宽高比为 1.0(即正方形)，听起来您希望图 block 更短比那。

一个快速解决方法是将 childAspectRatio 硬编码为您喜欢的数字。更细致的方法是实现一个描述您想要的布局的 SliverGridDelegate 并使用 GridView.custom。您也可以只创建 2 元素 Row 小部件的 ListView，而根本不使用 GridView。