更新2

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

您可以在List<String>之类的单独函数中遍历字符串List<Text> getSameContinentCountries的列表。

数据表示类

国家/地区

class Country {
  String countryName;
  String countryContinent;

  Country({this.countryName, this.countryContinent});

  factory Country.fromJson(Map<String, dynamic> json) {
    return Country(
      countryName: json['countryName'],
      countryContinent: json['countryContinent'],
    );
  }
}

大陆

class Continent {
  String continentName;
  List<String> continentCountry;

  Continent({this.continentName, this.continentCountry});

  factory Continent.fromJson(Map<String, dynamic> json) {
    return Continent(
      continentName: json['continentName'],
      continentCountry: json['continentCountry'],
    );
  }
}

您现在可以使用以下方法在initState中生成List<Country> _country和List<Continent> _continent：

// TODO generate Lists
    for (Map<String, dynamic> _json in continentListResponse) {
      continent2 = Continent.fromJson(_json);
      this._continent.add(continent2);
    }
    for (Map<String, dynamic> _json in countryListResponse) {
      country2 = Country.fromJson(_json);
      this._country.add(country2);
    }

在欧洲大陆的功能

仅文本

List<Text> getSameContinentCountries({@required String countryContinent}) {
    int continentIndex = this
        ._continent
        .indexWhere((continent) => continent.continentName == countryContinent);
    List<String> _cC = this._continent[continentIndex].continentCountry;
    List<Text> wrapText = [Text('no Countries found')];
    if (_cC.length > 0) {
      wrapText = [];
      for (String country in _cC) {
        wrapText.add(Text(country));
      }
    }
    return wrapText;
  }

所有小部件

List<Widget> getSameContinentCountries({@required String countryContinent}) {
    // returns a List of any Widget, many combinations possible
    // such as chips, cards etc.
    int continentIndex = this
        ._continent
        .indexWhere((continent) => continent.continentName == countryContinent);
    List<String> _cC = this._continent[continentIndex].continentCountry;
    List<Widget> wrapText = [Text('no Countries found')];
    if (_cC.length > 0) {
      wrapText = [];
      for (String country in _cC) {
        // you may want to use Padding
        wrapText.add(Padding(
          padding: const EdgeInsets.symmetric(horizontal: 2),
          child: Text(country),
        ));
        // simple | divider with Text widget
        wrapText.add(Padding(
          padding: const EdgeInsets.symmetric(horizontal: 2),
          child: Text('|'),
        ));
        // or use the VerticalDivider which needs a parent with height
        wrapText.add(
          Container(
              height: 15,
              child: VerticalDivider(
                color: Colors.red,
                width: 4,
                thickness: 2,
              )),
        );
        // or use any other widget, eg. chips
        wrapText.add(Chip(
          label: Text(country),
        ));
      }
    }
    // remove the last "divider"
    wrapText.removeLast();
    return wrapText;
  }

使用函数生成的小部件

在这里，我建议您使用Wrap小部件。

@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: Wrap(
                        children: getSameContinentCountries(
                            countryContinent: country.countryContinent)),
                  ),
                ],
              )
          ],
        ));
  }

Link to the result Image

更新

我尚无法评论其他答案，因此我必须在回答中包含此简短信息。

要使用图像，只需返回一个图像小部件，您可能希望将其包装在Sized Box或Button / GestureDetctor中以用于单击事件。

List<Widget> getFlags({@required String countryContinent}) {
    // returns a List of any Widget, many combinations possible
    // such as chips, cards, images, buttons etc.
    int continentIndex = this
        ._continent
        .indexWhere((continent) => continent.continentName == countryContinent);
    List<String> _cF = this._continent[continentIndex].continentFlag;
    List<Widget> wrapWidget = [Text('no Countries found')];
    if (_cF.length > 0) {
      wrapWidget = [];
      for (String flag in _cF) {
        // add the Flags
        wrapWidget.add(Image.network(flag));
      }
    }
    return wrapWidget;
  }

结果：

更新2

要访问具有相同continentName的所有标志，必须提取匹配的元素，然后循环到新的List<Continent>。像这样更改getFlags函数的代码：

List<Widget> getFlags({@required String countryContinent}) {
  // returns a List of any Widget, many combinations possible
  // such as chips, cards, images, buttons etc.
  //! UPDATE
  List<Continent> sameContient = this
      ._continent
      .where((continent) => continent.continentName == countryContinent)
      .toList();
  List<String> _cF = [];
  for (Continent sc in sameContient) {
    for (String flag in sc.continentFlag) {
      _cF.add(flag);
    }
  }
  List<Widget> wrapWidget = [Text('no Countries found')];
  if (_cF.length > 0) {
    wrapWidget = [];
    for (String flag in _cF) {
      // add the Flags
      wrapWidget.add(
          Image.network(flag, height: 16, width: 25, fit: BoxFit.contain));
    }
  }
  return wrapWidget;
}

，您将得到以下结果：

Answer 2

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(' | ')即可加入该列表的所有字符串，并创建您将使用的国家/地区字符串在“文本”小部件中

更新

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

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),
            ]
          )
      ]
    );
  }
}

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

编辑2：

2 个答案:

数据表示类

在欧洲大陆的功能

使用函数生成的小部件

更新

更新2