在 Flutter 的 ListView 中加载特定类别的 JSON 数据

Question

我有两家公司

Apple

和

Windows

的产品的JSON列表。以下是我的 JSON 数据结构：

[
  {
    "category": "Apple",
    "name": "Macbook Air"
  },
  {
    "category": "Apple",
    "name": "Macbook Pro"
  },
  {
    "category": "Microsoft",
    "name": "Surface"
  },
  {
    "category": "Apple",
    "name": "iPad"
  },
  {
    "category": "Microsoft",
    "name": "Windows"
  },
  {
    "category": "Apple",
    "name": "Siri"
  },
  {
    "category": "Microsoft",
    "name": "Office"
  }
]

我正在尝试创建

Apple

或

Microsoft

类别的列表视图。但在我当前的列表视图中，它显示了 JSON 文件中的所有产品：

  List data;

  Future<String> loadJsonData() async{
    var jsonText = await rootBundle.loadString('assets/json/products.json');
    setState(() => data = json.decode(jsonText));
  }

  @override
  void initState() {
    this.loadJsonData();
    super.initState();
  }

上面的代码加载了两家公司的所有产品。但是我怎样才能只加载

Apple

或

Microsoft

的产品呢？

这是我的

ListView

Container(
    child: data == null ? Container() : ListView.builder(
        itemCount: data.length,
        itemBuilder: (BuildContext context, int index) {
            return Container(
                child: ListTile(
                    title: Text(
                        data[index]['name'],
                    ),
                ),
            );
        }
    ),
),

Answer 1

你可以这样做：

 @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color(0xfff5f5f5),
        appBar: AppBar(
          title: Text('Demo'),
        ),
        body: Container(
          child: data == null
              ? Container()
              : ListView.builder(
                  itemCount: data.length,
                  itemBuilder: (BuildContext context, int index) {
                    return Container(
                        child: ((data[index]['category'] == "Apple")
                            ? ListTile(title: Text(data[index]['name']))
                            : Container()));
                  }),
        ));
  }
}

Answer 2

您可以删除除 Apple 或 Microsoft 之外的项目：

data.removeWhere((item) {
    item['category'] != 'Apple' || item['category'] != 'Microsoft'
});

另请参阅 列出 Dartdoc

Answer 3

如果我想查看某个特定类别不存在的文本，例如“类别不包含产品”

，该怎么办？

我正在尝试做类似的事情，我有一个列表，我想将其分为不同的类别，我创建了选项卡来导航各个类别，并且我使用此代码来过滤类别，只有我想看到类别中没有产品的文本，该类别不包含产品，但目前我还没有设法做到这一点，有人可以帮助我吗？