如何在Flutter中的小部件中创建内部循环?

海兰士

我有一个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表示时间,等等。我尝试了两个文本的循环,但无法实现我的目标。如何在小部件中创建一个内部循环以显示所需的内容,或执行此操作的任何其他方式?

Anmol.majhail

您需要嵌套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,
                  );
                }),
          ),
        ));
  }
}

输出:

在此处输入图片说明

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在Flutter中对齐单个小部件?

如何在Flutter中模糊小部件

Flutter Cards-如何在Flutter中循环卡片小部件

如何在Flutter中创建底部注释小部件?

如何在Flutter中的StaggeredGridView中使用堆栈小部件?

Flutter Cards:如何在Flutter中创建自定义卡片小部件

如何在Flutter中的小部件内获取主题颜色

如何在Flutter中创建概述的卡片小部件

如何在Flutter中管理开关小部件的本机外观

小部件出现/消失时如何在Flutter中查明?

Flutter:如何在“文本”小部件中设置maxLine

如何在Flutter中的画布上绘制小部件?

如何在flutter中的小部件内部循环

如何在Flutter中裁剪可变大小的小部件?

使用for循环在Flutter中创建嵌套的小部件

如何创建对象列表以传递给Flutter中的小部件?

如何在Flutter中删除堆栈中的小部件的内部边框?

如何在for循环中更新标签小部件中的文本?

Flutter,如何在BarChart小部件中创建可点击的栏?

如何在Flutter中创建通用参数类型的小部件函数

如何在 Flutter 中创建随页面滚动而移动的浮动小部件

如何在 Flutter 中更新 showmodalsheet 中的小部件颜色?

Flutter 如何在 build() 中重新创建有状态的小部件

如何在 Flutter 中的小部件中对齐按钮

如何在 Flutter 中的列小部件中隐藏行小部件

如何在 Flutter 中的 Text 小部件中显示值?

如何在flutter中创建一个隐藏/显示小部件的动画容器

如何在flutter中创建SimpleDialog小部件动态内容的最佳实践?

如何在 Flutter 中创建自定义类型的小部件?