Question

我有以下代码段

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

Answer 1

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

将gridDelegate与childAspectRatio配合使用，可以在GridTile中分配GridView的比例。

调整childAspectRatio或调整图像比例。

播放此数字以查看效果：

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

Answer 2

最终将图像包含在AspectRatio中。请在下面找到代码。

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

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

2 个答案: