这节课学习一下上拉加载效果,其实现在上拉加载的插件有很多,但是还没有一个插件可以说完全一枝独秀,我也找了一个插件,这个插件的优点就是服务比较好,作者能及时回答大家的问题。我觉的选插件也是选人,人对了,插件就对了。

flutter_easyrefresh简介

flutter_easyrefresh官方简介:

正如名字一样,EasyRefresh很容易就能在Flutter应用上实现下拉刷新以及上拉加载操作,它支持几乎所有的Flutter控件,但前提是需要包裹成ScrollView。它的功能与Android的SmartRefreshLayout很相似,同样也吸取了很多三方库的优点。EasyRefresh中集成了多种风格的Header和Footer,但是它并没有局限性,你可以很轻松的自定义。使用Flutter强大的动画,甚至随便一个简单的控件也可以完成。EasyRefresh的目标是为Flutter打造一个强大,稳定,成熟的下拉刷新框架。

flutter_easyrefresh优点:

  • 能够自定义酷炫的Header和Footer,也就是上拉和下拉的效果。
  • 更新及时,不断在完善,录课截至时已经是v1.2.7版本了。
  • 有一个辅导群,虽然文档不太完善,但是有辅导群和详细的案例。
  • 回掉方法简单,这个具体可以看下面的例子。

引入依赖

直接在pubspec.yaml中的dependencies中进行引入,主要要用最新版本,文章中的版本不一定是最新版本。

dependencies:
flutter_easyrefresh: ^1.2.7

引入后,在要使用的页面用import引入package,代码如下:

import 'package:flutter_easyrefresh/easy_refresh.dart';

制作上拉加载效果

使用这个插件,要求我们必须是一个ListView,所以我们要改造以前的代码,改造成ListView。

return EasyRefresh(
child: ListView(
children: <Widget>[
SwiperDiy(swiperDataList:swiperDataList ), //页面顶部轮播组件
TopNavigator(navigatorList:navigatorList), //导航组件
AdBanner(advertesPicture:advertesPicture),
LeaderPhone(leaderImage:leaderImage,leaderPhone: leaderPhone), //广告组件
Recommend(recommendList:recommendList),
FloorTitle(picture_address:floor1Title),
FloorContent(floorGoodsList:floor1),
FloorTitle(picture_address:floor2Title),
FloorContent(floorGoodsList:floor2),
FloorTitle(picture_address:floor3Title),
FloorContent(floorGoodsList:floor3),
_hotGoods(), ],
) ,
loadMore: ()async{
print('开始加载更多');
var formPage={'page': page};
await request('homePageBelowConten',formData:formPage).then((val){
var data=json.decode(val.toString());
List<Map> newGoodsList = (data['data'] as List ).cast();
setState(() {
hotGoodsList.addAll(newGoodsList);
page++;
});
});
},
); }else{
return Center(
child: Text('加载中'), );
}

具体的解释我就在视频中进行了,因为这个还是比较复杂的。

自定义上拉加载效果

因为它自带的样式是蓝色的,与我们的界面不太相符,所以我们改造一下,它的底部上拉刷新效果。如果你有兴趣做出更炫酷的效果,可以自行查看一下Github,学习一下。

refreshFooter: ClassicsFooter(
key:_footerKey,
bgColor:Colors.white,
textColor: Colors.pink,
moreInfoColor: Colors.pink,
showMore: true,
noMoreText: '',
moreInfo: '加载中',
loadReadyText:'上拉加载....' ),

做到这步我们需要进行调试一下,然后看一下我们的效果。

本节总结:这节课主要学习了easy_refresh组件的介绍和使用,并结合项目案例做出了上拉加载的效果。

Flutter移动电商实战 --(20)首页上拉加载更多功能的制作的更多相关文章

  1. Android 上拉加载更多功能

    前几天看了github上面的例子,参照它的实现,自己又稍微改了一点,往项目里面增加了一个上拉加载更多功能.具体的实现如下: 首先要重写ListView: import android.content. ...

  2. Android 开发 上拉加载更多功能实现

    实现思维 开始之前先废话几句,Android系统没有提供上拉加载的控件,只提供了下拉刷新的SwipeRefreshLayout控件.这个控件我们就不废话,无法实现上拉刷新的功能.现在我们说说上拉加载更 ...

  3. 实现上拉加载更多的SwipeRefreshLayout

    转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/49992269 本文出自:[江清清的博客] (一).前言: [好消息] ...

  4. android ListView上拉加载更多 下拉刷新功能实现(采用pull-to-refresh)

    Android实现上拉加载更多功能以及下拉刷新功能, 采用了目前比较火的PullToRefresh,他是目前实现比较好的下拉刷新的类库. 目前他支持的控件有:ListView, ExpandableL ...

  5. SwipeRefreshLayout详解和自定义上拉加载更多

    个人主页 演示Demo下载 本文重点介绍了SwipeRefreshLayout的使用和自定View继承SwipeRefreshLayout添加上拉加载更多的功能. 介绍之前,先来看一下SwipeRef ...

  6. Android5.0新特性:RecyclerView实现上拉加载更多

    RecyclerView是Android5.0以后推出的新控件,相比于ListView可定制性更大,大有取代ListView之势.下面这篇博客主要来实现RecyclerView的上拉加载更多功能. 基 ...

  7. 自定义ListView下拉刷新上拉加载更多

    自定义ListView下拉刷新上拉加载更多 自定义RecyclerView下拉刷新上拉加载更多 Listview现在用的很少了,基本都是使用Recycleview,但是不得不说Listview具有划时 ...

  8. Flutter实战视频-移动电商-35.列表页_上拉加载更多制作

    35.列表页_上拉加载更多制作 右侧列表上拉加载配合类别的切换 上拉加载需要一个page参数,当点击大类或者小类的时候,这个page就要变成1 provide内定义参数 首先我们需要定义一个page的 ...

  9. Flutter移动电商实战 --(35)列表页_上拉加载更多制作

    右侧列表上拉加载配合类别的切换 上拉加载需要一个page参数,当点击大类或者小类的时候,这个page就要变成1 provide内定义参数 首先我们需要定义一个page的变量 下图是我们之前在首页的时候 ...

随机推荐

  1. 3.ConcurrentHashMap 锁分段机制 Copy-On-Write

    /*ConcurrentHashMap*/ Java 5.0 在 java.util.concurrent 包中提供了 多种 并发容器来改进同步容器的性能 ConcurrentHashMap 同步容器 ...

  2. idou老师教你学Istio 27:解读Mixer Report流程

    1.概述 Mixer是Istio的核心组件,提供了遥测数据收集的功能,能够实时采集服务的请求状态等信息,以达到监控服务状态目的. 1.1 核心功能 •前置检查(Check):某服务接收并响应外部请求前 ...

  3. Java 基础 线程的Runnable接口 /线程的同步方法 /同步代码块

    笔记: /**通过 Runnable接口来实现多线程 * 1. 创建一个实现runnable 接口的类 * 2. 在类中实现接口的run() 抽象方法 * 3. 创建一个runnable 接口实现类的 ...

  4. JavaScript查漏补缺

    js函数定义的三种方式: 函数声明 function sum(a,b){ return a+b } 函数表达式 var sum = function(a,b){ return a+b } Functi ...

  5. gitlab自动备份脚本auto_backup_to_remote

    !/bin/bash gitlab 服务器备份路径 LocalBackDir=/var/opt/gitlab/backups 远程备份服务器 gitlab备份文件存放路径 RemoteBackDir= ...

  6. 怎么在vscode里搜索函数

    怎么在vscode里搜索函数?在vsCode编辑器中如何跨文件查找函数的定义? 问题: 比如: 在 a.js中使用 var res = window.unique(arr); 在未知的js文件定义了u ...

  7. 关于Python中正则使用findall和分组的一个坑

    版权声明:本文为sam的原创文章,转载请添加出处:http://blog.csdn.net/samed https://blog.csdn.net/samed/article/details/5055 ...

  8. 9、Spring Boot 2.x 集成 Thymeleaf

    1.9 Spring Boot 2.x 集成 Thymeleaf 完整源码: Spring-Boot-Demos 1.9.1 在pom中引入依赖 <dependency> <grou ...

  9. python自动华 (十一)

    Python自动化 [第十一篇]:Python进阶-RabbitMQ队列/Memcached/Redis  本节内容: RabbitMQ队列 Memcached Redis 1.  RabbitMQ ...

  10. 在多语句事务内不允许使用 CREATE DATABASE 语句。

    方法一:create database [ 项目名称] 方法二:update-database -verbose