dart - 如何在 flutter 的小部件中创建内循环？

Question

我有一个 json 文件:

[
    {  "1": [
      {"week": "Saturday"},

      { 
        "name": "A",
        "time": "15:30"
      },
      {
        "name": "B", 
        "time": "18:45"
      },
      {
        "name": "C",
        "time": "21:00"
      }
    ]
   },

    {  "2": [
      {"week": "Sunday"},

        {
          "name": "D",
          "time": "14:30"     
        },
        {
          "name": "E",
          "time": "15:00"
        }

      ]
    }

]

这是我的代码。假设 counter 列表是从 json 文件生成的。

import 'dart:convert';

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}

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

class MyAppState extends State<MyApp> {
  List data;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Load local JSON file"),
        ),
        body: new Container(
          child: new Center(
            // Use future builder and DefaultAssetBundle to load the local JSON file
            child: new FutureBuilder(
                future: DefaultAssetBundle
                    .of(context)
                    .loadString('data_repo/data.json'),
                builder: (context, snapshot) {
                  // Decode the JSON
                  var new_data = json.decode(snapshot.data.toString());
                  List counter = [3, 2];


                  return new ListView.builder(

                    // Build the ListView
                    itemBuilder: (BuildContext context, int index) {

                      return new Card(
                        child: new Column(
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: <Widget>[
                            ListTile(
                       title: Text(
                         new_data[index]["${index+1}"][0]["week"],
                         style: Theme.of(context).textTheme.headline,
                       ),
                      ),

                            new Text(new_data[index]["${index+1}"][1]["name"]),
                            new Text(new_data[index]["${index+1}"][1]['time']),

                          ],
                        ),
                      );
                    },
                    itemCount: new_data == null ? 0 : new_data.length,
                  );
                }),
          ),
        ));
  }
}

我的输出:

我想以相同的顺序显示 json 文件的所有对象，即在“星期六”之后，A 和它的时间，B 和它的时间等等。我尝试了两个文本的循环但无法实现我的目标。我如何在小部件中创建一个内部循环来显示我想要的东西，或者任何其他方式来显示我想要的东西？

Answer 1

您需要将 -ListView.builder 嵌套在另一个 - ListView.builder 中。

import 'dart:convert';

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}

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

class MyAppState extends State<MyApp> {
  List data;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Load local JSON file"),
        ),
        body: new Container(
          child: new Center(
            // Use future builder and DefaultAssetBundle to load the local JSON file
            child: new FutureBuilder(
                future:
                    DefaultAssetBundle.of(context).loadString('img/data.json'),
                builder: (context, snapshot) {
                  // Decode the JSON
                  List new_data = json.decode(snapshot.data.toString());
                  List counter = [3, 2];

                  return new ListView.builder(
                    // Build the ListView
                    itemBuilder: (BuildContext context, int index) {
                      String weekDay =
                          new_data[index]["${index + 1}"][0]["week"];
                      return new Card(
                        child: new Column(
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: <Widget>[
                            ListTile(
                              title: Text(
                                weekDay,
                                style: Theme.of(context).textTheme.headline,
                              ),
                            ),
                            ListView.builder(
                              itemBuilder: (context, int) {
                                if (int == 0) {
                                  return Container();
                                }
                                return Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: <Widget>[
                                    new Text(new_data[index]["${index + 1}"]
                                        [int]["name"]),
                                    new Text(new_data[index]["${index + 1}"]
                                        [int]['time']),
                                  ],
                                );
                              },
                              shrinkWrap: true,
                              itemCount: new_data[index]["${index + 1}"].length,
                            ),
                          ],
                        ),
                      );
                    },
                    itemCount: new_data == null ? 0 : new_data.length,
                  );
                }),
          ),
        ));
  }
}

输出: