成都网站建设设计

将想法与焦点和您一起共享

flutter加载更多,flutter listview加载更多

flutter 中监听滑动事件

在移动端,各个平台或 UI 系统的原始指针事件模型基本都是一致,即:一次完整的事件分为三个阶段:手指按下、手指移动、和手指抬起,而更高级别的手势(如点击、双击、拖动等)都是基于这些原始事件的。

创新互联公司是一家专注于做网站、网站设计与策划设计,和平网站建设哪家好?创新互联公司做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:和平等地区。和平做网站价格咨询:18982081108

Flutter 中可以使用 Listener widget 来监听原始触摸事件,它也是一个功能性 widget。

Listener 的常见属性

用法如下:

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

2、使用上述的 Listener 来监听,通过 Listener 的 onPointerMove(手指在屏幕上滑动)来监听滑动的距离,当滑动到底部时加载更多数据

Flutter listview下拉刷新,上拉加载更多封装

本文在 pull_to_refresh 的基础上对刷新做了封装,可以根据刷新状态自定义想要的头和尾。

本文刷新头和尾都使用的 lottie 动画,

lottie动画可以参考

接下来就可以在需要使用list view刷新的页面使用了 如下:

效果图:

25.Flutter的ListView监听滚动事件之ScrollController

对于滚动的视图,我们经常需要监听它的一些滚动事件,在监听到的时候去做对应的一些事情。

比如视图滚动到底部时,我们可能希望做上拉加载更多;

比如滚动到一定位置时显示一个回到顶部的按钮,点击回到顶部的按钮,回到顶部;

比如监听滚动什么时候开始,什么时候结束;

在Flutter中监听滚动相关的内容由两部分组成:ScrollController和ScrollNotification。

ScrollController

在Flutter中,Widget并不是最终渲染到屏幕上的元素(真正渲染的是RenderObject),因此通常这种监听事件以及相关的信息并不能直接从Widget中获取,而是必须通过对应的Widget的Controller来实现。

ListView、GridView的组件控制器是ScrollController,我们可以通过它来获取视图的滚动信息,并且可以调用里面的方法来更新视图的滚动位置。

另外,通常情况下,我们会根据滚动的位置来改变一些Widget的状态信息,所以ScrollController通常会和StatefulWidget一起来使用,并且会在其中控制它的初始化、监听、销毁等事件。

我们来做一个案例,当滚动到1000位置的时候,显示一个回到顶部的按钮:

jumpTo(double offset)、animateTo(double offset,...):这两个方法用于跳转到指定的位置,它们不同之处在于,后者在跳转时会执行一个动画,而前者不会。

ScrollController间接继承自Listenable,我们可以根据ScrollController来监听滚动事件。

iOS开发Flutter探索-State状态保存(10)

有时候我们不希望某个页面每次打开时都重新加载,比如就我们之前的Tabbar结构的页面,每当我们在切换Tab的时候都会执行 void initState() ,这就意味着页面每次都会重新渲染,之所以这样就是因为我们的 State 状态没有保存,如下图所示:

[没有状态保存效果图]

给当前 State 类添加一个扩展(这里就用扩展这个词吧,其实类似于iOS下的 Category ),一个系统的扩展类 AutomaticKeepAliveClientMixin ,并重写 wantKeepAlive 方法,让一个普通的 State 类,具有保存状态的能力。

在Dart语法中通过使用 with 关键字来添加扩展:

bool get wantKeepAlive = true; 之后,当前 State 就具备保存能力了,也就意味着重复切换Tab后, void initState() 就不会重复执行了(由原来的 viewWillAppear() 变成了 viewDidLoad() )。

按照上面方式修改后,发现切换Tab后 void initState() 依然重复执行了,这是为什么呐?这里我们看下我们之前 root_page.dart 里面是如何配置我们的tabbar结构的:

这里我们是通过一个 _viewControllers 的List,把4个子页面放在了里面,全局有一个 _currentIndex ,当 onTap 回调后后,更新 _currentIndex 的值,执行 setState () 后, body 对应的 widget 页面发生改变。而问题也就出在这里,当 body 部分发生改变时,根据Flutter的底层渲染逻辑,这里会移除掉之前的 Widget ,并重新创建新的 Widget ,我们之前在 _viewControllers 放的子页面,并不像iOS下是一个实例对象,存在就直接拿来使用。在Flutter 中 setState () 后界面会被重新绘制,而 body 部分只知道我要渲染一个什么样的 widget ,而该类型的 widget 每次都是会重新创建,这也就意味着我们在Tab切换时,每次都是重新创建,所以每次都执行了 initState() 。

显然我们现在的方式是不合理的,那在Flutter中如何管理这样的子页面,而避免重复渲染呐?

这就要用到一个新的部件了: PageView() ,内部的2个关键属性:

子页面切换通过 _controller.jumpToPage(index); 来实现。

这样子页面也就不会重新创建渲染了,我们的状态保存也就能正常实现了。

学习是一个循序渐进的过程,我们总是在踩坑中不断的前行,把坑填平了也就意味着我们在这个新的东西面前立了足,就可能进行更多为什么的探索了。

Flutter:手把手教你使用滚动型列表组件:ListView

ListView的基础创建使用有三种方式:

通过默认构造函数来创建列表,应用场景 = 短列表

这种方式创建的列表存在一个问题:对于那些长列表或者需要较昂贵渲染开销的子组件,即使还没有出现在屏幕中但仍然会被ListView所创建,这将是一项较大的开销,使用不当可能引起性能问题甚至卡顿。

长列表

列表子项之间需要分割线

ListView的进阶使用主要包括:下拉刷新 上拉加载

在Flutter中,ListView结合RefreshIndicator组件实现下拉刷新

通过包裹一层RefreshIndicator,自定义onRefresh回调方法实现

方式有两种:

通过ListView.controller属性可以判断ListView是否滑动到了底部,再进行上拉加载

NotificationListener是一个Widget,可监听子Widget发出的Notification

ListView在滑动时中会发出ScrollNotification类型的通知,可通过监听该通知得到ListView的滑动状态,判断是否滑动到了底部,从而进行上拉加载

NotificationListener有一个onNotification属性,定义了监听的回调方法,通过它来处理加载更多逻辑

不定期分享关于 安卓开发 的干货,追求 短、平、快 ,但 却不缺深度 。


当前标题:flutter加载更多,flutter listview加载更多
文章链接:http://chengdu.cdxwcx.cn/article/dsespdh.html