1. Toy模板网首页
  2. > Toy博客

flutter 实现定时滚动的公告栏的两种不错方式

8月前 作者：夏目艾拉 分类：Toy博客 阅读(40) 违法举报

这篇具有很好参考价值的文章主要介绍了flutter 实现定时滚动的公告栏的两种不错方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

相同的部分

自定义一个类继承StatefulWidget

所有公告信息存放在list里

第一种 scrollController+AnimatedContainer

逻辑如下

flutter 实现定时滚动的公告栏的两种不错方式,flutter

  1. 我们可以发现启动了一个timer计时器计时5秒，hasClients检查其目标对象（我们用的是listview）是否被渲染，没有被渲染会出大乱子
  2. 另外，currentPostion根据当前偏移量得出，下一个position根据当前偏移量加上一个view的高度
  3. 同时进行检查是否滚动超过了最大可以滚动的量，没有超过久继续滚动，有动画效果，超过了证明该回到一切的开始了

效果如下

flutter 实现定时滚动的公告栏的两种不错方式,flutter接下来会滚动到下一个公告

第二种 直接变化widget+AnimatedSwitcher

很多时候我们不方便或者不想为这个公告添加scrollController，就需要采用如下方式

flutter 实现定时滚动的公告栏的两种不错方式,flutter

这里我们直接变化了messages的index

然后在widget控件内，

  1. container包裹animatedSwitcher，
  2. animatedSwitcher的child为row，
  3. row的key为ValueKey<int>(_currentIndex)

这样就可以实现key变换，采用定义的transitionBuilder效果来变化公告内容

效果如下

flutter 实现定时滚动的公告栏的两种不错方式,flutter文章来源地址https://www.toymoban.com/news/detail-815392.html

到了这里，关于flutter 实现定时滚动的公告栏的两种不错方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • Vue - 超详细实现文字上下滚动功能效果，类似网站公告文字循环翻滚、中将人员名单公布上下无限滚动效果（支持鼠标移入时悬停停止滚动、接口动态数据渲染、自由DIY样式等）

    Vue - 超详细实现文字上下滚动功能效果，类似网站公告文字循环翻滚、中将人员名单公布上下无限滚动效果（支持鼠标移入时悬停停止滚动、接口动态数据渲染、自由DIY样式等）

    如果您是 Vue3 项目，请访问 这篇文章。 本文 实现了在 vue 项目中，实现文本的上下无限翻滚效果，类似公告栏和获奖名单人员等（文字内容无缝向上滚动 / 支持开启和关闭鼠标移入停止滚动和鼠标离开继续滚动） 您直接复制示例代码，稍微改改样式就能用了， 如下图所示，

    2024年02月21日
    浏览(39)

  • 【公告】我的两年创作纪念日

    一开始我是想在CSDN发一些自己做的小游戏 后来收获了很多粉丝便持续发游戏了 在CSDN我遇见了很多志同道合的朋友 学到了很多的知识 在初一时，我的电脑时间少了很多（只有周末能用，共计1小时） 又在学UE5这样很费时间的游戏引擎 便停止了发游戏 现在我在制作一个3D游戏

    2024年02月14日
    浏览(34)

  • 微信小程序，竖向滚动公告

     view class=\\\"swiper_box\\\"           swiper                vertical=\\\"true\\\"               autoplay=\\\"true\\\"                circular=\\\"true\\\"               interval=\\\"3000\\\"               duration=\\\'300\\\'               easing-function=\\\'easeInOutCubic\\\'             

    2024年02月09日
    浏览(32)

  • vue通知公告左右不间断循环滚动，鼠标放置停止滚动，移开重新滚动

    思路：1.准备两个span标签，设置一个定时器，让两个span标签一起移动，2.当第二个span标签的尾部移动到盒子的尾部，让第一个span标签头部重新回到盒子尾部位置，跟在第二个span标签后面一起移动，3.当第二个span标签的尾部移动到盒子头部，将他的位置设置为0，跟在第一个

    2024年01月19日
    浏览(32)
  • 前端Vue自定义精美上下滚动通告栏组件 常用于展示公告信息 上下滚动跑马灯 上下滚动广播

    前端Vue自定义精美上下滚动通告栏组件 常用于展示公告信息 上下滚动跑马灯 上下滚动广播

    随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随

    2024年02月09日
    浏览(38)
  • Flutter笔记：滚动之-无限滚动与动态加载的实现

    Flutter笔记：滚动之-无限滚动与动态加载的实现

    Flutter笔记 无限滚动与动态加载的实现 作者 ： 李俊才 （jcLee95）：https://blog.csdn.net/qq_28550263 邮箱 ： 291148484@163.com 本文地址 ：https://blog.csdn.net/qq_28550263/article/details/133342307 本文还有另外一个版本，基于GetX简单状态管理状态。地址为：https://jclee95.blog.csdn.net/article/details/13336

    2024年02月07日
    浏览(31)

  • C++ 实现定时器的两种方法（线程定时和时间轮算法修改版）

    定时器要求在固定的时间异步执行一个操作，比如boost库中的boost::asio::deadline_timer，以及MFC中的定时器。也可以利用c++11的thread, mutex, condition_variable 来实现一个定时器。 1、使用C++11中的thread, mutex, condition_variable来实现一个定时器。 注：此算法会每一个任务创建一个线程，不推

    2024年02月05日
    浏览(39)
  • Flutter 自定义AppBar实现滚动渐变

    Flutter 自定义AppBar实现滚动渐变

    1、使用ListView实现上下滚动。 2、使用Stack：允许将其子部件放在彼此的顶部，第一个子部件将放置在底部。所以AppBar，写在ListView下面。 3、MediaQuery.removePadding：当使用ListView的时候发现，顶部有块默认的Padding，MediaQuery.removePadding来删除默认的Padding。 4、NotificationListener：监听

    2024年01月23日
    浏览(29)
  • uniapp 微信小程序 上下滚动的公告通知（只取前3条）

    uniapp 微信小程序 上下滚动的公告通知（只取前3条）

    效果图：

    2024年02月14日
    浏览(24)

  • flutter web项目中鼠标拖动无法实现滚动效果

    在完成web的flutter项目时，发现ListView列表使用鼠标拖动无法滚动，尝试发现使用触摸板可以实现滚动，但如果用户使用没有触摸板的电脑或列表为横向滚动时就无法实现项目需求了，在解决问题的过程中尝试了以下方法： 1.尝试使用点击事件模拟滑动手势 如果web项目中无法使

    2024年02月09日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包