为 Flutter 的 Card 小部件设置特定高度答案

【问题标题】：Setting a specific height to Flutter's Card widget为 Flutter 的 Card 小部件设置特定高度
【发布时间】：2020-07-24 06:23:30
【问题描述】：

我正在尝试扩展给定卡片网格的高度，以便它们能够容纳比目前更多的信息。这些卡片由缩小的GridView.count() 包裹，因为我要在这个小部件下面放更多东西。

就目前而言，这些卡片看起来像这样，其中您可以看到其中一个溢出了底部的文本，这是一种不受欢迎的行为（尤其是当我希望卡片有一些底部填充时）：

既然如此，我想知道是否可以手动更改卡片的高度。我可能会保留此具体配置并删除一些信息，因为我喜欢卡片当前保持其 1x1 比例这一事实，但出于好奇，我想知道如何做到这一点。

我尝试了很多方法，例如用Container 或SizedBox 包装Card 小部件并手动设置高度，但这些方法都没有改变任何东西。

我猜问题可能出在GridView 本身。看起来是这样的：

return FutureBuilder<List<Event>>(
        future: new EventsService().getEventsForCoords(),
        builder: (context, AsyncSnapshot<List<Event>> snapshot) {
          if (snapshot.hasData) {
            return GridView.count(
                crossAxisCount: 2,
                shrinkWrap: true,
                children: generateProximityEventCards(snapshot.data));

          } else {
            return CircularProgressIndicator();
          }
        });

您可以猜到，generateProximityEventCards 方法是在末尾打印 Card 小部件的方法。这是该方法现在的样子：

List<Widget> generateProximityEventCards(List<Event> eventList) {
    // Render each card
    return eventList.map((Event ev) {
      return Card(
          semanticContainer: true,
          clipBehavior: Clip.antiAliasWithSaveLayer,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
          elevation: 5,
          margin: EdgeInsets.all(7),
          child: SizedBox(
            height: 600,
            child: Column(
              children: <Widget>[
                Image(
                  alignment: Alignment.topCenter,
                  fit: BoxFit.fitWidth,
                  image: ev.imageUrl,
                  height: 110,
                  width: 200,
                ),
                Container(
                  child: Text(ev.name),
                  padding: EdgeInsets.only(left: 10, right: 10),
                ),
                Container(
                  child: Text(ev.startDate.toString()),
                  padding: EdgeInsets.only(left: 10, right: 10),
                ),
                Container(
                  child: Text(ev.address),
                  padding: EdgeInsets.only(left: 10, right: 10),
                ),
              ],
            ),
          ));
    }).toList();
  }

所以，结论是：如何更改卡片的高度，以便它们可以容纳更多信息？

谢谢！

【问题讨论】：

标签： flutter dart

【解决方案1】：

GridView 并不是真正设计为具有不同大小的图块。一个不错的选择是使用包flutter_staggered_grid_view。

现在您的图块大小甚至可以是动态的，check out the code for the gif above!

要在某处自动适应一些可变长度的文本，您可以使用包auto_size_text。

【讨论】：