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

效果如下

相关推荐
sunly_1 小时前
Flutter:导航固定背景图,滚动时导航颜色渐变
android·javascript·flutter
恋猫de小郭4 小时前
为什么跨平台框架可以适配鸿蒙,它们的技术原理是什么?
android·前端·flutter
SY.ZHOU4 小时前
详细讲解Flutter GetX的使用
flutter
sunly_4 小时前
Flutter:下拉框选择
flutter
明似水4 小时前
用 Melos 解决 Flutter Monorepo 的依赖冲突:一个真实案例
前端·javascript·flutter
张风捷特烈5 小时前
每日一题 Flutter#5,6 | 两道 Widget 选择题
android·flutter
玖夜Kty15 小时前
国内环境修改 flutter.bat 来设置 flutter 的网络环境
flutter
LinXunFeng17 小时前
Flutter - GetX Helper 助你规范应用 tag
flutter·github·visual studio code
阅文作家助手开发团队_山神1 天前
第五章:Flutter Quill渲染原理深度剖析:Delta到RichText的华丽转身
flutter
未来猫咪花1 天前
# Flutter状态管理对比:view_model vs Riverpod
flutter·ios·android studio