dart 如何使RefreshIndicator消失?

x6h2sr28  于 2023-09-28  发布在  其他
关注(0)|答案(3)|浏览(104)

我有这样一段代码,它有父小部件Homepage和子小部件CountryList。在CountryList中,我创建了一个函数,该函数使用API获取国家列表。我想在应用程序中启用RefreshIndicator,所以我必须修改Homepage小部件并添加GlobalKey以访问CountryList小部件的getCountryData()功能。RefreshIndicator很好地完成了它的工作。但现在的问题是,当我在应用程序中拉取并使用RefreshIndicator时,会调用getCountryData()函数,但即使在显示列表中的所有数据后,圆形微调器也不会运行(如屏幕截图所示)。

那么,有没有人能给我一个让旋转器转动的建议?包含Homepage小部件的main.dart代码如下:

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

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

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: () {},
            ),
          ),
        );
      },
    );
  }
}
mkh04yzy

mkh04yzy1#

你需要在这里添加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();
    },
  ),
rqqzpn5f

rqqzpn5f2#

调用onRefresh回调。该回调预期更新可滚动的内容,然后完成它返回的Future。在回调函数的Future完成后,刷新指示符消失,我认为应该从getCountryData返回Future<String>

iezvtpos

iezvtpos3#

如果你只是想删除指示符,只需要返回一些future,因为它需要返回一个Future<void>值。例如:

onRefresh:(){
    return Future.delayed(const Duration(seconds: 1));
}

这实际上会在1秒后删除指示符。

相关问题