Question

我已经成功地将API的JSON数据加载到Flutter应用中。 JSON数据由图像列表组成。 JSON数据采用以下格式。

{
    "images":[
    {
        "id":1,
        "images":"http://url_1.jpg"

    },
    {
        "id":3,
        "images":"http://url_3.jpg"

    },
    {
        "id":4,
        "images":"http://url_4.jpg"

    },
    {
        "id":5,
        "images":"https://url_5.jpg"

    }
]
}

我已经使用以下代码片段将数据加载到列表中，并且工作正常。

_fetchData() async {
    setState(() {
      isLoading = true;
    }); //setState
    final response = await http.get("http://192.168.43.95:3000/memes");
    print("response");
    if (response.statusCode == 200) {
      list = json.decode(response.body) as List;
      print(list);
      setState(() {
        isLoading = false;
      });
    } else {
      throw Exception('Failed to load photos');
    }
  }

我用以下代码块显示了图像：

ListView.builder(
                itemCount: list.length,
                itemBuilder: (BuildContext context, int index) {
                  return ListTile(
                    contentPadding: EdgeInsets.all(10.0),
                    leading: Image.network(
                      list[index]['images'],
                      fit: BoxFit.contain,
                    ),
                  );
                })

现在，我需要修改上面的代码，以便将屏幕分为2列。图像应放置在这些列中（两列的宽度相同），并且每个图像的高度与其宽度成比例。另外，当我们向下滚动时，其余图像应加载到这两列中。 类似于chrome中的Google图片搜索结果

需要进行哪些更改？如果使用ListTile（）无法做到这一点，该怎么办？

Answer 1

使用here中的 flutter_staggered_grid_view：“ ^ 0.2.7”

StaggeredGridView.countBuilder(
    crossAxisCount: 4,
    itemCount: list.length,
    itemBuilder: (BuildContext context, int index) => new Card(
      elevation: 5.0,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(5.0))),
      child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(5.0)),
          image: DecorationImage(
              image: NetworkImage(list[index]['images']),
              fit: BoxFit.cover),
        ),
      ),
    ),
    staggeredTileBuilder: (int index) =>
        new StaggeredTile.count(2, index.isEven ? 2 : 1.5),
    mainAxisSpacing: 4.0,
    crossAxisSpacing: 4.0,
  ),

Answer 2

您应该使用flutter_staggered_grid_view 0.3.0

See example.

Answer 3

这对我来说很好。 crossAxisCount：2 分为两列，而 StaggeredTile.fit（1）将每个图块放入一列。

StaggeredGridView.countBuilder(
              crossAxisCount: 2,
              itemCount: list.length,
              itemBuilder: (BuildContext context, int index) => Container(
                        margin: EdgeInsets.fromLTRB(5, 5, 5, 5),
                        child: Image(
                            fit: BoxFit.fill,
                            image: NetworkImage(list[index]['image']))),
              staggeredTileBuilder: (int index) => new StaggeredTile.fit(1),
            ),

使用ListTile（）

3 个答案: