Flutter 如何在另一个列表视图生成器中添加列表视图生成器？

这是我的列表视图小部件。有两个列表视图生成器，一个在另一个内部。我添加了包覆面提取属性和物理属性。没有呈现任何内容。我对何时使用列表视图、单子滚动视图和自定义滚动视图还有一个疑问

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("Listviews"),
        backgroundColor: Colors.blue,
      ),
      body: ListView.builder(
        shrinkWrap: true,
        itemCount: data == null ? 0 : data.length,
        itemBuilder: (BuildContext context, int index) {
          if (data[index]["type"] == "single") {
            var innerData = data[index]["data"];

            return Container(
              child: ListView.builder(
                shrinkWrap: true,
                itemCount: innerData == null ? 0 : innerData.length,
                itemBuilder: (BuildContext context, int index) {
                  String title = innerData[index]["title"];

                  return Text("$title");
                },
              ),
            );
          }
        },
      ),
    );
  }

这是我的json响应：

[
    {
        "type": "single",
        "data": [
            {
                "title": "Fresh Vegetables"
            },
            {
                "title": "Fresh Fruits"
            },
            {
                "title": "Cuts and Sprouts"
            },
            {
                "title": "Exotic Center"
            }
        ]
    }
]

---

我想做一个喜欢flipkart主页的人。我想基于响应构建小部件。我应该使用哪些小部件？

在listViewBuilder中使用物理属性

    shrinkWrap: true,
    physics: ClampingScrollPhysics(), /// listView scrolls

---

我知道如何复制粘贴您的代码并进行了一些修改，我只需检查我修改的代码：

我已在本地加载了您的json，如下所述：

[
    {
        "type": "single",
        "data": [
            {
                "title": "Fresh Vegetables"
            },
            {
                "title": "Fresh Fruits"
            },
            {
                "title": "Cuts and Sprouts"
            },
            {
                "title": "Exotic Center"
            }
        ]
    }
]

根据您的json类，我创建了一个模型类，您可以使用该模型类从listview访问特定对象：

// To parse this JSON data, do
//
//     final data = dataFromJson(jsonString);

import 'dart:convert';

List<Data> dataFromJson(String str) => List<Data>.from(json.decode(str).map((x) => Data.fromJson(x)));

String dataToJson(List<Data> data) => json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class Data {
    String type;
    List<Datum> data;

    Data({
        this.type,
        this.data,
    });

    factory Data.fromJson(Map<String, dynamic> json) => Data(
        type: json["type"],
        data: List<Datum>.from(json["data"].map((x) => Datum.fromJson(x))),
    );

    Map<String, dynamic> toJson() => {
        "type": type,
        "data": List<dynamic>.from(data.map((x) => x.toJson())),
    };
}

class Datum {
    String title;

    Datum({
        this.title,
    });

    factory Datum.fromJson(Map<String, dynamic> json) => Datum(
        title: json["title"],
    );

    Map<String, dynamic> toJson() => {
        "title": title,
    };
}

//要解析此JSON数据，请执行以下操作
//
//最终数据=dataFromJson（jsonString）；
导入“dart:convert”；
List dataFromJson（String str）=>List.from（json.decode（str.map）（x）=>Data.fromJson（x））；
字符串dataToJson（List data）=>json.encode（List.from（data.map）（（x）=>x.toJson（））；
类数据{
字符串类型；
列出数据；
资料({
这个.类型,，
这个数据,，
});
工厂数据.fromJson（映射json）=>数据(
类型：json[“类型”]，
数据：List.from（json[“data”].map（（x）=>Datum.fromJson（x）），
);
映射到JSON（）=>{
“类型”：类型，
“data”：List.from（data.map（（x）=>x.toJson（）），
};
}
类基准{
字符串标题；
基准面({
这个名字，
});
工厂数据.fromJson（映射json）=>数据(
标题：json[“标题”]，
);
映射到JSON（）=>{
“头衔”：头衔，
};
}

只需检查我所做更改的主文件：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:sample_testing_project/models.dart';

main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<Data> data = List();
  bool _isLoading = false;


  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    loadYourData();
  }

  Future<String> loadFromAssets() async {
    return await rootBundle.loadString('json/parse.json');
  }

  loadYourData() async {
    setState(() {
      _isLoading = true;
    });
    // Loading your json locally you can make an api call, when you get the response just pass it to the productListFromJson method
    String jsonString = await loadFromAssets();
    final datamodel = dataFromJson(jsonString);
    data = datamodel;

    setState(() {
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: new Scaffold(
        appBar: AppBar(
          title: Text("Listviews"),
          backgroundColor: Colors.blue,
        ),
        body: ListView.builder(
          shrinkWrap: true,
          itemCount: data == null ? 0 : data.length,
          itemBuilder: (BuildContext context, int index) {
            if (data[index].type == "single") {
              var innerData = data[index].data;

              return Container(
                child: ListView.builder(
                  shrinkWrap: true,
                  itemCount: innerData == null ? 0 : innerData.length,
                  itemBuilder: (BuildContext context, int index) {
                    String title = innerData[index].title;

                    return Container(
                      width: MediaQuery.of(context).size.width,
                      child: Card(
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text("$title"),
                        ),
                      ),
                    );
                  },
                ),
              );
            }
          },
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
导入“包：flifter/services.dart”；
导入“package:sample_testing_project/models.dart”；
main（）=>runApp（MyApp（））；
类MyApp扩展了StatefulWidget{
@凌驾
_MyAppState createState（）=>\u MyAppState（）；
}
类MyAppState扩展了状态{
列表数据=列表（）；
bool_isLoading=false；
@凌驾
void initState（）{
//TODO:实现initState
super.initState（）；
加载您的数据（）；
}
Future loadFromAssets（）异步{
返回wait-rootBundle.loadString（'json/parse.json'）；
}
loadYourData（）异步{
设置状态（）{
_isLoading=true；
});
//在本地加载json时，可以进行api调用，当得到响应时，只需将其传递给productListFromJson方法
字符串jsonString=await loadFromAssets（）；
最终数据模型=dataFromJson（jsonString）；
数据=数据模型；
设置状态（）{
_isLoading=false；
});
}
@凌驾
小部件构建（构建上下文）{
返回材料PP(
家：新脚手架(
appBar:appBar(
标题：文本（“列表视图”），
背景颜色：Colors.blue，
),
正文：ListView.builder(
收缩膜：对，
itemCount:data==null？0:data.length，
itemBuilder:（构建上下文，int索引）{
if（数据[索引]。类型==“单个”）{
var innerData=数据[index]。数据；
返回容器(
子项：ListView.builder(
收缩膜：对，
itemCount:innerData==null？0:innerData.length，
itemBuilder:（构建上下文，int索引）{
字符串title=innerData[index]。title；
返回容器(
宽度：MediaQuery.of（context）.size.width，
孩子：卡片(
孩子：填充(
填充：常数边集全部（8.0），
子项：文本（“$title”），
),
),
);
},
),
);
}
},
),
),
);
}
}