包含Cards的GridView无法正确计算高度 [英] GridView containing Cards doesn't calculate height correctly

问题描述

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

I have an app using a GridView to try and lay out some Cards. The relevant code looks a bit like this

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
  ],
),

不幸的是，它的渲染效果不好：

Unfortunately, it doesn't render well:

纸牌太高，应在 CALL TO ACTION按钮下方结束。我该如何解决这个问题，并让网格行自动遵守内容的高度？

The cards are too tall, they should end just below the "CALL TO ACTION" button. How can I fix this, and have the grid rows automatically respect the height of the contents?

推荐答案

您的问题是图块 GridView.count 的默认长宽比为 1.0 （即正方形），听起来像是您想要的图块

Your problem is that the tiles of GridView.count have a default aspect ratio of 1.0 (i.e. square), and it sounds like you want your tiles to be shorter than that.

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

A quick fix would be to hard code the childAspectRatio to a number you like. A more nuanced approach would be to implement a SliverGridDelegate that describes the layout you want and use GridView.custom. You could also just do a ListView of 2-element Row widgets and not use GridView at all.

这篇关于包含Cards的GridView无法正确计算高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！