如何在Flutter中制作响应式图片？

Question

我使用Gridview.builder来创建卡片网格。我没有找到Gridview.builder内部的任何属性来确定单个卡片的大小，也没有在Card小部件中找到任何属性来确定卡片的大小。 此外，我想使卡片内的图像和文本具有响应性。以下是返回卡片的方法代码 -

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());
              })));

这段代码的输出结果如下所示，显示出类似于这样的卡片： 上述代码输出的截图

- Sharad

Answer 1

您可以使用“fit”属性。点击此处查看更多信息。

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

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

- ap14

---

这个问题的响应式解决方案是什么，而不是硬编码高度或宽度？ - mLstudent33

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表示您的卡片将具有正方形形状。

此外，为了实现图像响应性，您可以使用fit属性，就像@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,
                  ),
                ),
              ),
            ],
          ),
        ),
      )
  );
}

- Vaibhav Miniyar

---

这个完美地运作了，我忘记添加填充和单一子视图。 - Sharad

Answer 3

使用 responsive_grid 包中的 ResponsiveGridList

您只需指定所需的宽度，它就会选择适合一行的图像数量，您还可以将 squareCells 设置为 true，以便强制图像布局具有相等的宽度和高度

- Mohamed Ali