Flutter: ScrollController initialScrollOffset不工作 - 腾讯云开发者社区

文章/答案/技术大牛

发布

Flutter跨平台移动端开发丨SingleChildScrollView、ListView......

ScrollController的主要作用是控制滚动位置和监听滚动事件 child：子元素 import 'package:flutter/material.dart'; /** * @des Scroll...---- ScrollController（控制器）可设置滑动 View 的滚动位置，还可监听并获取滑动 View 的滚动状态及数据 ScrollController({ double initialScrollOffset...= 0.0, this.keepScrollOffset = true, this.debugLabel, }) : assert(initialScrollOffset !...= null), _initialScrollOffset = initialScrollOffset; initialScrollOffset：初始位置 keepScrollOffset...：是否保存滚动位置 ScrollController.jumpTo(0.0)：直接滚动至指定位置 ScrollController.animateTo(0.0, duration: Duration

10.2K5 1

Flutter可滑动组件

4.2 ScrollController 在Flutter中，Widget并不是最终渲染到屏幕上的元素（真正渲染的是RenderObject），因此通常这种监听事件以及相关的信息并不能直接从Widget...，initialScrollOffset参数可以指定可滑动视图的初始位置。...ScrollController controller = ScrollController(initialScrollOffset: 300); // 标志位记录是否需要显示浮动按钮 bool...ScrollController可以通过initialScrollOffset设置初始位置，也可以监听到滚动的位置，但无法监听到开始滚动与结束滚动的事件。...该回调可以返回一个布尔值，代表是否阻止该事件继续向上冒泡，如果为true时，则冒泡终止，事件停止向上传播，如果不返回或者返回值为false 时，则冒泡继续。

8.4K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

【Flutter】ListView 列表高级功能 ( ScrollController 上拉加载更多 )

文章目录一、ScrollController 上拉加载更多二、ScrollController 使用流程三、ScrollController 判定滑动到底部四、完整代码示例五、相关资源一、ScrollController...上拉加载更多 ---- 在 FLutter 中 , 所有的列表都支持设置一个 ScrollController 类型的参数 , 设置 ScrollController , 用于控制上拉加载更多内容 ;...官网 : https://flutter.dev/ Flutter 插件下载地址 : https://pub.dev/packages Flutter 开发文档 : https://flutter.cn.../docs ( 强烈推荐 ) 官方 GitHub 地址 : https://github.com/flutter Flutter 中文社区 : https://flutter.cn/ Flutter 实用教程...: https://flutter.cn/docs/cookbook Flutter CodeLab : https://codelabs.flutter-io.cn/ Dart 中文文档 : https

2.8K2 0

《Flutter》-- 6.高级组件

参阅书籍：《Flutter跨平台开发入门与实践》-- 向治洪（著） 6. 高级组件 6.1 可滚动组件对于列表和长布局的显示溢出问题，可以使用Flutter提供的可滚动组件来处理。...ListView、GridView自带滚动模型，SliverList、SliverGrid不包含滚动模型，不会造成滚动冲突。...ScrollController组件的构造函数： ScrollController({ double initialScrollOffset = 0.0,//初始化滚动位置 this.keepScrollOffset...childrenDelegate: SliverChildListDelegate(_items), ) ) ); } } 示例效果：如果滚动视图中出现列表嵌套的场景，为了不造成滚动时的冲突...如果绘制的内容不需要依赖外部状态，返回false即可；如果绘制过程需要依赖外部状态，可以在shouldRepaint()中判断依赖的状态是否改变，如果已改变，则返回true并执行重绘操作，反之则返回false不执行重绘

12.6K2 0

Flutter开发-可滚动组件

前言当组件内容超过当前显示视口(ViewPort)时，如果没有特殊处理，Flutter则会提示Overflow错误。...为此，Flutter提供了多种可滚动组件（Scrollable Widget）用于显示列表和长布局。...当可滚动组件滚动时，将列表项包裹在RepaintBoundary中可以避免列表项重绘，但是当列表项重绘的开销非常小（如一个颜色块，或者一个较短的文本）时，不添加RepaintBoundary反而会更高效...实际上Sliver版的可滚动组件和非Sliver版的可滚动组件最大的区别就是前者不包含滚动模型（自身不能再滚动），而后者包含滚动模型，也正因如此，CustomScrollView才可以将多个Sliver...ScrollController构造函数如下： ScrollController({ double initialScrollOffset = 0.0, //初始滚动位置 this.keepScrollOffset

6K2 0

Flutter 零基础入门（四十六）：高级列表与滚动优化 —— Sliver 与长列表性能实战

你已经掌握了：多页面 App 架构与导航列表刷新与分页表单输入与校验动画、主题与视觉元素但是在实际项目中，列表数据量可能很大，如果处理不当会出现：卡顿滚动不流畅内存占用过高本篇我们将学习 Flutter..._scrollController = ScrollController(); _scrollController.addListener(() { print('当前滚动位置: ${_scrollController.position.pixels...高性能列表完美结合六、常见坑 ❌ ListView / Column 直接嵌套长列表 → 滚动冲突 ❌ SliverChildListDelegate / children 太多 → 性能下降 ❌ 不释放...已经可以显示大量数据并保持流畅滚动 ✅ 八、一句话总结 Sliver + CustomScrollView 高性能长列表 + 网格布局分页加载 + 滚动监听 App 列表性能与交互优化下一篇预告《Flutter...零基础入门（四十七）：Flutter 插件与第三方库使用 —— 扩展 App 功能实战》下一篇我们将学习： Flutter 插件的使用方式第三方库集成（shared_preferences / url_launcher

1271 0

Flutter中使用flutter_html解析html文件

dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter date_format: ^1.0.6...import 'package:flutter_html/flutter_html.dart'; import 'package:flutter_html/html_parser.dart'; import..._scrollController = new ScrollController(); @override void initState() { super.initState...// print(_scrollController.position.pixels); // 获取整个页面的高度 // print(_scrollController.position.maxScrollExtent...); if(_scrollController.position.pixels>_scrollController.position.maxScrollExtent-40){

7K1 0

Flutter中的html内容加载

_scrollController = ScrollController(); int _page = 1; //请求第几页数据，用于分页请求数据 bool _haveMore = true;..._requestData(); //监听滚动条的滚动事件 _scrollController.addListener(() { // print(_scrollController.position.pixels...if (_scrollController.position.pixels == _scrollController.position.maxScrollExtent)...需要注意的是： 1，要在你的 info.plist中添加 io.flutter.embedded_views_preview 如果不添加，则会报错误： [VERBOSE...总结：本文我们简单讲述了两个第三方框架：flutter_html和flutter_inappbrower。

18K4 3

那些初学者实践 Flutter 最常出现的错误

哔哩哔哩漫画APP实践Flutter 也有大半年时间了，我针对线上收集到的错误进行分析，挑选出了一些有一般代表性的错误，列在本文，可供实践 Flutter 的初学者们作为一点参考。...其实，类似的XXX.of(context)方法在 Flutter 代码里很常见，比如 MediaQuery.of(context)、Theme.of(context)、DefaultTextStyle.of...写 Flutter 代码时，脑海里一定要对context的树干脉络有清晰的认知，如果你还不是很理解context，可以看看《深入理解BuildContext》 - Vadaski。...典型错误五：泛型里的 dynamic 一点也不 dynamic 典型错误信息： type 'List' is not a subtype of type 'List' type...const {}); } 总结综上所述，这些典型错误，都不是什么疑难杂症，而是不理解或者不熟悉 Flutter 和 Dart 语言所导致的，关键是要学会容错处理。

3.7K2 1

flutter仿BOSS直聘（二），大前端技术实现

先把开源地址提供给大家： github地址：服务端版本：flutter仿boss直聘服务端. flutter版本：flutter仿boss直聘. 项目效果图： ?...布局语义化，不滥用布局组件，并尽量简化组件嵌套结构技术细节实现启动画面，在启动1.5秒后，跳转到app里，并且把启动画面的路由remove掉。...大家都知道，flexibleSpace里的CollapseMode.parallax属性可以在屏幕滚动时把title移动到appBar里，可实际上，布局是定制的，实现不了官方的那种效果，于是通过监听ScrollController..._scrollListener() { setState(() { if (_scrollController.offset < 56 && _isShow) { _...isShow = false; } else if (_scrollController.offset >= 56 && _isShow == false) { _isShow

2.2K2 0

Flutter 中的下拉刷新和上拉加载

在Flutter的官方SDK中给我们提供了下拉刷新的组件RefreshIndicator，但是没有提供上拉分页加载更多的组件。...不过不用担心，在Flutter的ListView组件中，有一个ScrollController属性，它就是专门用来控制ListView滑动事件，在这里我们可以根据ListView的位置来判断是否滑动到了底部来做加载更多的处理...当然，我们是可以找一些第三方的库来实现上拉加载下拉刷新的效果的，比如flutter_easyrefresh这个第三方组件，但是我并不推荐flutter_easyrefresh，因为它有一些小Bug。...代码如下： import 'dart:convert'; import 'package:dio/dio.dart'; import 'package:flutter/material.dart';..._scrollController = ScrollController(); int _page = 1; //请求第几页数据，用于分页请求数据 bool _haveMore = true;

4.8K2 0

Flutter完整开发实战详解(二、快速开发实战篇)

return new Scaffold( ///设置侧边滑出 drawer，不需要可以不设置 drawer: _drawer, ///设置悬浮按键，不需要可以不设置...Flutter 中为我们提供了 RefreshIndicator 作为内置下拉刷新控件；同时我们通过给 ListView 添加 ScrollController 做滑动监听，在最后增加一个 Item，...如下代码所示，通过 RefreshIndicator 控件可以简单完成下拉刷新工作。...= new ScrollController(); @override void initState() { ///增加滑动监听 _scrollController.addListener...比起一般的 png 图片文件，矢量图标在开发过程中：可以轻松定义颜色，并且任意调整大小不模糊。

5.8K3 0

Windows凭据不工作

如果不是敲错IP、用户名、密码，报凭据不工作，一般情况下执行这几句命令后重启远程服务就正常了第1句：REG ADD "HKLM\SOFTWARE\Policies\Microsoft\Windows NT...用户名或密码敲错了或复制粘贴的时候带了多余的字符，或者键盘兼容性问题，我曾遇到过横排数字键和右侧数字键区，按键不符合预期的情况（可能没按出来值，也可能按出来跟预期的值不一样）2、用户名、密码正确，通过vnc能进入系统，通过远程就是报凭据不工作上次我遇到个

9.3K2 0

干货 | Flutter在携程复杂业务的高性能之旅

作者简介本文为联合撰稿，作者为携程火车票Flutter团队，关注Flutter开发的效率、质量和新技术，致力于提升Flutter业务流畅度。...= 0) { tabViewModel.titleAlpha = 0; } if (_scrollController.offset > 0 && _scrollController.offset...///存放界面所有的widgets，用以缓存List widgets = new List();///因为头部布局是静态的不刷新，使用变量控制是否复用以前的widgetsvar...Isoate 优化 3.1 减少build中逻辑处理尽量减少build中处理逻辑，因为widget在页面刷新的过程中会随时通过build重建，build调用频繁，应该只处理跟UI相关的逻辑，因此将一些不涉及每次渲染都必须的操作...图片加载：Flutter的图片加载有两种方式：一是默认方式不指定cacheWidth/cacheHeight，最终图片的加载使用的是原图分辨率，这就可能导致内存使用过大出现内存泄漏的情况；二是指定cacheWidth

2.1K2 0

Flutter ScrollView上拉加载更多关于学习

2018.05.07 更新上拉加载可以不用Notification,直接用ScrollController,代码如下: _scrollController.addListener(() {...// 滑动到最底部了 _getData(); } }); 以下是原文：前面讲了下拉刷新，列表离不开的还有一个上拉加载更多,今天就来讲一下上拉加载更多在flutter...在Flutter的github issuses里面，也有人提到了这个问题，但是官网上并没有一个很好的教程指引。思路是得到滑动的偏移量，跟ListView总的高度进行比对。...跟ScrollController的offset是相等的。...loadMoreData(); setState(() {}); } else {} } } return true; } 关于学习 flutter

2.2K3 0

Flutter 入门指北之滑动部件（超详细）

那么这里提下可滑动的容器部件 SingleChildScrollView 这个部件非常简单，不贴源码了。最简单的使用方式只需要提供一个 child 即可。...如果不指定高度/宽度，ListView 需要根据每个 item 来计算 ListView 的高度，这个计算过程是需要消耗时间和资源的 ListView.builder 该方法同 custom 类似，custom...因为 GridView 和 ListView 亮着都是可滑动的部件，直接拼接肯定会有「滑动冲突」，所以 Flutter 就提供了一个粘合剂，CustomScrollView，那么 Flutter 如何实现呢...(); // 对 scrollController 进行监听 _scrollController.addListener(() { // _scrollController.position.pixels...代码地址: https://github.com/kukyxs/flutter_arts_demos_app

3.1K3 0

Flutter 中使用 Socket.io 实现即时通信

如果无法正常下载，执行 flutter pub get 。 2. 引入插件在需要用到的该插件的文件中引入插件包。...使用插件 import 'package:flutter/material.dart'; // 引入Socket.io import 'package:socket_io_client/socket_io_client.dart..._scrollController = new ScrollController(); IO.Socket socket; List messageList=[]; @override..._scrollController.jumpTo(_scrollController.position.maxScrollExtent+80); }); /..._scrollController, itemCount: this.messageList.length, itemBuilder: (

3.5K1 0

Flutter中实现下拉刷新与上拉加载更多

下拉刷新 Flutter中提供了组件 RefreshIndicator用于下拉刷新。...上拉加载更多 Flutter中主要通过使用 ListView.builder( ) 添加控制器来实现上拉加载更多。...代码实例 import 'package:flutter/material.dart'; import 'dart:convert'; import 'package:dio/dio.dart';..._scrollController = new ScrollController(); @override void initState() { super.initState...); if(_scrollController.position.pixels>_scrollController.position.maxScrollExtent-40){

4.1K1 0

用flutter_staggered_grid_view实现分页瀑布流效果【flutter20个实例之四】

如果要实现不同高度的滚动瀑布流，就要使用这个插件： flutter_staggered_grid_view 说明：配置pubspec.yaml文件，最好要使用0.3.2版本以上，此时flutter版本需要...github.com/letsar/flutter_staggered_grid_view 在使用的flutter组件中导入这个插件 import 'package:flutter_staggered_grid_view...child: StaggeredGridView.countBuilder( shrinkWrap: true, controller: _scrollController.../material.dart'; import 'package:dio/dio.dart'; import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart..._scrollController = new ScrollController(); @override Widget build(BuildContext context) {

5K3 0

Flutter完整开发实战详解(二、快速开发实战篇)

6.4K1 0

点击加载更多

Flutter跨平台移动端开发丨SingleChildScrollView、ListView......

Flutter可滑动组件

【Flutter】ListView 列表高级功能 ( ScrollController 上拉加载更多 )

《Flutter》-- 6.高级组件

Flutter开发-可滚动组件

Flutter 零基础入门（四十六）：高级列表与滚动优化 —— Sliver 与长列表性能实战

Flutter中使用flutter_html解析html文件

Flutter中的html内容加载

那些初学者实践 Flutter 最常出现的错误

flutter仿BOSS直聘（二），大前端技术实现

Flutter 中的下拉刷新和上拉加载

Flutter完整开发实战详解(二、快速开发实战篇)

Windows凭据不工作

干货 | Flutter在携程复杂业务的高性能之旅

Flutter ScrollView上拉加载更多关于学习

Flutter 入门指北之滑动部件（超详细）

Flutter 中使用 Socket.io 实现即时通信

Flutter中实现下拉刷新与上拉加载更多

用flutter_staggered_grid_view实现分页瀑布流效果【flutter20个实例之四】

Flutter完整开发实战详解(二、快速开发实战篇)

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐