我已成功将 JSON 数据从 API 加载到 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 列。图像应放置在这些列中(2 列的宽度相同)，每个图像的高度与其宽度成正比。此外，当我们向下滚动时，剩余的图像应该加载到这两列中。 类似于 chrome 中的 google 图片搜索结果
需要做出哪些改变？如果 ListTile() 无法做到这一点，我该怎么做？
最佳答案
使用 flutter_staggered_grid_view: "^0.2.7"来自 here
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,
),
关于flutter - 使用 ListTile() 将从 Api 加载的图像排列到 Flutter 中的两列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59254256/