Flutter 下拉刷新

Question

我已经实现了这段代码用于显示来自Web URL的JSON数据列表。 我试图实现一个简单的下拉刷新，但什么都不起作用。

Flutter代码很长，但其实很简单。它有flutter的主要类以及加载Web上的JSON数据的future方法。

我只想实现一个简单的下拉刷新。

我在这里缺少什么？

为什么它不起作用？

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:pull_to_refresh/pull_to_refresh.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'XXX',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'XXX'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);


  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  final RefreshController _refreshController = RefreshController();

  Future<List<User>> _getUsers() async {

    var data = await http.get("xxxxxxxxxxxxx");


    if (data.statusCode == 200) {

        print('Status Code 200: Ok!');

        var jsonData = json.decode(data.body);


        List<User> users = [];

        for (var k in jsonData.keys) {

          var u = jsonData[k];
          //print(u["pubdate"]);

          User user = User(u["id"], u["source"], u["desc"], u["link"], u["title"], u["img"], u["pubdate"]);

          users.add(user);

        }

        print(users.length);

        return users;

    } else {

      throw Exception('Failed to load json');

    }


  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SmartRefresher(
        controller: _refreshController,
        enablePullDown: true,
        header: WaterDropHeader(),
        onRefresh: () async {
          await Future.delayed(Duration(seconds: 1));
          _refreshController.refreshCompleted();
        },
        child: FutureBuilder(

            future: _getUsers(),
            builder: (BuildContext context, AsyncSnapshot snapshot){
              if(snapshot.data == null){

                return Container(
                  child: Center(
                    child: Text("Loading..."),
                  ),
                );

              } else {


                return ListView.builder(
                itemCount: snapshot.data.length,
                itemBuilder: (BuildContext context, int id){

                return ListTile(

                  leading: CircleAvatar(
                    backgroundImage: NetworkImage(
                        snapshot.data[id].img
                    ),
                  ),

                  title: Text(snapshot.data[id].title),
                  subtitle: Column(
                    children: <Widget>[
                      Row(
                          children: [
                          Text(
                            snapshot.data[id].source,
                            overflow: TextOverflow.fade,
                            maxLines: 1,
                            softWrap: false,
                          ),
                          Spacer(),
                          Text(snapshot.data[id].pubdate),
                          ],
                      ),
                    ],
                  )
                );
                },
                );

              }

            },

          ),
      ),

    );
  }
}

class User {

  final int id;
  final String source;
  final String desc;
  final String link;
  final String title;
  final String img;
  final String pubdate;

  User(this.id, this.source, this.desc, this.link, this.title, this.img, this.pubdate);


}

- grc

---

请问您能否发布一份JSON数据的示例？ - Sagar Acharya

Answer 1

您需要按照如下方式在onLoading中获取用户

@override
Widget build(BuildContext context) {

return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: SmartRefresher(
    ....
    onLoading: _getUsers,
    .....
  )
}

- Arun Yogeshwaran

---

当我在body下方插入onloading: _getUsers()时，SmartRefresher会提示“参数类型'Future<List<User>>'无法分配给参数类型'()->void'”。 - grc

Answer 2

解决了！

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:http/http.dart' as http;
import 'dart:convert';


void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'XXXX',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'XXXXXX'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {
  //Funcao para buscar as noticias
  Future<List<User>> _getUsers() async {
    var data = await http.get("XXXXX");
    if (data.statusCode == 200) {
        print('Status Code 200: Ok!');
        var jsonData = json.decode(data.body);
        List<User> users = [];
        for (var k in jsonData.keys) {
          var u = jsonData[k];
          //print(u["pubdate"]);
          User user = User(u["id"], u["source"], u["desc"], u["link"], u["title"], u["img"], u["pubdate"]);
          users.add(user);
        }
        print(users.length);
        return users;
    } else {
      throw Exception('Failed to load json');
    }
  }


  var refreshKey = GlobalKey<RefreshIndicatorState>();

  @override
  void initState() {
    super.initState();
    refreshList();
  }

  Future<Null> refreshList() async {
    refreshKey.currentState?.show(atTop: false);
    await Future.delayed(Duration(seconds: 2));

    setState(() {
      _getUsers();
    });

    return null;
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: RefreshIndicator(
        key: refreshKey,
        child: FutureBuilder(

            future: _getUsers(),
            builder: (BuildContext context, AsyncSnapshot snapshot){
              if(snapshot.data == null){

                return Center(
                  child: CircularProgressIndicator(),
                );

              } else {


                return ListView.builder(
                itemCount: snapshot.data.length,
                itemBuilder: (BuildContext context, int id){

                return ListTile(

                  leading: CircleAvatar(
                    backgroundImage: NetworkImage(
                        snapshot.data[id].img
                    ),
                  ),

                  title: Text(snapshot.data[id].title),
                  subtitle: Column(
                    children: <Widget>[
                      Row(
                          children: [
                          Text(
                            snapshot.data[id].source,
                            overflow: TextOverflow.fade,
                            maxLines: 1,
                            softWrap: false,
                          ),
                          Spacer(),
                          Text(snapshot.data[id].pubdate),
                          ],
                      ),
                    ],
                  )
                );
                },
                );

              }

            },

        ),
        onRefresh: refreshList,
      ),

    );
  }
}

class User {

  final int id;
  final String source;
  final String desc;
  final String link;
  final String title;
  final String img;
  final String pubdate;

  User(this.id, this.source, this.desc, this.link, this.title, this.img, this.pubdate);


}

- grc