Question

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

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如下（＆＃34;数据＆＃34;是来自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属性，如下所示 - ＆gt;

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，代码将类似于 - ＆gt;

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，以便图像将被强制布局为相等的宽度和高度

如何使响应的图像颤动？

3 个答案: