如何在颤动中将嵌套的 JSON api 响应显示为网格视图？答案

【问题标题】：How to show a nested JSON api response as a grid view in flutter?如何在颤动中将嵌套的 JSON api 响应显示为网格视图？
【发布时间】：2019-08-24 06:05:08
【问题描述】：

我正在使用颤振构建应用程序。我想显示一个网格视图，并且在该网格视图中我想要一个数据列表视图。我有一个 JSON Api，它的响应是这样的。

这是一个对象数组。我想在 gridview 中显示对象的 title 和 price 属性，并在该 gridview 的列表视图中显示 services 属性。我正在使用Futurebuilder。我很困惑在 Futurebuilder 中我应该使用gridview.count 还是gridviewbuilder。为了实现列表视图，我应该在gridviewbuilder 或gridview.count 下使用ListViewbuilder 吗？还有其他想法可以实现这一目标吗？

     "title": "EXPRESS 2",
     "price": 500,
     "services": [
       {
         "_id": "5ca07706e8f4c521f0010567",
         "serviceId": "5c9081e3ae535e0c549fa0fe",
         "name": "DENT SECTION"
       },
       {
         "_id": "5ca07706e8f4c521f0010566",
         "serviceId": "5c90820aae535e0c549fa100",
         "name": "ELECTRICAL SYSTEM"
       }
     ],
     "id": "5ca07706e8f4c521f0010565"
   },```

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

GridView.count：创建一个可滚动的二维小部件数组，在横轴上具有固定数量的图块

和

GridView.builder：创建一个可滚动的二维小部件数组，按需创建。

So use the GridView.builder

并尝试使用此代码绑定您的数据

 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),),
    );
  }

【讨论】：