Flutter - ListView4 - easy_refre

demo 地址: https://github.com/iotjin/jh_flutter_demo

easy_refresh git地址

效果图

下拉刷新.gif 上拉加载.gif

引入和本地化处理

yaml

  flutter_localizations:
    sdk: flutter
  flutter_easyrefresh: ^2.0.9

main

//main导入
 import 'package:flutter_easyrefresh/easy_refresh.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';

//MaterialApp
  localizationsDelegates: [
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          GlobalEasyRefreshLocalizations.delegate
        ],
        supportedLocales: [ Locale('zh', 'CN')],

ListViewTest_PullDownVC 代码 (for循环造假数据)

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:flutter_app/ListViewTest_CustomCell.dart';

var dataArr;
var pageIndex =0;//页数
var count =10;//每页10条

void getNewData(){
  pageIndex =0;
  dataArr = new List();
  for(int i = pageIndex*count; i < count; i++){
    var map = new Map();
    map["title"] = "title${i}";
    map["place"] = "place${i}";
    map["state"] = "流转中${i}";
    map["content"] = "这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容";
    map["phone"] = "${i}${i}${i}xxxxxxx";
    map["imageUrl"] = "https://gitee.com/iotjh/Picture/raw/master/lufei.png";
    dataArr.add(map);
  }
}

void getMoreData(){
  pageIndex++;
  for(int i = pageIndex*count; i <pageIndex*count+count; i++){
    var map = new Map();
    map["title"] = "title${i}";
    map["place"] = "place${i}";
    map["state"] = "流转中${i}";
    map["content"] = "这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容";
    map["phone"] = "${i}${i}${i}xxxxxxx";
    map["imageUrl"] = "https://gitee.com/iotjh/Picture/raw/master/lufei.png";
    dataArr.add(map);
  }
}


class ListViewTest_PullDownVC extends StatefulWidget {
  @override
  _ListViewTest_PullDownVCState createState() => _ListViewTest_PullDownVCState();
}

class _ListViewTest_PullDownVCState extends State<ListViewTest_PullDownVC> {

  EasyRefreshController _controller = EasyRefreshController();

  @override
  void initState() {
    super.initState();
  }
  int _count =0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar:AppBar(
            title:Text('ListViewTest_PullDownVC')
        ),
        body:EasyRefresh(
          controller: _controller,
          firstRefresh: true,

          onRefresh: () async{
            await Future.delayed(Duration(seconds: 2), () {
              print("下拉刷新-----");
              getNewData();
              setState(() {
                _count =dataArr.length;
                print("最新条数"+_count.toString());
                _controller.resetLoadState();
              });
            });
          },
          onLoad: () async {
            await Future.delayed(Duration(seconds: 2), () {
              print("上拉加载-----");
              getMoreData();
              setState(() {
                _count =dataArr.length;
                print("加载更多条数"+_count.toString());
              });
              _controller.finishLoad(noMore: _count >= 30);
            });
          },
          child: cell(_count)

        )
    );
  }
}

Widget cell (int dataCount){

  return ListView.separated(
    itemCount: dataCount,
    itemBuilder:(context, index) {
      /*先将字符串转成json*/
      Map<String, dynamic> json = Map<String, dynamic>.from(dataArr[index]);
//        print(json);
      /*将Json转成实体类*/
      CustomViewModel model = CustomViewModel.fromJson(json);
      print("title"+ model.title);
      return ListViewTest_CustomCell(data: model);
    },
    separatorBuilder: (context, index) {
      return Divider(
        height: .5,
        indent: 15,
        endIndent: 15,
//            color: Color(0xFFDDDDDD),
        color: Colors.purple,
      );
    },
  );

}

ListViewTest_CustomCell 代码

import 'package:flutter/material.dart';

class CustomViewModel {
  String title;
  String place;
  String state;
  String phone;
  String content;
  String imageUrl;

  CustomViewModel({this.title,this.place,this.state, this.phone, this.content, this.imageUrl});

  CustomViewModel.fromJson(Map<String, dynamic> json) {
  title = json['title'];
  place = json['place'];
  state = json['state'];
  phone = json['phone'];
  content = json['content'];
  imageUrl = json['imageUrl'];
  }

  Map<String, dynamic> toJson() {
  final Map<String, dynamic> data = new Map<String, dynamic>();
  data['title'] = this.title;
  data['place'] = this.place;
  data['state'] = this.state;
  data['phone'] = this.phone;
  data['content'] = this.content;
  data['imageUrl'] = this.imageUrl;
  return data;
  }
  }



class ListViewTest_CustomCell extends StatelessWidget {

  final CustomViewModel data;
  const ListViewTest_CustomCell({Key key, this.data}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    var spaceHeight = 10.0;
    return Container(
//      height: 100,
        padding: EdgeInsets.all(15),
        color: Colors.yellow,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            SizedBox(height: spaceHeight),
            Row(
//        mainAxisAlignment: MainAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text("${this.data.place}",style: TextStyle(fontSize: 18.0,backgroundColor: Colors.blue)),
//            Text("${this.data.state}",style: TextStyle(fontSize: 18.0,backgroundColor: Colors.blue)),
                Row(
                  children: <Widget>[
                    Text("${this.data.state}",style: TextStyle(fontSize: 18.0,backgroundColor: Colors.blue)),
                    Padding(padding: EdgeInsets.fromLTRB(10, 0, 0, 0),),
                    Image.network("${this.data.imageUrl}",width: 30,height: 30),
                  ],
                )

              ],
            ),
            SizedBox(height: spaceHeight),
            Text("${this.data.phone}",textAlign: TextAlign.left,style: TextStyle(fontSize: 18.0)),
            SizedBox(height: spaceHeight),
            Text(
                "${this.data.content}",
                textAlign: TextAlign.left,
                style: TextStyle(
                    fontSize: 18.0,backgroundColor: Colors.blue
                )
            ),
          ],
        )
    );
  }
}