flutter - 如何基于String的相同值显示来自第二个JSON的数据

Question

我有2个JSON文件:

country.json

[
  {
    "countryName": "United States",
    "countryContinent": "North America"
  },
  {
    "countryName": "Germany",
    "countryContinent": "Europe"
  },
  {
    "countryName": "United Kingdom",
    "countryContinent": "Europe"
  }
]

continent.json

[
  {
    "continentName": "North America",
    "continentCountry": [
      "Canada",
      "Mexico",
      "Cuba"
    ],
    "continentArea": 24790000,
    "continentFlag": [
      "https://www.countryflags.io/ca/shiny/64.png",
      "https://www.countryflags.io/mx/shiny/64.png",
      "https://www.countryflags.io/cu/shiny/64.png"
    ]
  },
  {
    "continentName": "Europe",
    "continentCountry": [
      "Denmark",
      "Finland",
      "France"
    ],
    "continentArea": 10180000,
    "continentFlag": [
      "https://www.countryflags.io/dk/shiny/64.png",
      "https://www.countryflags.io/fi/shiny/64.png",
      "https://www.countryflags.io/fr/shiny/64.png"
    ]
  }
]

我想建立一个基于country.json的列表，然后对于 countryContinent的每个值== continentName的值=>显示来自continent.json的 continentCountry值的数据，像这样



所以请帮助我，这是主文件:

import 'package:ask/model/continent_model.dart';
import 'package:ask/model/country_model.dart';
import 'package:ask/services/continent_services.dart';
import 'package:ask/services/country_service.dart';
import 'package:flutter/material.dart';

class Demo2 extends StatefulWidget {
  Demo2() : super();
  @override
  _Demo2State createState() => _Demo2State();
}

class _Demo2State extends State<Demo2> {
  List<Country> _country = [];
  List<Continent> _continent = [];

  @override
  void initState() {
    super.initState();
    CountryServices.getCountry().then((countries) {
      setState(() {
        _country = countries;
      });
    });
    ContinentServices.getContinent().then((continents) {
      setState(() {
        _continent = continents;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('Demo 2')),
        body: Column(
          children: <Widget>[
            for (Country country in _country)
              Row(
                children: <Widget>[
                  Expanded(child: Text(country.countryName)),
                  Expanded(child: Text(country.countryContinent)),
                  Expanded(child: Text('')), // How to show data of continentCountry
                ],
              )
          ],
        ));
  }
}

编辑2:

为避免创建其他帖子，我扩展了以下问题:
在continent.json中，有更多与 continentCountry(“北美”)值匹配的 continentName(“格陵兰”；“巴拿马”；“牙买加”)数据，如下所示:

continent.json(编辑2)

[
  {
    "continentName": "North America",
    "continentArea": "Area1",
    "continentCountry": [
      "Canada",
      "Mexico",
      "Cuba"
    ],
    "continentFlag": [
      "https://www.countryflags.io/ca/shiny/64.png",
      "https://www.countryflags.io/mx/shiny/64.png",
      "https://www.countryflags.io/cu/shiny/64.png"
    ]
  },
  {
    "continentName": "North America",
    "continentArea": "Area2",
    "continentCountry": [
      "Greenland",
      "Panama",
      "Jamaica"
    ],
    "continentFlag": [
      "https://www.countryflags.io/gl/shiny/64.png",
      "https://www.countryflags.io/pa/shiny/64.png",
      "https://www.countryflags.io/jm/shiny/64.png"
    ]
  },
  {
    "continentName": "Europe",
    "continentArea": "Area3",
    "continentCountry": [
      "Denmark",
      "Finland",
      "France"
    ],
    "continentFlag": [
      "https://www.countryflags.io/dk/shiny/64.png",
      "https://www.countryflags.io/fi/shiny/64.png",
      "https://www.countryflags.io/fr/shiny/64.png"
    ]
  },
  {
    "continentName": "Asia",
    "continentArea": "Area4",
    "continentCountry": [
      "Japan"
    ],
    "continentFlag": [
      "https://www.countryflags.io/jp/shiny/64.png"
    ]
  }
]

因此，我要显示“北美”的所有 continentCountry，如下所示:


请帮助

Answer 1

Expanded(
   child: MyCountries(
     continent: List<Continent>.from(_continent)..retainWhere((continent) => 
       continent.continentName == country.countryContinent)
),

我创建了一个小部件MyCountries来接收列表，首先创建该列表的副本(List.from)，以避免更改原始列表_continent。 RetainWhere仅保留满足条件的元素。您只想保留countryContinent == continentName的大陆

continent.continentName == country.countryContinent

并在“我的国家”小部件中

class MyCountries extends StatelessWidget{
  final String countries;


  MyCountries({List<Continent> continent}) :
    this.countries = continent.reduce((prev, curr) => 
     prev..continentCountry.addAll(curr.continentCountry)).continentCountry.join(' | ');

  @override
  Widget build(BuildContext context) {
    return Text(countries);
  }
}

它获取大洲列表并将其简化为带有带所有国家/地区的大洲国家列表的单个大洲对象，然后只需应用 continentCountry.join(' | ')来加入该列表的所有字符串，然后创建您将在“文本”小部件中使用的国家/地区字符串

更新

根据我对您的评论的理解，应该只有一个出现国家(地区)== ContinentalName的值，我认为可能还有更多(我的错)，所以也许您应该像这样更改它

Expanded(
 child: MyArea(
 continent: _continent.firstWhere((continent) =>  continent.continentName == country.countryContinent)
 //This should return the first ocurrence, only one continent object
),

class MyArea extends StatelessWidget{
  final String area;

  MyArea({Continent continent}) :
    this.area = continent.continentArea.toString(); //You need to give a string to the Text widget anyway

  @override
  Widget build(BuildContext context) {
    return Text(area);
  }
}

我想List是标志的网址列表

Expanded(
 child: MyFlags(
 continent: _continent.firstWhere((continent) =>  continent.continentName == country.countryContinent)
 //This should return the first ocurrence, only one continent object
),

class MyFlags extends StatelessWidget{
  final List<String> flags;

  MyFlags ({Continent continent}) :
    this.flags= continent.continentFlag;

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly, //or try other alignments or using Spacer() between widget in children
      children: [
        for(String flag in flags)
         Image.network(flag, height: 16, width: 25, fit: BoxFit.contain)
         //A flag is wider thatn taller, but you could try other sizes if you want 
      ]
    );
  }
}

更新2

Expanded(
 child: MyFlags(
 continent: List<Continent>.from(_continent)..retainWhere((continent) => 
       continent.continentName == country.countryContinent)
),

class MyFlags extends StatelessWidget{
  final List<String> flags;
  final List<String> countries;

  MyFlags ({List<Continent> continent}) :
    this.flags = continents.expand<String>((continent) => continent.continentFlag).toList(),
    this.countries = continents.expand<String>((continent) => continent.continentCountry).toList(),
    assert(flags.length == countries.length); //They should have the same length

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly, //or try other alignments or using Spacer() between widget in children
      children: [
        for(int i = 0; i < flags.length; i++)
         Column(
           children: [
             Image.network(flags[i], height: 16, width: 25, fit: BoxFit.contain),
             Text(countries[i])
           ]
         )
      ]
    );
  }
}

更新3

Expanded(
 child: MyFlags(
 continent: List<Continent>.from(_continent)..retainWhere((continent) => 
       continent.continentName == country.countryContinent)
),

class MyFlags extends StatelessWidget{
  final List<Continent> continent;

  MyFlags({this.continent});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        for(int i = 0; i < continent.length; i++)
          Row(
            children: [
              Text(continent[i].continentArea.toString()), // or 'Area ${i+1}' if you want to show Area 1, Area 2, etc
              for(String flag in continent[i].continentFlag)
                Image.network(flags[i], height: 16, width: 25, fit: BoxFit.contain),
            ]
          )
      ]
    );
  }
}