Flutter-无限循环滚动标签

1. 序章

在现代移动应用开发中,滑动视图是常见的交互模式之一。特别是当你需要展示大量内容时,使用自动滚动的滑动视图可以显著提升用户体验。在这篇文章中,我们将讨论如何使用 Flutter 实现一个自动滚动的列表视图。

2. 效果

3. 实现思路

为了实现一个自动滚动的列表视图,我们需要考虑以下几点:

  1. ScrollController 管理:每个横向列表需要一个 ScrollController 来管理其滚动状态。
  2. 自动滚动机制:使用 Timer 定时器定期触发滚动事件。
  3. 用户交互管理:通过手势检测来判断用户何时开始或结束手动滚动,并暂停或恢复自动滚动。

4. 实现代码

以下是实现这个功能的完整代码:

import 'dart:async';
import 'package:flutter/material.dart';//https://github.com/yixiaolunhui/flutter_xy
class LoopScrollWidget extends StatefulWidget {final List<List<dynamic>> items;final double? rowHeight;final Widget Function(BuildContext context, int rowIndex, int index) itemBuilder;const LoopScrollWidget({Key? key,this.rowHeight = 50,required this.items,required this.itemBuilder,}) : super(key: key);LoopScrollWidgetState createState() => LoopScrollWidgetState();
}class LoopScrollWidgetState extends State<LoopScrollWidget> {late final List<ScrollController> _scrollControllers;late final List<bool> _isScrollingList;final double _scrollIncrement = 4.0;final Duration _scrollDuration = const Duration(milliseconds: 50);Timer? _scrollTimer;void initState() {super.initState();_scrollControllers = List.generate(widget.items.length, (index) => ScrollController());_isScrollingList = List.generate(widget.items.length, (index) => false);WidgetsBinding.instance.addPostFrameCallback((_) {_startAutoScroll();});}void dispose() {_scrollTimer?.cancel();for (var controller in _scrollControllers) {controller.dispose();}super.dispose();}Widget build(BuildContext context) {return Column(children: List.generate(widget.items.length, (rowIndex) {return GestureDetector(onPanDown: (_) => _isScrollingList[rowIndex] = true,onPanEnd: (_) => _isScrollingList[rowIndex] = false,onTapUp: (_) => _isScrollingList[rowIndex] = false,child: NotificationListener<ScrollNotification>(onNotification: (notification) {if (notification is ScrollEndNotification) {_isScrollingList[rowIndex] = false;}return false;},child: SizedBox(height: widget.rowHeight,child: ListView.builder(controller: _scrollControllers[rowIndex],physics: const BouncingScrollPhysics(),scrollDirection: Axis.horizontal,itemBuilder: (context, index) {final position = index % widget.items[rowIndex].length;return Row(children: [widget.itemBuilder(context, rowIndex, position)],);},),),),);}),);}void _startAutoScroll() {_scrollTimer?.cancel();_scrollTimer = Timer.periodic(_scrollDuration, (timer) {for (var i = 0; i < _scrollControllers.length; i++) {if (!_isScrollingList[i] && _scrollControllers[i].hasClients) {_scrollControllers[i].animateTo(_scrollControllers[i].offset + _scrollIncrement,duration: _scrollDuration,curve: Curves.linear,);}}});}
}

详细解释

  1. Stateful WidgetLoopScrollWidget 继承自 StatefulWidget,其状态管理由 LoopScrollWidgetState 类负责。
  2. 初始化:在 initState 方法中,我们初始化了每个行的 ScrollController 和一个布尔列表 _isScrollingList 来跟踪哪些行正在被手动滚动。
  3. 自动滚动:使用 Timer.periodic 来定时滚动每一行,除非该行当前正在被手动滚动。
  4. 手势检测:使用 GestureDetector 来检测用户何时开始或结束手动滚动,并通过 NotificationListener 来监听滚动结束通知。

详情:github.com/yixiaolunhui/flutter_xy

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/355310.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言 | Leetcode C语言题解之第171题Excel表列序号

题目&#xff1a; 题解&#xff1a; int titleToNumber(char* columnTitle) {int number 0;long multiple 1;for (int i strlen(columnTitle) - 1; i > 0; i--) {int k columnTitle[i] - A 1;number k * multiple;multiple * 26;}return number; }

HTML静态网页成品作业(HTML+CSS)——手机电子商城网页(4个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有4个页面。 二、作品演示 三、代…

【面试干货】抽象类与接口的区别

【面试干货】抽象类与接口的区别 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 在Java编程中&#xff0c;抽象类和接口是两个非常重要的概念&#xff0c;它们都为代码的可扩展性和复用性提供了基础。但是&#xff0c;它们之间也有一些明显…

linux精通 4.1

2.1.3 http服务器实现 目的 reactor应用——webserver webclient 每次上课前 看大纲down code 复习&#xff1a; 不行啊 编译给的代码报错啊 给的最新的不是0430那一版就不行啊 reactor.c:(.text0x254): relocation truncated to fit: R_X86_64_PC32 against symbol begin de…

基于微信共享充电桩小程序毕业设计作品成品(3)开发技术文档_充电桩小程序前端技术栈

后台管理系统文件 所在路径&#xff1a;后台源码ht目录是后台 绿色显示的是系统框架&#xff0c;不要动 位置程序名说明源码根目录login.php后台登录页面源码根目录check_u_login.php后台登录处理程序ht 后台根目录index.php后台首页left.php后台左侧菜单u_logout.php退出登…

【数据分析】用Python做事件抽取任务-快速上手方案

目录 方法一&#xff1a;使用OmniEvent库安装OmniEvent使用OmniEvent进行事件抽取OmniEvent优点缺点 方法二&#xff1a;使用大模型使用GPT网页版进行事件抽取事件类型列表 大模型优点缺点 总结 在自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;事件抽取是一项关键任…

工程施工安全检测嵌入式解决方案

工程施工安全检测嵌入式解决方案 1 范围1.1 引言1.2 系统概述1.3 文档概述 2 工程施工安全检测系统应用场景2.1 作业操作安全检查2.2 受限空间作业安全检测2.3 应急设备操作行为检测2.4 动火作业安全检测 3 工程施工安全检测系统设计方案概述3.1 AI识别系统3.2 AI关键技术介绍3…

武汉工程大学24计算机考研数据,有学硕招收调剂,而专硕不招收调剂!

武汉工程大学是一所以工为主&#xff0c;覆盖工、理、管、经、文、法、艺术、医学、教育学等九大学科门类的多科性教学研究型大学&#xff0c;是湖北省重点建设高校、湖北省国内一流学科建设高校&#xff0c;入选卓越工程师教育培养计划、中西部高校基础能力建设工程、“新工科…

【计算机网络篇】数据链路层(11)在数据链路层扩展以太网

文章目录 &#x1f354;使用网桥在数据链路层扩展以太网&#x1f95a;网桥的主要结构和基本工作原理&#x1f388;网桥的主要结构&#x1f50e;网桥转发帧的例子&#x1f50e;网桥丢弃帧的例子&#x1f50e;网桥转发广播帧的例子 &#x1f95a;透明网桥&#x1f50e;透明网桥的…

深圳学区房断崖式跌价,3年跌去10万元,更可怕的还在后面

就在房市回暖之际&#xff0c;深圳的学区房却传来让人震惊的消息&#xff0c;深圳八卦岭有小区的房价三年时间从14万元每平方跌至4万元每平方&#xff0c;这对于当下的楼市无疑是重磅炸弹&#xff0c;对人们的购房行为将产生重要影响。 深圳这个受到关注的小区为一个宿舍小区&a…

【鸿蒙】HUAWEI DevEco Studio安装

HUAWEI DevEco Studio介绍 面向HarmonyOS应用及元服务开发者提供的集成开发环境(IDE)&#xff0c; 助力高效开发。 DevEco Studio当前最新版本是&#xff1a; 3.1。 DevEco Studio计划里程碑 版本类型说明 下载 下载网址&#xff1a;DevEco Studio安装包官⽅下载 双击运行…

数据结构—排序、查找、图论和字符串算法之Java实例

一&#xff1a;引言 在编程的海洋中&#xff0c;算法是程序员的灵魂之光。它们不仅指引着代码的前进方向&#xff0c;更能解决难题&#xff0c;提升效率。虽然各式各样的算法琳琅满目&#xff0c;但其中有一些却是每位程序员必定会遇到且应当深刻掌握的。本文将带您走进这些至…

信息打点-协议应用_内网资产_CDN_WAF_负载均衡_防火墙

服务信息获取-协议应用&内网资产 常见端口默认对应的服务&#xff1a; 特殊服务端口&#xff1a; 端口扫描工具&#xff1a; 旁注查询 旁注查询&#xff0c;又称为旁站查询或同服务器网站查询&#xff0c;是一种信息安全和网络侦查技术&#xff0c;主要用于发现与目标网站…

java实现一个LRU缓存算法。

//LRU&#xff08;Least Recently Used&#xff09;缓存算法是一种常见的缓存淘汰策略&#xff0c; // 它的基本思想是保留最近被访问过的数据&#xff0c;淘汰最久未被访问的数据。下面是一个使用Java实现的简单LRU缓存算法&#xff1a; import java.util.LinkedHashMap; impo…

电脑上使用备忘录怎么查看编辑时间?能显示时间的备忘录

在快节奏的生活中&#xff0c;很多人喜欢使用备忘录来记录日常事项和重要信息。备忘录不仅能帮助我们捕捉灵感&#xff0c;还能确保重要任务不被遗漏。然而&#xff0c;有时候我们需要知道某条记录的编辑时间&#xff0c;以便于回溯和整理信息。如果备忘录不能显示编辑时间&…

SpringBoot复习

第一章 SpringBoot开发入门 1.Springboot的优点。 ① 可快速构建独立的Spring应用。 ② 直接嵌入Tomcat、Jetty和Undertow服务器&#xff08;无须部署WAR文件&#xff09; ③ 通过依赖启动器简化构建配置 ④ 自动化配置Spring和第三方库 ⑤ 提供生产就绪功能 ⑥ 极少的代码生成…

【Mybatis-plus】查询及更新为null或空字符串

前言 查询为 null 或者 空字符串时&#xff0c;可以使用 or() 关键字。 提示&#xff1a;以下是本篇文章正文内容&#xff0c;下面案例可供参考 查询 使用 LambdaQueryWrapper 查询 parentCode 为 null 或者 空字符串 的数据。 LambdaQueryWrapper<CompanyEntity> qu…

视频集市新增支持多格式流媒体拉流预览

流媒体除了常用实时流外还有大部分是以文件的形式存在&#xff0c;做融合预览必须要考虑多种兼容性能力&#xff0c;借用现有的ffmpeg生态可以迅速实现多种格式的支持&#xff0c;现在我们将按需拉流预览功能进行了拓展&#xff0c;正式支持了ffmpeg的功能&#xff0c;可快捷方…

探索FlowUs息流:个人和团队知识管理解决方案|FlowUs稳定保障你的笔记安全无忧

FlowUs息流&#xff1a;稳定运营保障你的笔记安全无忧 在知识管理工具的选择上&#xff0c;稳定性是用户最关心的问题之一。FlowUs息流以其稳定的运营记录&#xff0c;为用户提供了一个可靠的工作环境。我们深知&#xff0c;一个知识管理平台的稳定性直接影响到团队的生产力和…

后端不提供文件流接口,前台js使用a标签实现当前表格数据(数组非blob数据)下载成Excel

前言&#xff1a;开发过程中遇到的一些业务场景&#xff0c;如果第三方不让使用&#xff0c;后端不提供接口&#xff0c;就只能拿到table数据(Array)&#xff0c;实现excel文件下载。 废话不多说&#xff0c;直接上代码&#xff0c;方法后续自行封装即可&#xff1a; functio…