包含卡片的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
  ],
),

不幸的是，它的呈现效果不好：

卡片太高了，应该在“CALL TO ACTION”按钮的下方结束。我该如何解决这个问题，并使网格行自动尊重内容的高度？

- Adam Williams

---

可能是如何在Flutter中为GridView中的小部件设置自定义高度？的重复问题。 - Blasanka

Answer 1

你的问题在于GridView.count的瓦片具有默认的宽高比1.0（即正方形），听起来你希望你的瓦片比这个更短。

一个快速的解决方法是将childAspectRatio硬编码为你喜欢的数字。一个更加细致入微的方法是实现一个描述所需布局的SliverGridDelegate并使用GridView.custom。你也可以只用2元素Row小部件的ListView而不使用GridView。

- Collin Jackson

---

请问您能否展示一些代码，演示如何实现每个子元素高度不同的效果？ - Vipul Asri

这是一个基本要求。我想知道为什么它需要变得如此复杂，以至于GridView.count(...)无法考虑它。 - Rohan Taneja

@collin - Collin Jackson，我需要展示一个宽高比为1:1的网格，但是高度需要额外增加100像素。请问如何实现？谢谢。 - Kamlesh

Answer 2

改变 GridView.count 的宽高比应该能解决问题。下面的代码对我有效，你可以根据需要进行调整。

 GridView.count(
      ...
      childAspectRatio: 10 / 9,

- Paul Kumchi