[英]How to show a nested JSON api response as a grid view in flutter?
I am building an app using flutter. 我正在使用Flutter构建应用程序。 I want to show a gridview and inside that gridview I want a listview of data. 我想显示一个gridview,并且在那个gridview中我想要一个数据列表视图。 I have a JSON Api which the response is like this. 我有一个JSON Api,响应是这样的。
It's an array of an object. 它是一个对象数组。 I want to show the title and price property of the object in gridview and services property inside a listview in that gridview. 我想在gridview中显示对象的title和price属性,并在那个gridview中的列表视图中显示services属性。 I am using Futurebuilder
. 我正在使用Futurebuilder
。 I am confused whether inside Futurebuilder I should use gridview.count
or gridviewbuilder
. 我对在Futurebuilder中应该使用gridview.count
还是gridviewbuilder
感到困惑。 To achieve the listview should I use ListViewbuilder
under that gridviewbuilder
or gridview.count
? 为了实现列表视图,我应该在该gridviewbuilder
或gridview.count
下使用ListViewbuilder
吗? Any other ideas to achieve this? 还有其他想法可以实现这一目标吗?
"title": "EXPRESS 2",
"price": 500,
"services": [
{
"_id": "5ca07706e8f4c521f0010567",
"serviceId": "5c9081e3ae535e0c549fa0fe",
"name": "DENT SECTION"
},
{
"_id": "5ca07706e8f4c521f0010566",
"serviceId": "5c90820aae535e0c549fa100",
"name": "ELECTRICAL SYSTEM"
}
],
"id": "5ca07706e8f4c521f0010565"
},```
GridView.count
: Creates a scrollable, 2D array of widgets with a fixed number of tiles in the cross axis GridView.count
:创建一个可滚动的2D小部件数组,在横轴上具有固定数量的图块
and 和
GridView.builder
: Creates a scrollable, 2D array of widgets that are created on demand. GridView.builder
:创建可按需创建的可滚动2D小部件数组。
So use the GridView.builder
and try this code to bind your data 并尝试使用此代码绑定您的数据
GridView.builder(
shrinkWrap: true,
itemCount: itemDataList.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2,childAspectRatio: 0.6),
itemBuilder: (BuildContext context, int index){
return Card(
elevation: 6.0,
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Center(
child: Text(itemDataList[index].title),
),
displayItem("id ", itemDataList[index].id),
displayItem("price ", itemDataList[index].price.toString()),
ListView.builder
(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: itemDataList[index].services.length,
itemBuilder: (BuildContext ctxt, int indx) {
return new Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Divider(
height: 2,
color: Colors.black,
),
displayItem("_Id", itemDataList[index].services[indx].sId),
displayItem("Service Id", itemDataList[index].services[indx].serviceId),
displayItem("Service name", itemDataList[index].services[indx].name),
],
);
}
),
],
),
);
},
),
)
Widget displayItem(String key, String value){
return Padding(
padding: const EdgeInsets.all(2.0),
child: Text('$key : $value', style: TextStyle(fontSize: 11),),
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.