json - 我想在 Flutter 中使用动态 JSON 数据创建 gridView,如屏幕截图所示。谢谢
问题描述
我想使用下面的 JSON 数据创建 GridView,如屏幕截图所示。 如果有人使用下面给出的 JSON 数据创建 GridView 并解释背后的逻辑,我将不胜感激。我是颤振开发的新手。谢谢。!
{
"count": 7,
"result": [
{
"iconId": 1,
"id": 1,
"name": "Kitchen",
"timestamp": 1586951631
},
{
"iconId": 2,
"id": 2,
"name": "android",
"timestamp": 1586951646
},
{
"iconId": 3,
"id": 3,
"name": "mobile",
"timestamp": 1586951654
},
{
"iconId": 4,
"id": 4,
"name": "bathroom",
"timestamp": 1586951665
},
{
"iconId": 5,
"id": 5,
"name": "parking",
"timestamp": 1586974393
},
{
"iconId": 6,
"id": 6,
"name": "theatre",
"timestamp": 1586974429
},
{
"iconId": 7,
"id": 7,
"name": "bedroom",
"timestamp": 1586974457
}
]
}
解决方案
使用转换库将您的 json 字符串转换为 Dart 对象并按照您的意愿使用它,这是您的示例:
import 'package:flutter/material.dart';
import 'dart:convert';
//add this library to get data from the internet
import 'package:http/http.dart' as http;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String _jsonString =
'{ "count": 7, "result": [ { "iconId": 1, "id": 1, "name": "Kitchen", "timestamp": 1586951631 }, { "iconId": 2, "id": 2, "name": "android", "timestamp": 1586951646 }, { "iconId": 3, "id": 3, "name": "mobile", "timestamp": 1586951654 }, { "iconId": 4, "id": 4, "name": "bathroom", "timestamp": 1586951665 }, { "iconId": 5, "id": 5, "name": "parking", "timestamp": 1586974393 }, { "iconId": 6, "id": 6, "name": "theatre", "timestamp": 1586974429 }, { "iconId": 7, "id": 7, "name": "bedroom", "timestamp": 1586974457 } ] }';
Future<String> _getDataFromWeb() async {
http.Response response = await http.get("your-url.com");
if (response.statusCode == 200) {
// If you are sure that your web service has json string, return it directly
return response.body;
} else {
// create a fake response against any stuation that the data couldn't fetch from the web
return '{ "count": 7, "result": []}';
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Your App Title"),
),
body: FutureBuilder<String>(
future: _getDataFromWeb(),
builder: (context, snapshot) {
Map jsonMap = json.decode(snapshot.data);
return GridView.builder(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemCount: jsonMap['count'],
itemBuilder: (BuildContext c, int i) {
Map resultItem = jsonMap['result'][i];
return Card(
child: Center(child: Text("${resultItem['name']}")),
);
},
);
},
),
);
}
}
推荐阅读
- powershell - PowerShell Loop Ping 在线状态
- python - 无法在不重定向的情况下创建付款发票
- c# - 在没有 WPF Scrollviewer 的情况下同步滚动两个 WPF(!) Richtextboxes
- performance - 无法使用 pypy 运行 python 文件
- python - 根据特定顺序从文件中读取文件
- wordpress - Facebook for WooCommerce 插件
- dataset - 有人可以帮我找到满足以下要求的数据集吗?
- flutter - 如何添加如图所示的弯曲模态底片?如何在其上方添加关闭按钮?飘飘然
- r - 使用 case_when() 和 filter() 根据 R 中一列中的值和另一列中的级别对数据帧进行子集化
- mysql - 为什么我的 SQL FOREIGN KEY 子句返回错误?