Flutter ListView分页加载数据实现

import 'package:flutter/material.dart';
import 'package:flutterapp/data.dart';

import 'style/color.dart';

class MyPage0 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return MyButtonWidget();
  }
}

class MyButtonWidget extends State<MyPage0> {
  List list = new List();

  @override
  void initState() {
    setState(() {
      list.addAll(listData);
    });
    super.initState();
  }

  getNextPage() async {
    Future.delayed(Duration(milliseconds: 200)).then((e) {
      setState(() {
        list.addAll(listData);
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Container(
      color: string2Color("#efefdd"),
      alignment: Alignment.center,
      child: MyRefreshListView(myList: list, getNextPage: getNextPage),
    );
  }
}

class MyRefreshListView extends StatelessWidget {
  final List myList;
  final VoidCallback getNextPage;

  MyRefreshListView({@required this.myList, @required this.getNextPage});

  @override
  Widget build(BuildContext context) {
    return myList.length == 0
        ? Center(child: Text("暂无数据"))
        : ListView.builder(
            itemBuilder: (BuildContext context, int position) {
              //加载一页
              if (position + 4 == myList.length) {
                getNextPage();
              }
              return ListTile(
                contentPadding: EdgeInsets.all(5),
                title: Text(myList[position]['title']),
                subtitle: Text(myList[position]['subTitle'] + ""),
                leading: Image.network(myList[position]['iamge'] + ""),
              );
            },
            itemCount: myList.length);
  }
}

• 效果图

  
  下拉刷新.gif