Question

我正在尝试在Gridview中以以下格式显示项目：价格文字->商品图片->标题文字

我正在使用一列来实现它，并且看来GridView中的图块具有固定的高度，因此，当图像太大时，将导致底部溢出。

所以我的问题是，有没有办法保留价格和标题文本并仅挤压中间图像？类似于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,
              ),
            ),
          ),
        ],
      ),
    ),
  );
}

演示

颤振列底部溢出像素

1 个答案: