如何在另一个列表视图构建器中添加列表视图构建器？

Question

这是我的列表视图小部件。有两个列表视图构建器，一个在另一个内部。我添加了 shrinkWrap 属性和物理属性。什么都没有渲染。我对何时使用列表视图、单子滚动视图和自定义滚动视图还有疑问。

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

This is the output screen

这是我的 json 响应：

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

我想做像 Flipkart 主页一样。我想根据响应构建小部件。我应该使用哪些小部件？

Answer 1

在 listViewBuilder 中使用物理属性

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

Answer 2

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

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

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

根据您的 json 类，我创建了一个模型类，您可以在其中使用此模型类从列表视图访问特定对象：

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

只需检查我进行更改的主文件：

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