Flutter中Column Widget内的图像大小调整问题答案

【问题标题】：Problem with Image resizing inside Column Widget in FlutterFlutter中Column Widget内的图像大小调整问题
【发布时间】：2020-04-07 02:45:15
【问题描述】：

我有以下代码sn-p，

GridTile(
      child: Card(
        elevation: 5,
        child:  Image.network(imageUrl, fit: BoxFit.scaleDown,),
        ),
        ),
    );

产生以下输出..

但是当我像这样在我的卡片中添加列时......

GridTile(
      child: Card(
        elevation: 5,
        child: Column(
          children: <Widget>[
               Image.network(imageUrl, fit: BoxFit.scaleDown,),
          ],
        ),
        ),
    );

我遇到了以下溢出问题..

我在这里缺少什么。我需要处理有关 Column 的任何重要布局细节。我需要列，以便我可以在图像下方添加收藏按钮和产品描述。在父小部件下方查找以供参考。

return Scaffold(
    appBar: AppBar(
      title: Text('Shopify'),
    ),
    body: GridView.builder(
      itemBuilder: (context, index) => ProductItem(dummyProducts[index].title, dummyProducts[index].imageUrl),
      itemCount: dummyProducts.length,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: 3 / 2,
        crossAxisSpacing: 10,
        mainAxisSpacing: 10
      ),
    ),
  );

【问题讨论】：

请调整gridDelegate，尝试更改：childAspectRatio: 1 看看发生了什么。
childAspectRatio 为 1.5 太大。正如你所说，我将 childAspectRatio 保持为 1 稍微好一点。我仍然面临溢出问题。然后我用纵横比包裹我的图像就成功了。

标签： flutter flutter-layout

【解决方案1】：

您的图片具有确定的比例（宽/高比）。

将gridDelegate 与childAspectRatio 一起使用，您可以在GridView 中指定GridTile 的比率。

调整childAspectRatio或调整图片比例。

玩这个数字看看效果：

childAspectRatio: 1    // square
childAspectRatio: 2    // horizontal rectangle
childAspectRatio: 0.5  // vertical rectangle

【讨论】：

childAspectRatio 调整了整个网格图块的大小，因此我将其保留为 1 以使其成为正方形并将图像包裹在 AspectRatio 小部件中以实现结果。谢谢

【解决方案2】：

将图像包含在 AspectRatio 中终于成功了。请在下面找到代码。

GridTile(
      child: Card(
        elevation: 5,
        child: Column(
          children: <Widget>[
            AspectRatio(
              aspectRatio: 1,
                child: Image.network(imageUrl, fit: BoxFit.scaleDown,),
            ),
          ],
        ),
      ),
    );

【讨论】：