包含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”按钮下方结束。我该如何解决这个问题，让网格行自动尊重内容的高度？

Answer 1

您的问题是，ph@sleek ~ $ curl -X GET http://localhost:8080/user; echo {"name":"Fred","age":50} 的图块的默认宽高比为GridView.count（即正方形），听起来您希望您的图块比此更短。

快速解决方法是将1.0硬编码为您喜欢的号码。更细微的方法是实现描述所需布局的childAspectRatio并使用SliverGridDelegate。您也可以只使用GridView.custom 2个元素ListView小部件，而根本不使用Row。

Answer 2

更改GridView.count的纵横比应该可以解决问题。下面的代码为我工作。您可以根据需要对其进行调整

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