将嵌套的 JSON 放入 Flutter List 并在 List 上应用搜索过滤器答案

【问题标题】：Put nested JSON in Flutter List and apply search filter on List将嵌套的 JSON 放入 Flutter List 并在 List 上应用搜索过滤器
【发布时间】：2023-01-19 01:13:32
【问题描述】：

我有嵌套的 JSON 列表我想在 flutter Widget 中添加这个列表，我在几天前尝试过但没有找到合适的解决方案。

我正在与您分享 json 数据，如下所示。你可以找到完整的 json 文件here

[{
        "month": "July",
        "services": [{
                "name": "Opening Balance",
                "amount": 5566.12
            },
            {
                "name": "Property Rates",
                "amount": 0
            }

        ]
    },
    {
        "month": "August",
        "services": [{
                "name": "Waste Disposal",
                "amount": 0
            },
            {
                "name": "Water Basic",
                "amount": 0
            },
            {
                "name": "Water Metered",
                "amount": 0
            },
            {
                "name": "Interest",
                "amount": 81.63
            },

            {
                "name": "Closing Balance",
                "amount": 6145.05
            }
        ]
    },
    {
        "month": "September",
        "services": [{
                "name": "Opening Balance",
                "amount": 6145.05
            },
            {
                "name": "Property Rates",
                "amount": 107.4
            }

        ]
    },
    {
        "month": "October",
        "services": [{
                "name": "Opening Balance",
                "amount": 6319.27
            },
            {
                "name": "Property Rates",
                "amount": 107.4
            },
            {
                "name": "Sanitation Basic",
                "amount": 0
            },
            {
                "name": "Waste Disposal",
                "amount": 0
            },
            {
                "name": "Water Basic",
                "amount": 0
            },
            {
                "name": "Water Metered",
                "amount": 33.65
            },
            {
                "name": "Interest",
                "amount": 83.04
            },
            {
                "name": "Journal Credit",
                "amount": 0
            },
            {
                "name": "Total",
                "amount": 224.09
            },
            {
                "name": "Closing Balance",
                "amount": 6543.36
            }
        ]
    }

]

我有上面的字符串 json 到 dart -> 模型文件here

所有列表的预期结果 ->

按月份名称搜索后的预期结果 ->

搜索结果->

列表视图代码：

   ListView.builder(
                  shrinkWrap: true,
                  itemCount: userList.length,
                  itemBuilder: (context, index) {
                    return   ListTile(
                      title: Text(userList[index]['month']),
                      leading:
                          Text(userList[index]['services'][index]['name']),
                      trailing: Text(userList[index]['services'][index]
                              ['amount']
                          .toString()),
                    );
                  },
                ),

当前结果->

【问题讨论】：

标签： json flutter list search

【解决方案1】：

第一次迭代没问题，但你必须每个月再次迭代才能显示服务......

尝试这样的事情：

ListView.builder(
  shrinkWrap: true,
  itemCount: userList.length,
  itemBuilder: (context, index) {
    return ListTile(
     title: Text(userList[index]['month']),
     subtitle: ListView.builder(
       shrinkWrap: true,
       itemCount: userList[index]['services'].length,
       itemBuilder: (context, index2) {
         return Row(
           children: [
             Text(userList[index]['services'][index2]['name']),
             Text(userList[index]['services'][index2]['amount']),
           ]
          ),
         );
       },
      ),

关于搜索，您在这里有一个示例： Listview filter search in Flutter

无论如何，根据您的应用程序的上下文，我建议您使用对象而不是地图，并从提供者而不是有状态的小部件进行搜索。

【讨论】：