arrays - 如何在Flutter上显示小部件的数组元素

Question

我有一个看起来像这样的数组

final thisCategory = [
    {
      'category': 'Social Life',
      'data': [
        {'amount': 2000, 'content': 'thanks', 'date': DateTime.now()}
      ]
    },
    {
      'category': 'Food',
      'data': [
        {'amount': 2000, 'content': 'thanks','date': DateTime.now()},
        {'amount': 2000, 'content': 'thanks','date': DateTime.now()}
      ]
    }
  ];

这就是我的应用程序的外观

我的小部件看起来像这样

Expanded(
                child: Container(
                  child: ListView.builder(
                    itemBuilder: (context, index) => TransactitonTile(
                      category: thisCategory[index]['category'],
                      amount: amountCategory[index]['amount'].toString(),
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => Scaffold(
                              body: SafeArea(
                                child: Column(
                                  children: [
                                    Text(thisCategory[index]['category']),
                                    Expanded(
                                      child: Container(
                                        child: ListView.builder(
                                          itemBuilder: (context, index) =>
                                              ListTile(
                                            leading: //this is where i want to show 'date' element,
                                            trailing: //this is where i want to show 'amount' element,
                                            title: //this is where i want to show 'content' element,
                                          ),
                                        ),
                                      ),
                                    )
                                  ],
                                ),
                              ),
                            ),
                          ),
                        );
                      },
                    ),
                    itemCount: thisCategory.length,
                  ),
                ),
              )

因此，当用户按下上面显示的“类别”之一时，用户将转到下一页，该页面将显示该“类别”中的“内容”。我试图显示“内容”，但是所有“类别”中的所有“内容”也显示在下一页中。如何解决这个问题？

Answer 1

根据您提供的上述示例，我为您创建了一个示例:
以下是您提供的smaple json文件

[
    {
       "category":"Social Life",
       "data":[
          {
             "amount":2000,
             "content":"thanks",
             "date":"DateTime.now()"
          }
       ]
    },
    {
       "category":"Food",
       "data":[
          {
             "amount":2000,
             "content":"thanks",
             "date":"DateTime.now()"
          },
          {
             "amount":2000,
             "content":"thanks",
             "date":"DateTime.now()"
          }
       ]
    }
 ]

这是主要的用户界面，下面是该用户界面的模型类。

import 'package:flutter/material.dart';
import 'dart:convert';
// To parse this JSON data, do
//
//     final category = categoryFromJson(jsonString);



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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Users'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Category> categoryList = List();
  bool _isLoading = false;
  _getUsers() async {
    setState(() {
      _isLoading = true;
    });

    var data =
        await DefaultAssetBundle.of(context).loadString("assets/test.json");

    categoryList = categoryFromJson(data);

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

  @override
  void initState() {
    super.initState();
    _getUsers();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: Container(
        child: ListView.builder(
          itemCount: categoryList.length,
          itemBuilder: (BuildContext context, int index) {
            return GestureDetector(
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => DetailPage(
                            category: categoryList[index],
                          )),
                );
              },
              child: Card(
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(categoryList[index].category),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

class DetailPage extends StatefulWidget {
  final Category category;

  DetailPage({this.category});

  @override
  _DetailPageState createState() => _DetailPageState();
}

class _DetailPageState extends State<DetailPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: ListView.builder(
          itemCount: widget.category.data.length,
          itemBuilder: (BuildContext context, int index) {
            return Card(
                child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                children: <Widget>[
                  Text(widget.category.data[index].amount.toString()),
                  Text(widget.category.data[index].content),
                  Text(widget.category.data[index].date),
                ],
              ),
            ));
          },
        ),
      ),
    );
  }
}

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

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

class Category {
  Category({
    this.category,
    this.data,
  });

  String category;
  List<Datum> data;

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

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

class Datum {
  Datum({
    this.amount,
    this.content,
    this.date,
  });

  int amount;
  String content;
  String date;

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

  Map<String, dynamic> toJson() => {
        "amount": amount,
        "content": content,
        "date": date,
      };
}

请让我知道它是否有效。