Question

我在休息区API中使用该应用程序来建立国家名称和国旗的应用程序。

在我构建应用程序时，不会向我显示API中的数据。

但是当我保存或热重新加载数据时，显示数据。

我使用initState（），但仍然无济于事。

然后我在列表中插入所有国家/地区的名称和标志，并在ListView.builder中显示它们。

主要

List<String> countriesName = [];
List<String> countriesFlag = [];
NetWork netWork = NetWork();
class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    setState(() {
      getNetwork();
    });
    super.initState();
  }
  Future getNetwork() async {
    countriesName = await netWork.getAllCountries();
    countriesFlag = await netWork.getAllCountriesFlag();
  }
              child: ListView.builder(
                itemCount: countriesName.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(
                      '${countriesName[index]}',
                      style: TextStyle(
                        fontSize: 25,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    subtitle: Hero(
                      tag: 'flag $index',
                      child: SvgPicture.network(
                        '${countriesFlag[index]}', //'https://restcountries.eu/data/gtm.svg'
                        width: 30,
                        height: 120,
                        fit: BoxFit.fitWidth,
                      ),
                    ),
                    onTap: () {
                      setState(() {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => CountryDetail(
                                    countriesFlag: countriesFlag,
                                    countriesName: countriesName,
                                    index: index,
                                    netWork: netWork,
                                  )),
                        );

网络

final urlall = 'https://restcountries.eu/rest/v2/all';
class NetWork {
  Future getAllCountries() async {
    try {
      var response = await http.get(urlall);
      if (response.statusCode == 200) {
        var jasonData = jsonDecode(response.body);
        List<String> countriesName = [];
        for (var country in jasonData) {
          countriesName.add(country['name']);
        }
        return countriesName;
      }
    } catch (e) {
      print('e => $e');
    }
  }
  Future getAllCountriesFlag() async {
    try {
      var response = await http.get(urlall);
      if (response.statusCode == 200) {
        var jasonData = jsonDecode(response.body);
        List<String> countriesFlag = [];
        for (var flag in jasonData) {
          countriesFlag.add(flag['flag']);
        }
        return countriesFlag;
      }
    } catch (e) {
      print('e => $e');
  }
  }
}

-------解决方案--------

我找到了解决方法。

  Future getNetwork() async {
    countriesName = await netWork.getAllCountries();
    countriesFlag = await netWork.getAllCountriesFlag();
    setState(() {});  // added line
  }

Answer 1

我还没有测试过，但是我在Flutter中调用API的方式与此类似：

List<String> countriesName = [];
List<String> countriesFlag = [];

NetWork netWork = NetWork();
class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    super.initState();
    getNetwork();
  }
  Future getNetwork() async {
    setState(() {
      countriesName = await netWork.getAllCountries();
      countriesFlag = await netWork.getAllCountriesFlag();
    });
  }
  // Build UI code here

然后，您应该检查国家名称和国家标志的值是否为空，然后在API返回响应时显示数据。

希望这对您有所帮助。

Restcountries API在热重装后显示

1 个答案: