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

效果如下

相关推荐
yeziyfx20 分钟前
Flutter项目目录结构
flutter
程序员Ctrl喵2 小时前
Flutter 开发环境搭建:从零到第一次运行
flutter
帅次2 小时前
WebView 并发初始化竞争风险分析
android·xml·flutter·kotlin·webview·androidx·dalvik
Xiao正18 小时前
Flutter与Rust混合开发入门指南
flutter
season_zhu1 天前
聊聊我最近都干了些什么,AI 时代的手动撸码人
flutter·ios·ai编程
2501_915106321 天前
Flutter 开发工具有哪些 跨平台项目开发与上架实操指南
android·flutter·ios·小程序·uni-app·iphone·webview
吃不胖爹1 天前
flutter项目如何打包,创建签名与配置签名
javascript·flutter·架构
weixin_443478511 天前
Flutter学习之输入组件
学习·flutter·servlet
吃不胖爹1 天前
Flutter 基本架构与使用
javascript·flutter·架构
MakeZero2 天前
Flutter那些事-GridView
flutter·dart