如何在 flutter 中制作响应式图像？

Question

我正在使用 Gridview.builder 制作卡片网格。我没有在 Gridview.builder 中找到任何属性来决定单张卡片的大小也在 Card 小部件中我没有找到任何属性来决定卡片的大小。此外，我想让卡片内的图像和文本响应，这里是 returns 我卡片的方法代码 -

Card myCard(String houseName, String houseImageUrl) {
  return new Card(
      elevation: 5.0,
      child: new InkWell(
        child: new Container(
          alignment: Alignment.center,
          child: new Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              new Image.network(
                houseImageUrl,
                height: 180.0,
                width: 180.0,
              ),
              new Padding(
                padding: const EdgeInsets.all(8.0),
                child: new Center(
                  child: new Text(
                    houseName,
                    style: new TextStyle(fontSize: 16.0),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
            ],
          ),
        ),

      ));

我使用了Gridview.builder如下（"data"是来自API的数据）

new GridView.builder(
              itemCount: data == null ? 0 : data.length,
              gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2),
              itemBuilder: (BuildContext context, int index) {
                var housename = data.keys.toList()[index].toString();
                return myCard(
                    housename, data[housename]['image'].toString());
              })));

这段代码的输出显示了这样的卡片

Screenshot of above code output

Answer 1

您可以使用 fit 属性.

new Image.network(
            houseImageUrl,
            fit: BoxFit.contain,
            height: 180.0,
            width: 180.0,
          ),

属性fit: BoxFit.contain会将整个图像限制在定义的高度。

Answer 2

对于卡片大小，您可以使用 gridDelegate 中的 childAspectRatio 属性，如下所示 ->

new GridView.builder(
                      itemCount: data == null ? 0 : data.length,
                      gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                          childAspectRatio: (1 / 1),
                          crossAxisCount: 2),
                      itemBuilder: (BuildContext context, int index) {
                        var housename = data.keys.toList()[index]
                            .toString();
                        return myCard(
                            housename, data[housename]['image'].toString());
                      }
                  )

在上面的代码中，1/1 表示您的卡片将具有方形

此外，对于图像响应，您可以使用适合的属性作为 @ap14，代码将类似于 ->

Card myCard(String charName, String charImageUrl) {
  return new Card(
      elevation: 5.0,
      child: new InkWell(
        child: new Container(
          alignment: Alignment.center,
          child: new Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              new Padding(
                padding:const EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
                child: new Image.network(
                  charImageUrl,
                  fit: BoxFit.contain,
                  height: 150.0,
                  width: 150.0,
                ),
              ),
              new Padding(
                padding: const EdgeInsets.all(8.0),
                child: new Center(
                  child: new Text(
                    charName,
                    style: new TextStyle(fontSize: 16.0),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
            ],
          ),
        ),
      )
  );
}

Answer 3

使用 responsive_grid 包中的 ResponsiveGridList

你只需指定你想要的宽度，它会选择一行中适合多少张图片，你也可以将 squareCells 设置为 true，这样图片将被强制布局为等宽和等高

如何在 flutter 中制作响应式图像？

How to make responsive images in flutter?

flutter