《Flutter入门疑难杂症》ScrollView滚动到指定widget位置，scrollControll.animateTo无效或者jumpTo回滚的问题

最新推荐文章于 2024-05-07 18:18:34 发布
最新推荐文章于 2024-05-07 18:18:34 发布
阅读量2.9k 收藏
点赞数
分类专栏： 《Flutter入门基础》
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WZAHD/article/details/108757760
版权

目的：控制Scrollview滚动到指定位置。

主要流程，大部分链接都有了。
我这遇到的是scrollView计算好滚动位置之后，
调用animateTo无效，不起作用。
调用jumpTo显示先跳转到位置，然后马上回滚了。

解决方案：ScrollView需要设置一个高度。

直接贴代码：

给Scrollview设置高度
Container(
                    height: MediaQuery.of(context).size.height - MediaQueryData.fromWindow(window).padding.top -
                      56.0,
                    child: SingleChildScrollView(
                      controller: _controller,
                      child: Column(
                        children: <Widget>
最低0.47元/天 解锁文章
Jda_wz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
marquee_widget:Flutter小部件，可滚动文本小部件和其他小部件
05-21
marquee_widget Flutter小部件，用于滚动小部件文本和具有支持的RTL的其他小部件。 提供许多自定义设置，包括自定义滚动方向和速度，每轮暂停后指定并指定自定义持续时间和曲线以进行加速和减速。 用法 这是一个...
Flutter滚动监听及控制 ScrollController
Android_小菜菜的博客
06-09 8171
ScrollController常用的属性和方法： offset： 可滚动组件当前的滚动位置。 jumpTo(double offset)、animateTo(double offset,…)： 这两个方法用于跳转到指定的位置，它们不同之处在于，后者在跳转时会执行一个动画，而前者不会。 ScrollController间接继承自Listenable，可以根据ScrollController来监听滚动事件 ScrollPosition是用来保存可滚动组件的滚动位置的。一个ScrollController对象可
Flutter ListView controller.animateTo 无效
bawomingtian123的专栏
07-15 1777
Flutter ListView controller.animateTo 无效
07_Flutter使用NestedScrollView+TabBarView滚动位置共享问题修复
最新发布
gzx的博客
05-07 1431
可以看到，上图中三个列表的滑动位置共享了，滑动其中一个列表，会影响到另外两个，这显然不符合要求，先来看下布局，再说明产生这个问题的原因:布局整体使用NestedScrollView，顶部banner和TabBar通过headerSliverBuilder创建，body为TabBarView，TabBarView中有三个列表，通过TabController与TabBar实现联动，同时每一个列表通过继承StatefulWidget构建并混入AutomaticKeepAliveClientMixin，重写want
flutter中滚动的监听
wgefcelgu的专栏
08-18 1316
controller` 通常被称为"控制器"。它是一个对象，用于管理用户界面中的交互和数据。不同类型的控件有不同的控制器，例如文本输入框的控制器通常被称为"文本编辑控制器"（ `TextEditingController` ），滚动视图的控制器通常被称为"滚动控制器"（ `ScrollController` ），动画的控制器通常被称为"动画控制器"（ `AnimationController` ）等等。控制器在Flutter中被广泛使用，它们提供了一种方便的方式来管理用户界面的交互和状态。
【Flutter】Flutter 滚动到指定位置
Code Metaverse
08-01 2627
在 Flutter 开发中，我们经常会遇到需要滚动到列表的指定位置的需求，例如，用户可能希望点击一个按钮后，页面能够自动滚动到某个特定的位置。这种需求在实际开发中非常常见，但是对于初学者来说，可能会感到有些困惑。本文将详细介绍如何在 Flutter 中实现滚动到指定位置的功能。
【自学Flutter】23 滚动监听和 NotificationListener的使用
2401_84047990的博客
04-01 939
这里附上上述的技术体系图相关的几十套腾讯、头条、阿里、美团等公司2021年的面试题，把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分。当程序员容易，当一个优秀的程序员是需要不断学习的，从初级程序员到高级程序员，从初级架构师到资深架构师，或者走向管理，从技术经理到技术总监，每个阶段都需要掌握不同的能力。早早确定自己的职业方向，才能在工作和能力提升中甩开同龄人。
flutter_pull_to_refresh_new.zip
01-11
在Flutter开发中，实现下拉刷新和滚动到底部加载更多的功能是常见的需求，尤其是在构建列表或者网格视图时。`flutter_pull_to_refresh`库提供了一种简单易用的方式来实现这一功能。下面将详细介绍如何利用这个库来...
flutter传递值到任意widget(当需要widget嵌套使用需要传递值的时候)
08-25
在Flutter开发中，传递值给任意Widget是常见的需求，特别是在构建复杂的Widget树时。本教程将详细介绍如何在Flutter中有效地传递值，特别是当需要在Widget嵌套层级间传递时。 首先，我们来看一种基本的传递值的方法...
Flutter 开发过程中常用的 Widget 与功能实例.zip
01-25
以上只是Flutter开发中冰山一角，实际案例中还会涉及更多高级特性，如手势识别、动画库`flutter.animate`、服务端渲染`flutter_web`等。通过深入学习和实践这些Widget与功能，开发者可以更高效地构建跨平台的Flutter...
Flutter之ListView实现自动滑动到底部
adojayfan的博客
09-14 6235
文章目录使用场景思路ScrollPostion实现布局滑动到底部问题解决方案 使用场景 在常见社交App中，发送消息或者接收到他人消息后，消息列表都会自动滑动到底部，不需要我们手动滑动，这样的用户体验好。 思路 ListView使用ScrollController来控制滑动，其中有jumpTo、animateTo2个方法滑动到指定的位置。 /// packages/flutter/lib/src/widgets/scroll_controller.dart void jumpTo(double value
Flutter滚动组件之SingleChildScrollView
m0_46369686的博客
03-17 7617
SingleChildScrollView SingleChildScrollView类似于Android中的ScrollView，它只能接收一个子组件。定义如下： const SingleChildScrollView({ Key key, this.scrollDirection = Axis.vertical, // 是否按照阅读方向相反的方向滑动，如：scrollD...
Flutter - ScrollController 滚动监听及控制
a136447572的专栏
12-14 2045
父级组件可以通过NotificationListener组件来监听自己关注的通知，这种通信方式类似于Web开发中浏览器的事件冒泡，可滚动组件在滚动时会发送ScrollNotification类型的通知，ScrollBar正是通过监听滚动通知来实现的。NotificationListener在收到滚动事件时，通知中会携带当前滚动位置和ViewPort的一些信息，而ScrollController只能获取当前滚动位置。列表滑动大于1500 之后 显示返回顶部按钮。数据不够是 可点击按钮 "点击1"添加数据。
ListView流畅度翻倍！Flutter卡顿分析和优化方案
A_pyf的博客
03-18 3031
最近因为在做Flutter中相关的性能优化，在收集很多性能数据之后发现ListView组件在一些场景下（例如加载更多）容易引起页面卡顿，看到了闲鱼的Flutter 高性能、多功能的全场景滚动容器。但奈何该组件没有开源，因此准备从文章给出的思路尝试研究和开发一个高性能的ListView。这个系列预计会分为4-5篇文章，前两篇主要对现有问题研究和分析，后三篇实际的进行开发。 原理篇： 1、Widget、Element、Render树究竟是如何形成的？ 2、ListView的构建过程与性能问题分析 实战篇： 1、
flutter解决首页滑到底之后滑不上去
z15267429952的博客
12-14 60
需停止listview的滚动，在listview中加入physics: NeverScrollableScrollPhysics(),因为listview 和SingleChildScrollView都有scroll。我用的是GridView，也是一样的！
Flutter利用ScrollController获取、控制滚动组件的滚动位置
江上清风山间明月的博客
09-15 4166
利用ScrollController来控制滚动组件的滚动位置可以使用jumpTo(double offset)或者animateTo(double offset,...)方法。3、将构建的ScrollController和可滚动组件关联，即指定可滚动组件的controller。3、将构建的ScrollController和可滚动组件关联，即指定可滚动组件的controller。我们如何利用ScrollController来获取滚动组件的滚动位置。2、初始化时绑定滚动事件监听。2、初始化时绑定滚动事件监听。
Flutter AnimationController回调原理
goodhighting的博客
04-17 813
每个动画帧会回调一次。创建时，ticker的初始状态是禁用的。调用[start]启动。A [Ticker]可以通过将[muted]设置为true来进行沉默。在沉默状态下，时间仍然在流逝，[start]和[stop]仍然可以被调用，但是不会回调到Ticker中。按照约定，[start]和[stop]方法由[ticker]的使用者使用，[muted]属性由[TickerProvider] 控制。**总结: **每次frame绘制之前会回调到ticker，由SchedulerBinding进行驱动。
Flutter页面滑动回调处理解决方法
江上清风山间明月的博客
10-24 1323
TabBarView 是 Flutter 中的一个用于显示选项卡视图的小部件。它通常与 TabBar 一起使用，用于实现选项卡式导航，允许用户在不同的选项卡之间切换内容。基本用法： TabBarView 允许你在不同的选项卡之间切换内容。它接受一个 controller 属性，用于控制选项卡的切换。通常，你会将 TabController 与 TabBar 共享，以便它们可以保持同步。// 在 TabBar 和 TabBarView 中使用相同的 controllerTabBar(tabs: [
Flutter学习之滚动监听
隔壁小王的博客
11-27 9537
ScrollController 构造方法 ScrollController({ double initialScrollOffset = 0.0, //初始化滑动距离 this.keepScrollOffset = true,//是否保存滑动距离 this.debugLabel, }) : assert(initialScrollOffset != null),...
Flutter NestedScrollView TabView ListView 滚动到指定的位置
05-25
要让 `ListView` 滚动到指定的位置，可以使用 `ScrollController`，将其传递给 `ListView` 的 `controller` 参数。然后，调用 `animateTo` 方法，传递要滚动到的位置。以下是一个简单的示例代码： ```dart class MyPage extends StatefulWidget { @override _MyPageState createState() => _MyPageState(); } class _MyPageState extends State<MyPage> { final List<String> items = List.generate(100, (index) => "Item $index"); final ScrollController _scrollController = ScrollController(); void _scrollToIndex(int index) { _scrollController.animateTo( index * 50.0, // 50.0 为每个 item 的高度 duration: Duration(milliseconds: 500), curve: Curves.easeInOut, ); } @override Widget build(BuildContext context) { return Scaffold( body: NestedScrollView( headerSliverBuilder: (context, _) { return [ SliverAppBar( title: Text("My Page"), pinned: true, expandedHeight: 200.0, flexibleSpace: FlexibleSpaceBar( background: Image.network( "https://picsum.photos/200/300", fit: BoxFit.cover, ), ), bottom: TabBar( tabs: [ Tab(text: "Tab 1"), Tab(text: "Tab 2"), Tab(text: "Tab 3"), ], ), ), ]; }, body: TabBarView( children: [ ListView.builder( controller: _scrollController, itemCount: items.length, itemBuilder: (context, index) { return ListTile( title: Text(items[index]), ); }, ), Container(color: Colors.green), Container(color: Colors.blue), ], ), ), floatingActionButton: FloatingActionButton( onPressed: () => _scrollToIndex(20), // 滚动到第 20 个 item child: Icon(Icons.arrow_downward), ), ); } } ``` 在这个示例中，我们创建了一个 `MyPage` widget，使用了 `NestedScrollView` 和 `TabBarView`，其中包含了一个 `ListView`。我们创建了一个 `_scrollController`，并将其传递给了 `ListView` 的 `controller` 参数。然后，我们定义了一个 `_scrollToIndex` 方法，用于将 `ListView` 滚动到指定位置，这里以第 20 个 item 为例。最后，我们在页面中添加了一个悬浮按钮，点击它会调用 `_scrollToIndex` 方法，将 `ListView` 滚动到指定位置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值