Question

我有这段代码，其中包含父窗口小部件Homepage和子窗口小部件CountryList。在CountryList中，我创建了一个使用API来获取国家/地区列表的函数。我想在应用程序中启用RefreshIndicator，所以我不得不修改Homepage小部件并添加GlobalKey来访问getCountryData()小部件的CountryList功能。 RefreshIndicator做得很好。但是现在的问题是，当我在应用中拉并使用RefreshIndicator时，会调用getCountryData()函数，但是即使在显示列表中的所有数据后，圆形微调框也不会消失（如图在屏幕截图中）。

那么，有人能建议我一种使微调器运转的方法吗？包含main.dart小部件的Homepage的代码如下：

import 'package:flutter/material.dart';
import 'country_list.dart';
GlobalKey<dynamic> globalKey = GlobalKey();

void main() => runApp(MaterialApp(home: Homepage()));

class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("List of countries"), actions: <Widget>[
        IconButton(icon: Icon(Icons.favorite), onPressed: (){},)
      ],),
      body: RefreshIndicator(child: CountryList(key:globalKey), onRefresh: (){globalKey.currentState.getCountryData();},),
    );
  }
}

包含country_list.dart小部件的CountryList的代码为：

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:flutter_svg/flutter_svg.dart';
class CountryList extends StatefulWidget {
  CountryList({Key key}) : super(key: key);
  @override
  _CountryListState createState() => _CountryListState();
}

class _CountryListState extends State<CountryList> {
  List<dynamic> _countryData;
  bool _loading = false;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    this.getCountryData();
  }

  Future<String> getCountryData() async {
    setState(() {
      _loading = true;
    });
    var response =
        await http.get(Uri.encodeFull("https://restcountries.eu/rest/v2/all"));
    var decodedResponse = json.decode(response.body);
    setState(() {
      _countryData = decodedResponse;
      _loading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return _loading?Center(child: Column(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[CircularProgressIndicator(), Padding(padding: EdgeInsets.all(5.0),), Text("Loading data...", style: TextStyle(fontSize: 20.0),)],)):ListView.builder(
      itemCount: _countryData.length,
      itemBuilder: (BuildContext context, int index) {
        return Card(
          child: ListTile(
            leading: SvgPicture.network(_countryData[index]['flag'], width: 60.0,),
            title: Text(_countryData[index]['name']),
            trailing: IconButton(
              icon: Icon(Icons.favorite_border),
              onPressed: () {},
            ),
          ),
        );
      },
    );
  }
}

Answer 1

调用onRefresh回调。预期回调将更新可滚动内容，然后完成返回的Future。回调指示器的Future完成后，刷新指示消失，我认为您应该从Future<String>返回getCountryData。

Answer 2

您需要在此处添加return

Future<String> getCountryData() async {
    setState(() {
      _loading = true;
    });
    var response =
        await http.get(Uri.encodeFull("https://restcountries.eu/rest/v2/all"));
    var decodedResponse = json.decode(response.body);
    setState(() {
      _countryData = decodedResponse;
      _loading = false;
    });

    return 'success';
    }

在这里：

body: RefreshIndicator(
    child: CountryList(key: globalKey),
    onRefresh: () {
      return globalKey.currentState.getCountryData();
    },
  ),

如何使RefreshIndicator消失？

2 个答案: