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

效果如下

相关推荐
bu_xue1 小时前
【LiveStates 01】别再手动 watch 了:开启 Flutter “自动追踪” DX 革命
flutter
bu_xue1 小时前
【LiveStates 05】实战指南:手把手带你用 LiveStates 构建高性能生产级页面
flutter
程序员老刘2 小时前
AI写Flutter代码比我快100倍,我慌了吗?
flutter·ai编程·客户端
SY.ZHOU5 小时前
大型工程跨全平台实践总结
flutter·ios·安卓·鸿蒙
weixin_443478517 小时前
Flutter学习之导航与路由
java·学习·flutter
恋猫de小郭9 小时前
Flutter 鸿蒙 2026 路线发布,加速同步官方生态,进一步优化体验
前端·flutter·harmonyos
亚历克斯神9 小时前
Flutter 三方库 fft 的鸿蒙化适配指南 - 实现端侧高性能快速傅里叶变换、支持音频频谱分析与信号处理域的频域特征提取实战
flutter·harmonyos·鸿蒙·openharmony
鹏多多10 小时前
Flutter使用pretty_qr_code生成高颜值二维码
android·前端·flutter
不爱吃糖的程序媛1 天前
Flutter 3.35.7-ohos-0.0.3 发布:能力增强、性能优化与多项问题修复
flutter
始持1 天前
第三讲 进阶布局与样式(精细化UI)
flutter