Flutter如何实现下拉刷新和上拉加载更多

效果

下拉刷新

如果实现下拉刷新，必须借助RefreshIndicator，在listview外面包裹一层RefreshIndicator，然后在RefreshIndicator里面实现onRefresh方法。

body: movieList.length == 0? new Center(child: new CircularProgressIndicator()): new RefreshIndicator(color: const Color(0xFF4483f6),//下拉刷新child: ListView.builder(itemCount: movieList.length + 1,itemBuilder: (context, index) {if (index == movieList.length) {return _buildProgressMoreIndicator();} else {return renderRow(index, context);}},controller: _controller, //指明控制器加载更多使用),onRefresh: _pullToRefresh,),

onRefresh方法的实现_pullToRefresh，注意这里必须使用async 不然报错

 /*** 下拉刷新,必须异步async不然会报错*/Future _pullToRefresh() async {currentPage = 0;movieList.clear();loadMoreData();return null;}

异步加载数据，注意：在Flutter中刷新数据使用的是setState，不然无效，数据不会刷新；数据的获取需要使用[]取值，不能使用对象“ . ”的取值方法！

//加载列表数据loadMoreData() async {this.currentPage++;var start = (currentPage - 1) * pageSize;var url ="https://api.douban.com/v2/movie/$movieType?start=$start&count=$pageSize";Dio dio = new Dio();Response response = await dio.get(url);setState(() {movieList.addAll(response.data["subjects"]);totalSize = response.data["total"];});}

上拉加载更多

加载更多需要对ListView进行监听，所以需要进行监听器的设置，在State中进行监听器的初始化。

//初始化滚动监听器，加载更多使用ScrollController _controller = new ScrollController();

在构造器中设置监听

 //固定写法，初始化滚动监听器，加载更多使用_controller.addListener(() {var maxScroll = _controller.position.maxScrollExtent;var pixel = _controller.position.pixels;if (maxScroll == pixel && movieList.length < totalSize) {setState(() {loadMoreText = "正在加载中...";loadMoreTextStyle =new TextStyle(color: const Color(0xFF4483f6), fontSize: 14.0);});loadMoreData();} else {setState(() {loadMoreText = "没有更多数据";loadMoreTextStyle =new TextStyle(color: const Color(0xFF999999), fontSize: 14.0);});}});

在listView中添加监听controller方法

自此，Flutter如何实现下拉刷新和上拉加载更多完成…

整个列表页面代码参考如下：

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'package:douban/pages/movie/movieDetail.dart';class MovieList extends StatefulWidget {String movieType;//构造器传递数据（并且接收上个页面传递的数据）MovieList({Key key, this.movieType}) : super(key: key);@overrideState<StatefulWidget> createState() {// TODO: implement createStatereturn new MovieListState(movieType: this.movieType);}
}class MovieListState extends State<MovieList> {String movieType;String typeName;List movieList = new List();int currentPage = 0; //第一页int pageSize = 10; //页容量int totalSize = 0; //总条数String loadMoreText = "没有更多数据";TextStyle loadMoreTextStyle =new TextStyle(color: const Color(0xFF999999), fontSize: 14.0);TextStyle titleStyle =new TextStyle(color: const Color(0xFF757575), fontSize: 14.0);//初始化滚动监听器，加载更多使用ScrollController _controller = new ScrollController();/*** 构造器接收（MovieList）数据*/MovieListState({Key key, this.movieType}) {//固定写法，初始化滚动监听器，加载更多使用_controller.addListener(() {var maxScroll = _controller.position.maxScrollExtent;var pixel = _controller.position.pixels;if (maxScroll == pixel && movieList.length < totalSize) {setState(() {loadMoreText = "正在加载中...";loadMoreTextStyle =new TextStyle(color: const Color(0xFF4483f6), fontSize: 14.0);});loadMoreData();} else {setState(() {loadMoreText = "没有更多数据";loadMoreTextStyle =new TextStyle(color: const Color(0xFF999999), fontSize: 14.0);});}});}//加载列表数据loadMoreData() async {this.currentPage++;var start = (currentPage - 1) * pageSize;var url ="https://api.douban.com/v2/movie/$movieType?start=$start&count=$pageSize";Dio dio = new Dio();Response response = await dio.get(url);setState(() {movieList.addAll(response.data["subjects"]);totalSize = response.data["total"];});}@overridevoid initState() {super.initState();//设置当前导航栏的标题switch (movieType) {case "in_theaters":typeName = "正在热映";break;case "coming_soon":typeName = "即将上映";break;case "top250":typeName = "Top250";break;}//加载第一页数据loadMoreData();}/*** 下拉刷新,必须异步async不然会报错*/Future _pullToRefresh() async {currentPage = 0;movieList.clear();loadMoreData();return null;}@overrideWidget build(BuildContext context) {// TODO: implement buildreturn new Scaffold(backgroundColor: Colors.white,appBar: new AppBar(leading: new IconButton(icon: const Icon(Icons.arrow_back),onPressed:null ,),title: new Text(typeName != null ? typeName : "正在加载中...",style: new TextStyle(color: Colors.black)),backgroundColor: Colors.white,),body: movieList.length == 0? new Center(child: new CircularProgressIndicator()): new RefreshIndicator(color: const Color(0xFF4483f6),//下拉刷新child: ListView.builder(itemCount: movieList.length + 1,itemBuilder: (context, index) {if (index == movieList.length) {return _buildProgressMoreIndicator();} else {return renderRow(index, context);}},controller: _controller, //指明控制器加载更多使用),onRefresh: _pullToRefresh,),);}/*** 加载更多进度条*/Widget _buildProgressMoreIndicator() {return new Padding(padding: const EdgeInsets.all(15.0),child: new Center(child: new Text(loadMoreText, style: loadMoreTextStyle),),);}/*** 列表的ltem*/renderRow(index, context) {var movie = movieList[index];var id = movie["id"];var title = movie["title"];var type = movie["genres"].join("、");var year = movie["year"];var score = movie["rating"]["average"];return new Container(height: 200,color: Colors.white,child: new InkWell(onTap: () {Navigator.of(context).push(new MaterialPageRoute(builder: (ctx) => new MovieDetail(movieId: id)));},child: new Column(children: <Widget>[new Container(height: 199,// color: Colors.blue,child: new Row(children: <Widget>[new Container(width: 120.0,height: 180.0,margin: const EdgeInsets.all(10.0),child: Image.network(movie["images"]["small"]),),Expanded(child: new Container(height: 180.0,margin: const EdgeInsets.all(12.0),child: new Column(mainAxisAlignment: MainAxisAlignment.spaceBetween,crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[new Text("电影名称：$title",style: titleStyle,overflow: TextOverflow.ellipsis,),new Text("电影类型：$type",style: titleStyle,overflow: TextOverflow.ellipsis,),new Text("上映年份：$year",style: titleStyle,overflow: TextOverflow.ellipsis,),new Text("豆瓣评分：$score",style: titleStyle,overflow: TextOverflow.ellipsis,)],),),),],),),//分割线new Divider(height: 1)],),));}
}

Flutter如何实现下拉刷新和上拉加载更多相关推荐

uni-app下拉刷新触底加载更多
首先在pages.json 配置文件中配置 "enablePullDownRefresh": true 需要在哪用加载就配置在路由的style里两个事件 //下拉刷新 o ...
recyclerview的数据刷新（下拉刷新和自动加载更多）以及添加提示语（例如：“数据已加载完毕”）
下拉加载更多的核心是SwipeRefreshLayout搭配Recyclerview进行使用.布局为 <android.support.v4.widget.SwipeRefreshLayout ...
android--------自定义控件ListView实现下拉刷新和上拉加载
开发项目过程中基本都会用到listView的下拉刷新和上滑加载更多,为了方便重写的ListView来实现下拉刷新,同时添加了上拉自动加载更多的功能. Android下拉刷新可以分为两种情况: 1.获取 ...
Android 自定义 ListView 上下拉动“刷新最新”和“加载更多”歌曲列表
本文内容环境测试数据项目结构演示参考资料本文演示,上拉刷新最新的歌曲列表,和下拉加载更多的歌曲列表.所谓"刷新最新"和"加载更多"是指日期.演示代码 ...
微信小程序下拉刷新和上拉加载
效果图微信小程序实现下拉刷新和上拉加载有2中方法 1 用系统自带的个人感觉特别简单 2 使用scroll-view 实现, scroll-view 里面有2个属性是滑动到顶部以及到底部如下其实 ...
php mescroll,mescroll下拉刷新和上拉加载js框架
插件描述:mescroll精致的下拉刷新和上拉加载js框架.原生js, 支持vue, 不依赖jquery, zepto, 比iScroll,dropload精简强大; 一套代码多端运行: 完美运行于a ...
【好程序员笔记分享】——下拉刷新和上拉加载更多
-iOS培训,iOS学习-------型技术博客.期待与您交流!------------ iOS学习之路--下拉刷新和上拉加载更多简介本文中笔者将和大家分享应用app中常用到的表单内容的下拉刷新和 ...
vant实现下拉刷新和上拉加载_微信小程序 - 实现下拉刷新、上拉加载
在小程序开发中使用下拉刷新和上拉加载非常多,比如常用的展示型首页,而实现这个功能有两种形式,第一种是使用 scroll-view 组件,第二种是不使用 scroll-view 组件而让整个页面刷新,那 ...
入门微信小程序(含实战) [第九篇] -- 下拉刷新和上拉加载
下拉刷新和上拉加载是两个独立又密切联系的功能,上拉加载需要服务器端有分页机制,而下拉刷新除了重新获取信息外还要对之前的状态和页码进行初始化. 一个一个来吧. 服务器端分页其实yii2早就已经为我们准 ...

Flutter如何实现下拉刷新和上拉加载更多

Flutter如何实现下拉刷新和上拉加载更多相关推荐

最新文章

热门文章