Flutter Column 底部溢出像素

Question

我正在尝试使用以下格式在 Gridview 中显示一个项目：价格文本 -> 项目图像 -> 标题文本

我使用一列来实现它，似乎 GridView 中的 tile 具有固定高度，因此当图像太大时会导致底部溢出。

所以我的问题是，有没有办法保留价格和标题文本而只挤压中间图像？ 类似于 android/iOS 布局约束的东西？ 谢谢你们。

[更新] 我也粘贴了代码片段。

我还尝试过的另一件事是设置具有固定高度和宽度的图像并且它可以工作，但这需要我仔细找到合适的范围，这对我来说并不是很灵活。 而且 GridTile 也没有真正给我想要的布局。 我真的没有办法用 Column 挤压中间视图（在这种情况下是图像）吗？

@override
Widget build(BuildContext context) {
  final imageUrl = doc['main_image']['downloadURL'];
  Widget image;
  if (imageUrl != null) {
    image =  Image.network(
          imageUrl,
          fit: BoxFit.scaleDown,
        );
  } else {
    image = Container(
      color: Colors.grey,
    );
  }

  String price = '\$' + doc[FIREBASE_COL_PRICE].toString();
  return Card(
      child: Column(
    children: <Widget>[
      Align(
        alignment: Alignment.centerRight,
        child: Text(
          price,
          maxLines: 1,
        ),
      ),
      Container(
        padding: const EdgeInsets.symmetric(horizontal: 8.0),
        child: image,
      ),
      Align(
        alignment: Alignment.centerLeft,
        child: Text(
          doc[FIREBASE_COL_NAME],
          maxLines: 1,
        ))
    ],
  ));
}

Answer 1

您是否考虑过使用Expanded小部件？ 它应该在Card内分配小部件的大小。

我用来测试的 GridView 构建器

GridView.count(
  primary: false,
  padding: const EdgeInsets.all(20),
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
  crossAxisCount: 2,
  children: List.generate(
    20, (index) {
      return gridCard(index);
    },
  ),
),

GridView 的卡片。 我已经修改了您提供的代码段。

gridCard(int index) {
  final imageUrl = "URL";
  Widget image;
  if (imageUrl != null) {
    image = Image.network(
      imageUrl,
      fit: BoxFit.scaleDown,
    );
  } 
  else {
    image = Container(
      color: Colors.grey,
    );
  }
  
  String price = '\$1234';
  return Card(
    child: Container(
      padding: const EdgeInsets.symmetric(horizontal: 12.0),
      child: Column(
        children: <Widget>[
          Expanded(
            flex: 1,
            child: Align(
              alignment: Alignment.centerRight,
              child: Text(
                price,
                maxLines: 1,
              ),
            ),
          ),
          Expanded(
            flex: 3,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              child: image,
            ),
          ),
          Expanded(
            flex: 1,
            child: Align(
              alignment: Alignment.centerLeft,
              child: Text(
                'Some Text $index',
                maxLines: 1,
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

演示