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效果来变化公告内容

效果如下

相关推荐
见山是山-见水是水5 小时前
鸿蒙版 Flutter Video 视频播放组件:播放控制、全屏切换与倍速播放
flutter·音视频·harmonyos
六年码农9 小时前
2026最新开源 屏译ScreenTranslator 0.4.4 开源 全屏实时翻译教程
运维·人工智能·flutter·开源
WeiAreYoung9 小时前
Flutter+iOS 实现 Live Activity
flutter·ios
恋猫de小郭12 小时前
超好用 R8 Configuration Analyzer, 优化你的 App 大小和内存
android·前端·flutter
键盘飞行员1 天前
Flutter App 全套实战学习计划:从零搭建到 APK 部署
学习·flutter
GitLqr1 天前
Flutter 实战:图片上传前的压缩优化,解决带宽与存储的“大户”问题
flutter·全栈·dart
进哥AI研习社1 天前
AtomCode 跨端开发实战:Flutter 项目从原型到多端运行的 AI 驱动体验
人工智能·flutter
恋猫de小郭2 天前
Flutter A2UI 的正确用法,怎么把 AI 和动态 UI 结合有效生产
android·前端·flutter
年小个大2 天前
受 go-zero 启发,我给 Flutter 整了套 MVI-BLoC 脚手架
android·flutter·架构
Zender Han2 天前
Flutter 自适应(Adaptive)与响应式(Responsive)设计实践:官方推荐方案详解
android·flutter·ios