Flutter开发之ListView使用第三方pull_to

在Flutter开发之ListView下拉刷新&上拉加载更多（35）中我们实现了下拉刷新、上拉分页加载的功能。但是使用起来非常不方便，且不满一屏时难以处理。
今天介绍ListView使用第三方pull_to_refresh 来实现下拉刷新、上拉分页加载。

添加 `pull_to_refresh` 依赖

官方文档：https://pub.dev/packages/pull_to_refresh#-installing-tab-
我们可以通过pubspec.yaml文件引入最新版本

dependencies:pull_to_refresh: ^1.5.0

导入

import 'package:pull_to_refresh/pull_to_refresh.dart';

使用示例
https://pub.dev/packages/pull_to_refresh#-readme-tab-

在ListView中使用

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'package:flutter/cupertino.dart';class ListViewPulltoRefresh extends StatelessWidget {@overrideWidget build(BuildContext context) {return new Scaffold(appBar: new AppBar(title: new Text('ListViewPulltoRefresh'),),body: new MyHomePage(),);}
}class MyHomePage extends StatefulWidget {@override_MyHomePageState createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {List<String> items = ["1", "2", "3", "4", "5"];
//  List<String> items = ["1", "2", "3", "4", "5", "6", "7", "8"];RefreshController _refreshController =RefreshController(initialRefresh: true);void _onRefresh() async {// monitor network fetchawait Future.delayed(Duration(milliseconds: 1000));// if failed,use refreshFailed()_refreshController.refreshCompleted();}void _onLoading() async {// monitor network fetchawait Future.delayed(Duration(milliseconds: 1000));// if failed,use loadFailed(),if no data return,use LoadNodata()items.add((items.length + 1).toString());if (mounted)setState(() {});_refreshController.loadComplete();}@overrideWidget build(BuildContext context) {return Scaffold(body: SmartRefresher(enablePullDown: true,enablePullUp: true,// WaterDropHeader、ClassicHeader、CustomHeader、LinkHeader、MaterialClassicHeader、WaterDropMaterialHeaderheader: ClassicHeader(
//          height: 45.0,
//          releaseText: '松开手刷新',
//          refreshingText: '刷新中',
//          completeText: '刷新完成',
//          failedText: '刷新失败',
//          idleText: '下拉刷新',),// ClassicFooter、CustomFooter、LinkFooter、LoadIndicatorfooter: CustomFooter(builder: (BuildContext context, LoadStatus mode) {Widget body;if (mode == LoadStatus.idle) {body = Text("pull up load");}else if (mode == LoadStatus.loading) {body = CupertinoActivityIndicator();}else if (mode == LoadStatus.failed) {body = Text("Load Failed!Click retry!");}else {body = Text("No more Data");}return Container(height: 55.0,child: Center(child: body),);},),controller: _refreshController,onRefresh: _onRefresh,onLoading: _onLoading,child: ListView.builder(itemBuilder: (c, i) => Card(child: Center(child: Text(items[i]))),itemExtent: 100.0,itemCount: items.length,),),);}// don't forget to dispose refreshController@overridevoid dispose() {// TODO: implement dispose_refreshController.dispose();super.dispose();}
}

代码中分别使用了小于一屏幕的数据和10条数据测验，以及header: footer: 的自定义样式选择的使用。实际效果根据需要选择不同的参数。更多使用请看：
https://pub.dev/packages/pull_to_refresh#-readme-tab-

滚动视觉差

头部吸顶，滑动收起背景效果。
增加代码_headerView()，将body处改为body:_headerView(),

// 顶部有背景的效果Widget _headerView(){return new CustomScrollView(physics: new BouncingScrollPhysics(),// 需要使用 slivers 才可以slivers: <Widget>[// 头部内容new SliverAppBar(// 高度expandedHeight: 256.0,pinned: true,floating: !true,snap: !true,flexibleSpace: new FlexibleSpaceBar(// 标题title: Text('标题'),centerTitle: true,// 背景图background: new Image.network('http://img.anfone.net/Outside/anfone/201666/2016661523021277.jpg',fit: BoxFit.cover,),),),// 列表内容new SliverList(delegate: new SliverChildBuilderDelegate((ctx, index) {return Container(height: 40,child: new Text('item: $index'),);},childCount: 50),),],);}

如下效果：

Flutter开发之ListView使用第三方pull_to_refresh加载更多（36）相关推荐

Flutter开发之ListView使用第三方flutter_refresh加载更多（37）
在Flutter开发之ListView使用第三方pull_to_refresh加载更多(36) 中我们实现了下拉刷新.上拉分页加载的功能.今天介绍另一个ListView使用第三方flutter_ref ...
Flutter开发之ListView下拉刷新上拉加载更多（35）
在Flutter开发之ListView组件(21) 文章中,我们了解了ListView组件的基本使用.但是数据比较少,没有涉及分页加载.而实际开发中,下拉刷新和分页加载几乎是所有APP的标配.在iOS ...
Flutter开发之ListView添加HeaderView和FooterView-2（39）
参考文章:RecyclerView添加HeaderView和FooterView 接着Flutter开发之ListView添加HeaderView和FooterView-1 继续研究. 通过Recyc ...
Flutter下拉刷新，上拉加载更多数据
下拉刷新很简单,直接使用 RefreshIndicator 组件, onRefresh 为重新获取数据的方法 Widget build(BuildContext context) {return S ...
android listview自动加载更多,如何实现 Android ListView『上拉加载更多』？
ListView上拉加载更多的UI需求 (1)向上滑动 ListView,当最后一个条目滚入屏幕时开始加载更多条目,在列表底部增加一个 footerView:一个 infinite progressB ...
Flutter开发之ListView组件（21）
欢迎点赞+关注.你的鼓励是我写作的动力! ListView是一个类似列的widget,它的内容对于其渲染框太长时会自动提供滚动. ListView 摘要: 用于组织盒子中列表的特殊Column 可以水 ...
iOS 开发之 pdf 文档的加载与浏览的 4 种方式
原文链接:http://www.jianshu.com/p/1d4305a02ea5 在我们的开发中,有些像电子书类型的 app 的开发会涉及到 pdf 文档的加载与展示.由于笔者项目中正好涉及到这块 ...
Flutter开发之ListView添加HeaderView和FooterView（38）
参考文章:Flutter ListView如何添加HeaderView和FooterView flutter的ListView添加HeaderView和FooterView使用CustomScroll ...
Android下拉刷新、上拉加载更多组件FlyRefreshLayout详解
舞动着键盘和鼠标,我誓言要把这个世界写的明明白白本文出自门心叼龙的博客,属于原创类容,转载请注明出处.https://blog.csdn.net/geduo_83/article/details/8 ...

Flutter开发之ListView使用第三方pull_to_refresh加载更多（36）

添加 `pull_to_refresh` 依赖

导入

在ListView中使用

滚动视觉差

Flutter开发之ListView使用第三方pull_to_refresh加载更多（36）相关推荐

最新文章

热门文章

Flutter开发之ListView使用第三方pull_to_refresh加载更多（36）

添加 pull_to_refresh 依赖

导入

在ListView中使用

滚动视觉差

Flutter开发之ListView使用第三方pull_to_refresh加载更多（36）相关推荐

最新文章

热门文章

添加 `pull_to_refresh` 依赖