Flutter Column底部溢出像素答案

【问题标题】：Flutter Column bottom overflowed by pixelsFlutter Column底部溢出像素
【发布时间】：2019-03-12 07:09:35
【问题描述】：

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

我用一个列来实现它，看起来GridView中的瓦片有一个固定的高度，所以当图像太大时会导致底部溢出。

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

[更新] 我也粘贴了代码 sn-p。

我尝试过的另一件事是将图像设置为固定的高度和宽度，它可以工作，但这需要我仔细找到一个合适的范围，这对我来说不是很灵活。而且 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,
        ))
    ],
  ));
}

【问题讨论】：

您可以使用 - GridTile - 价格可以显示在页脚中的页眉和标题中，并且子项将是 GridTile 中的中心图像。
请添加一些您尝试过的代码。
嗨@VirenVVarasadiya，我已按要求粘贴了代码。如果还需要什么，请告诉我。
嗨@anmol.majhail，GridTile 没有给我想要的布局。另外，我还想利用这个问题来帮助我更好地理解颤振布局。是否有一个小部件（约束）只挤压一个特定的视图？
如果你把中间的孩子放在一个 Expanded 小部件中。有用吗？

标签： flutter overflow

【解决方案1】：

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

我用来测试的 GridView builder

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

GridView 的卡片。我已经修改了你提供的 sn-p。

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

演示

【讨论】：