Question

我尝试在Flutter中使用图像下方的按钮和图像上的文本创建Flutter中的交错网格视图。我尝试过但没有成功，请帮助我

我将此库用于交错网格视图=> flutter_staggered_grid_view

我尝试了.....

  StaggeredGridView.countBuilder(
    padding: const EdgeInsets.only(
        left: 8.0, top: 8.0, right: 8.0, bottom: 8.0),
    crossAxisCount: 4,
    itemCount: givingList.length,
    itemBuilder: (context, j) {
      String imgPath = givingList[j]["images"]["post_image1"];
      return new Material(
          elevation: 8.0,
          borderRadius: new BorderRadius.all(new Radius.circular(8.0)),
          child: ClipRRect(

            borderRadius: new BorderRadius.circular(8.0),
            child: Column(
              children: <Widget>[
                FadeInImage(
                  placeholder: new AssetImage(UIData.loading),
                  image: NetworkImage(imgPath),
                  fit: BoxFit.cover,
                ),
                RaisedGradientButton(
                    child: Text(
                      'UPDATE',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16,
                      ),
                    ),
                    gradient: LinearGradient(
                      colors: <Color>[
                        Color.fromARGB(255, 17, 153, 142),
                        Color.fromARGB(255, 56, 239, 125)
                      ],
                    ),
                    onPressed: () {
                     // updateListing(); //signUpRoute //signUpProfileRoute
                    }),
              ],
            )

          ));
    },
    staggeredTileBuilder: (j) =>
        new StaggeredTile.count(2, j.isEven ? 2 : 3),
    mainAxisSpacing: 10.0,
    crossAxisSpacing: 10.0,
  );

我想要这个=> https://ibb.co/VqkFGd6 但我得到了这个=> https://ibb.co/cJPK9S0

Answer 1

将FadeInImage放在Expanded中，如下所示

Expanded(child: FadeInImage(
              placeholder: new AssetImage(UIData.loading),
              image: NetworkImage(imgPath),
              fit: BoxFit.cover,
            ),),

输出看起来像这样http://prntscr.com/o0x9wn

Answer 2

这对我有用

StaggeredGridView.countBuilder(
    padding:
        const EdgeInsets.only(left: 8.0, top: 8.0, right: 8.0, bottom: 8.0),
    crossAxisCount: 4,
    itemCount: givingList.length,
    itemBuilder: (context, j) {
      String imgPath = givingList[j]["images"]["post_image1"];
      String title = givingList[j]["title"];
      String postID = givingList[j]["key"];
      return new Material(
        elevation: 8.0,
        borderRadius: new BorderRadius.all(new Radius.circular(8.0)),
        child: ClipRRect(
            borderRadius: new BorderRadius.circular(8.0),
            child: Stack(
              children: <Widget>[
                FadeInImage(
                  placeholder: new AssetImage(UIData.loading),
                  image: NetworkImage(imgPath),
                  fit: BoxFit.cover,
                ),
                Positioned(
                    bottom: 0,
                    left: 0,
                    right: 0,
                    child: Container(
                      height: 60,
                      child: RaisedGradientButton(
                          child: Text(
                            'Make as Given Away',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 12,
                            ),
                          ),
                          gradient: LinearGradient(
                            colors: <Color>[
                              Color.fromARGB(255, 17, 153, 142),
                              Color.fromARGB(255, 56, 239, 125)
                            ],
                          ),
                          onPressed: () {
                            removePost(j, postID);

                            // updateListing(); //signUpRoute //signUpProfileRoute
                          }),
                    )),
                Positioned(
                    bottom: 40,
                    left: 10,
                    right: 10,
                    child: Text(
                      title,
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 14,
                        fontFamily: 'Roboto',
                        fontWeight: FontWeight.bold,
                      ),
                    ))
              ],
            )),
      );
    },
    staggeredTileBuilder: (j) =>
        new StaggeredTile.fit(2),
    mainAxisSpacing: 10.0,
    crossAxisSpacing: 10.0,
  );

如何使用底部按钮和图像上的文字构建StaggeredGridView

2 个答案: