Flutter利用ScrollController获取、控制滚动组件的滚动位置

简介: Flutter利用ScrollController获取、控制滚动组件的滚动位置

Flutter 中的可滚动组件主要由三个角色组成:Scrollable、Viewport 和 Sliver。

我们如何利用ScrollController来获取滚动组件的滚动位置

1、先构建一个ScrollController

ScrollController _controller = ScrollController();

2、初始化时绑定滚动事件监听

//监听滚动事件,打印滚动位置
_controller.addListener(() {
  print("_controller.offset= ${_controller.offset}"); 

3、将构建的ScrollController和可滚动组件关联,即指定可滚动组件的controller

body: Scrollbar(
  child: ListView.builder(
      itemCount: 100,
      itemExtent: 50.0, //指定列表项高度,指定后性能消耗小
      controller: _controller,
      itemBuilder: (context, index) {
        return ListTile(title: Text("$index"),);
      }
  ),
)

运行后,滚动Listview时打印结果如下图:

利用ScrollController来控制滚动组件的滚动位置可以使用jumpTo(double offset)或者animateTo(double offset,...)方法

jumpTo 直接跳转到位置

animateTo 跳转带着动画效果。

使用步骤如下

1、先构建一个ScrollController

2、初始化时绑定滚动事件监听

3、将构建的ScrollController和可滚动组件关联,即指定可滚动组件的controller

控制滚动位置,无动画直接跳转到初始位置:

_controller.animateTo(.0);

有动画跳转到初始位置:

_controller.animateTo( .0, duration: Duration(milliseconds: 200), curve: Curves.ease, );


相关文章
|
2月前
|
传感器 缓存 监控
Stream 组件在 Flutter 中的应用场景有哪些?
Stream 组件在 Flutter 中的应用场景有哪些?
173 58
|
2月前
|
UED 开发者
Flutter|常用数据通信组件
Flutter|常用数据通信组件
102 49
|
13天前
|
UED 开发者 容器
Flutter&鸿蒙next 的 Sliver 实现自定义滚动效果
Flutter 提供了强大的滚动组件,如 ListView 和 GridView,但当需要更复杂的滚动效果时,Sliver 组件是一个强大的工具。本文介绍了如何使用 Sliver 实现自定义滚动效果,包括 SliverAppBar、SliverList 等常用组件的使用方法,以及通过 CustomScrollView 组合多个 Sliver 组件实现复杂布局的示例。通过具体代码示例,展示了如何实现带有可伸缩 AppBar 和可滚动列表的页面。
74 1
|
15天前
Flutter 自定义组件继承与调用的高级使用方式
本文深入探讨了 Flutter 中自定义组件的高级使用方式,包括创建基本自定义组件、继承现有组件、使用 Mixins 和组合模式等。通过这些方法,您可以构建灵活、可重用且易于维护的 UI 组件,从而提升开发效率和代码质量。
111 1
|
15天前
|
开发工具 UED
Flutter&鸿蒙next中封装一个输入框组件
本文介绍了如何创建一个简单的Flutter播客应用。首先,通过`flutter create`命令创建项目;接着,在`lib`目录下封装一个自定义输入框组件`CustomInput`;然后,在主应用文件`main.dart`中使用该输入框组件,实现简单的UI布局和功能;最后,通过`flutter run`启动应用。本文还提供了后续扩展建议,如状态管理、网络请求和UI优化。
92 1
|
18天前
|
Dart UED
Flutter用户交互组件
Flutter用户交互组件
18 2
|
2月前
|
开发工具
Flutter-AnimatedWidget组件源码解析
Flutter-AnimatedWidget组件源码解析
172 60
|
1月前
|
存储 开发框架 开发者
flutter:代码存储&基本组件 (五)
本文档介绍了Flutter中的一些基本组件和代码示例,包括代码存储、基本组件如AppBar的简单使用、可滑动切换的标签栏、TextField的多种用法(如简单使用、登录页面、文本控制器的监听与使用、修饰等),以及如何实现点击空白区域隐藏键盘等功能。通过这些示例,开发者可以快速掌握在Flutter应用中实现常见UI元素的方法。
|
13天前
|
开发工具
Flutter&鸿蒙next中封装一个列表组件
Flutter&鸿蒙next中封装一个列表组件
27 0
|
2月前
|
开发者
Flutter|常用数据通信组件
Flutter|常用数据通信组件