Flutter 上拉刷新 下拉加载

上一篇写的是异步加载,但是并不能实现上拉刷新 下拉加载,基于FutureBuilder做的上刷下加的没有弄明白,本次是基于setState实现的,不对的地方望不吝赐教,有会使用FutureBuilder做的上刷下加的,欢迎留言,学习一下

插件版本:flutter_easyrefresh: ^2.0.8

header和footer部分的国际化 语言支持没做通,所以直接写好了中文

import 'package:flutter/material.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';
import 'package:quiver/strings.dart';
import 'package:ylr_app/base/base_list.dart';
import 'package:ylr_app/base/base_list_card.dart';
import 'package:ylr_app/constants/constants.dart';
import 'package:ylr_app/utils/dio_util.dart';

class HomeNewsMore extends BaseList {
  @override
  _HomeNewsMoreState createState() => _HomeNewsMoreState();
}

class _HomeNewsMoreState extends BaseListState {
  int page = 1;
  List<NewsItemModel> hotList = [];
  GlobalKey<_HomeNewsMoreState> _headerKey =
      new GlobalKey<_HomeNewsMoreState>(); //定义key
  GlobalKey<_HomeNewsMoreState> _footerKey =
      new GlobalKey<_HomeNewsMoreState>(); //定义key

  @override
  void initState() {
    super.initState();
    _getList(); //初始化卡片信息
  }

  void _getList() async {
    var formData = {'page': page};

    var result = await DioUtil.request('/api/article/getArticleList/:page',
        method: DioUtil.GET, data: formData);

    var data = NewsModel.fromJson(result);

    List<NewsItemModel> listData = data.result;

    setState(() {
      hotList.addAll(listData);
    });
  }

  @override
  Widget build(BuildContext context) {
    return super.build(context);
  }

  @override
  pageTitle() {
    return Text(Constants.MODULE_NEWS);
  }


  Widget _listItemBuilder(item) {
    return BaseListCard(
      pageTitle: Constants.MODULE_NEWS,
      isShowImage: isNotEmpty(item.photo) ? true : false,
      isShowVideo: isNotEmpty(item.videoSrc) ? true : false,
      contentTitle: '${item.title}',
      id: int.parse('${item.id}'),
      content: '${item.content}',
      source: '${item.source}',
      date:
          item.updateTime != null ? '${item.updateTime}' : '${item.createTime}',
      comment: int.parse('${item.comment}'),
    );
  }

  @override
  pageList() {
    return EasyRefresh(
      header: ClassicalHeader(
        key: _headerKey,
        bgColor: Colors.black12,
        textColor: Colors.blueGrey,
        refreshText: '拉动刷新',
        refreshReadyText: '释放刷新',
        refreshingText: '正在加载...',
        refreshedText: '加载成功',
        showInfo: false,
        triggerDistance: 60,
      ),
      footer: ClassicalFooter(
        key: _footerKey,
        bgColor: Colors.black12,
        textColor: Colors.blueGrey,
        loadingText: '正在加载...',
        loadedText: '加载成功',
        showInfo: false,
        triggerDistance: 60,
      ),
      child: ListView.builder(
          itemCount: hotList.length,
          itemBuilder: (context, index) {
            final NewsItemModel item = (hotList)[index];

            return _listItemBuilder(item);
          }),
      onRefresh: () async {
        //下拉刷新
        await new Future.delayed(const Duration(seconds: 1), () {
          setState(() {
            hotList.clear();
            page = 1;
            _getList();
          });
        });
      },
      onLoad: () async {
        //上拉加载
        await new Future.delayed(const Duration(seconds: 1), () {
          setState(() {
            page++;
            _getList();
          });
        });
      },
    );
  }
}

// dart model
class NewsModel {
  int code;
  int timestamp;
  String message;
  bool success;
  List<NewsItemModel> result;

  NewsModel(
      {this.code, this.timestamp, this.message, this.success, this.result});

  factory NewsModel.fromJson(Map<String, dynamic> json) {
    final originList = json['result'] as List;

    List<NewsItemModel> newsItemModelList =
        originList.map((value) => NewsItemModel.fromJson(value)).toList();

    return NewsModel(
        code: json['code'],
        timestamp: json['timestamp'],
        message: json['message'],
        success: json['success'],
        result: newsItemModelList);
  }
}

/// dart model
class NewsItemModel {
  int id;
  String title;
  String content;
  String videoSrc;
  String videoPoster;
  String photo;
  String source;
  String date;
  int comment;
  String createTime;
  String updateTime;

  NewsItemModel(
      {this.id,
      this.title,
      this.content,
      this.videoSrc,
      this.videoPoster,
      this.photo,
      this.source,
      this.date,
      this.comment,
      this.createTime,
      this.updateTime});

  factory NewsItemModel.fromJson(Map<String, dynamic> json) {
    return NewsItemModel(
        id: json['id'],
        title: json['title'],
        content: json['content'],
        videoSrc: json['videoSrc'],
        videoPoster: json['videoPoster'],
        photo: json['photo'],
        source: json['source'],
        date: json['date'],
        comment: json['countComment'],
        createTime: json['createTime'],
        updateTime: json['updateTime']);
  }
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值