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, );


相关文章
|
3月前
|
数据库 容器
Flutter笔记:滚动之-无限滚动与动态加载的实现
Flutter笔记:滚动之-无限滚动与动态加载的实现
78 0
|
3月前
Flutter 组件(二)文本 与 输入框组件
Flutter 组件(二)文本 与 输入框组件
66 0
|
3月前
|
容器
Flutter 组件(一)组件概述
Flutter 组件(一)组件概述
54 0
|
7月前
|
存储 数据库 索引
Flutter笔记:滚动之-无限滚动与动态加载的实现(GetX简单状态管理版)
本文介绍Flutter中如何实无线滚动(基于GetX简单状态管理而非有状态组件)
70 0
|
7月前
|
人机交互
Flutter笔记 - ListTile组件及其应用
Flutter笔记 - ListTile组件及其应用
94 0
|
3月前
|
前端开发
Flutter笔记:光影动画按钮、滚动图标卡片组等
Flutter笔记:光影动画按钮、滚动图标卡片组等
40 0
|
3月前
|
前端开发 JavaScript 定位技术
Flutter vs 前端 杂谈:SliverAppBar、手动实现Appbar、前端Html+JS怎么实现滚动变化型Appbar - 比较
Flutter vs 前端 杂谈:SliverAppBar、手动实现Appbar、前端Html+JS怎么实现滚动变化型Appbar - 比较
33 0
|
3月前
|
开发者 索引 容器
Flutter开发笔记:Flutter 布局相关组件
Flutter开发笔记:Flutter 布局相关组件
121 0
|
3月前
|
iOS开发
Flutter 组件(三)按钮类组件
Flutter 组件(三)按钮类组件
154 0
|
9月前
|
缓存 Dart 前端开发
Flutter 中使用 Widgetbook 管理你的组件 | 猫哥
Flutter 界面开发中我们有几个痛点 : - 与设计师协作复用一套设计规范(figma) - 可视化的管理你的组件代码(基础组件、业务组件) - 不同设备尺寸测试你的组件 - 实时修改你的测试组件参数
4212 1
Flutter 中使用 Widgetbook 管理你的组件 | 猫哥