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

效果如下

相关推荐
coooliang5 小时前
Flutter 中的单例模式
javascript·flutter·单例模式
coooliang5 小时前
Flutter项目中设置安卓启动页
android·flutter
JIngles1235 小时前
flutter将utf-8编码的字节序列转换为中英文字符串
java·javascript·flutter
B.-7 小时前
在 Flutter 中实现文件读写
开发语言·学习·flutter·android studio·xcode
freflying111917 小时前
使用jenkins构建Android+Flutter项目依赖自动升级带来兼容性问题及Jenkins构建速度慢问题解决
android·flutter·jenkins
机器瓦力19 小时前
Flutter应用开发:对象存储管理图片
flutter
江上清风山间明月1 天前
Flutter最简单的路由管理方式Navigator
android·flutter·ios·路由·页面管理·navigator
weixin_411191841 天前
FlutterAssetsGenerator插件的使用
flutter
神秘_博士2 天前
自制AirTag,支持安卓/鸿蒙/PC/Home Assistant,无需拥有iPhone
arm开发·python·物联网·flutter·docker·gitee
陈皮话梅糖@2 天前
Flutter 网络请求与数据处理:从基础到单例封装
flutter·网络请求