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

相同的部分

自定义一个类继承StatefulWidget

所有公告信息存放在list里

第一种 scrollController+AnimatedContainer

逻辑如下

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

效果如下

接下来会滚动到下一个公告

第二种 直接变化widget+AnimatedSwitcher

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

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

然后在widget控件内,

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

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

效果如下

相关推荐
苦逼的搬砖工6 小时前
基于 easy_rxdart 的轻量响应式与状态管理架构实践
android·flutter
SoaringHeart7 小时前
Flutter组件封装:标签拖拽排序 NDragSortWrap
前端·flutter
天天开发10 小时前
Flutter每日库: local_auth本地设备验证插件
flutter
天天开发10 小时前
Flutter每日库: logger自定义日志格式并输出到文件
flutter
美摄科技11 小时前
为什么选择Flutter美颜SDK?
flutter
程序员老刘1 天前
跨平台开发地图:客户端技术选型指南 | 2025年11月 |(Valdi 加入战场)
flutter·react native·客户端
西西学代码1 天前
Flutter---Listview横向滚动列表(2)
linux·运维·flutter
未来猫咪花1 天前
🔥 神奇的 Dart Zone 机制
flutter
AskHarries1 天前
RevenueCat 接入 Apple App Store 订阅全流程详解(2025 最新)
flutter·ios·app
白茶三许1 天前
关于Flutter版本过低导致鸿蒙虚拟机启动失败的问题解决
flutter·开源·harmonyos·openharmony