首页 > 其他分享 >Flutter可滚动组件(3):滚动监听及控制

Flutter可滚动组件(3):滚动监听及控制

时间:2024-10-11 16:13:31浏览次数:7  
标签:位置 滚动 ScrollController 监听 offset 组件 Flutter

前一篇博客介绍了 Flutter 中常用的可滚动组件,也说过可以用ScrollController来控制可滚动组件的滚动位置,本节先介绍一下ScrollController,然后以ListView为例,展示一下ScrollController的具体用法。最后,再介绍一下路由切换时如何来保存滚动位置。

一、ScrollController

ScrollController构造函数如下:

ScrollController({
  double initialScrollOffset = 0.0, //初始滚动位置
  this.keepScrollOffset = true,//是否保存滚动位置
  ...
})

我们介绍一下ScrollController常用的属性和方法:

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

ScrollController还有一些属性和方法,我们将在后面原理部分解释。


1.1 滚动监听

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

controller.addListener(()=>print(controller.offset))

1.2 实例

我们创建一个ListView,当滚动位置发生变化时,我们先打印出当前滚动位置,然后判断当前位置是否超过1000像素,如果超过则在屏幕右下角显示一个“返回顶部”的按钮,该按钮点击后可以使ListView恢复到初始位置;如果没有超过1000像素,则隐藏“返回顶部”按钮。代码如下:

标签:位置,滚动,ScrollController,监听,offset,组件,Flutter
From: https://www.cnblogs.com/linuxAndMcu/p/18458643

相关文章

  • Flutter可滚动组件(8):CustomScrollView 和 Slivers
    CustomScrollView前面介绍的ListView、GridView、PageView都是一个完整的可滚动组件,所谓完整是指它们都包括Scrollable、Viewport和Sliver。假如我们想要在一个页面中,同时包含多个可滚动组件,且使它们的滑动效果能统一起来,比如:我们想将已有的两个沿垂直方向滚动的ListView......
  • Flutter可滚动组件(7):TabBarView
    TabBarView是Material组件库中提供了Tab布局组件,通常和TabBar配合使用。一、TabBarViewTabBarView封装了PageView,它的构造方法很简单TabBarView({Key?key,requiredthis.children,//tab页this.controller,//TabControllerthis.physics,this.dra......
  • Flutter可滚动组件(6):可滚动组件子项缓存
    本节将介绍可滚动组件中缓存指定子项的通用方案。首先回想一下,在介绍ListView时,有一个addAutomaticKeepAlives属性我们并没有介绍,如果addAutomaticKeepAlives为true,则ListView会为每一个列表项添加一个AutomaticKeepAlive父组件。虽然PageView的默认构造函数和PageVi......
  • Flutter功能性组件(1):对话框
    Material库提供了三种基本对话框组件AlertDialog通常用于提示型对话框SimpleDialog通常用于列表型对话框Dialog通常用于自定义布局元素的对话框弹出对话框时,调用showDialog函数,将对话框控件传入,由于对话框本身是路由,所以关闭对话框时,需使用Navigator.of(context).pop......
  • Flutter可滚动组件(9):嵌套可滚动组件 NestedScrollView
    一、NestedScrollView上一节中,我们知道CustomScrollView只能组合Sliver,如果有孩子也是一个可滚动组件(通过SliverToBoxAdapter嵌入)且它们的滑动方向一致时便不能正常工作。为了解决这个问题,Flutter中提供了一个NestedScrollView组件,它的功能是组合(协调)两个可滚动组件,下面我......
  • Flutter功能性组件(2):弹出框
    一、showModalBottomSheet(模态底部弹出框)showModalBottomSheet用于显示一个模态底部弹出框。属性解析:Future<T?>showModalBottomSheet<T>({requiredBuildContextcontext,//表示底部弹出框所处的上下文,通常来自当前widget。requiredWidgetBuilderbuilder,//用......
  • Flutter基础组件(7):进度条
    在Flutter应用开发中,无论是处理网络请求,执行耗时任务,或是等待用户响应,我们总是需要在界面上显示进度条或者等待指示器。在这篇博客中,我们将介绍Flutter中两种常用的进度指示器:LinearProgressIndicator和CircularProgressIndicator。我们将比较它们的异同点,以及如何使用和自......
  • Flutter基础组件(6):单选按钮、复选框、单选开关
    在移动应用开发中,单选和复选是常见的用户交互模式,用于选择一个或多个选项。Flutter提供了一些内置的组件和机制,方便我们实现单选和复选功能。本文将介绍Flutter中的单选按钮(RadioButton)和复选框(Checkbox)的使用方法和示例。一、单选按钮(RadioButton)单选按钮是一种用户界面组件......
  • Flutter布局(2):弹性布局(Flex、Expanded)
    一、什么是弹性布局(Flex)什么是弹性布局(Flex)?弹性布局(Flex)是一种基于弹性盒子模型的布局方式,类似于Web开发中的Flexbox。在Flutter中,Flex组件是用于实现弹性布局的关键组件之一。Flex布局是一种简洁且强大的方式,可用于构建水平或垂直方向的弹性布局。Flex组件可以沿着水平......
  • Flutter布局(1):线性布局(Row、Column)
    所谓线性布局,即指沿水平或垂直方向排列子组件。Flutter中通过Row和Column来实现线性布局。主轴和纵轴对于线性布局,有主轴和纵轴之分,如果布局是沿水平方向,那么主轴就是指水平方向,而纵轴即垂直方向;如果布局沿垂直方向,那么主轴就是指垂直方向,而纵轴就是水平方向。一、Row组件1.1......