Flutter 如何制作颤振中的响应图像？

我正在使用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,
                  ),
                ),
              ),
            ],
          ),
        ),

      ));

此代码的输出显示如下卡片

您可以使用该属性

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

---

属性

fit:BoxFit.contain

将整个图像限制在定义的高度

对于卡片大小，您可以在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,
                  ),
                ),
              ),
            ],
          ),
        ),
      )
  );
}

Card myCard（字符串charName，字符串charImageUrl）{
归还新卡(
标高：5.0，
孩子：新墨水井(
子容器：新容器(
对齐：对齐.center，
子：新列(
crossAxisAlignment:crossAxisAlignment.center，
mainAxisAlignment:mainAxisAlignment.spaceBetween，
mainAxisSize:mainAxisSize.min，
儿童：[
新填料(
填充：从LTRB（0.0,0.0,0.0,0.0）开始的常量边集，
孩子：新图像网络(
charImageUrl，
适合：BoxFit.contain，
高度：150.0，
宽度：150.0，
),
),
新填料(
填充：常数边集全部（8.0），
孩子：新中心(
儿童：新文本(
查纳姆，
样式：新的文本样式（fontSize:16.0），
textAlign:textAlign.center，
),
),
),
],
),
),
)
);
}

使用软件包中的

响应网格列表

---

您只需指定所需的宽度，它就可以选择一行中要容纳的图像数量，您还可以将

squareCells

设置为true，这样图像将被迫以相同的宽度和高度布局

这很好，我忘了添加填充和单个子视图。

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