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

效果如下

相关推荐
ZFJ_张福杰4 小时前
【Flutter】Flutter 中有哪些耗时操作?从 UI 卡顿到 Isolate 性能优化
flutter·性能优化·卡顿·isolate
sakiko_5 小时前
Flutter:Dart学习笔记1:基础UI组件等
flutter
9765033356 小时前
iOS 上架 4.3a 被拒【uniapp专讲】
flutter·ios·objective-c·uniapp·swift
传奇开心果编程21 小时前
【Flutter入门练中学】第2课:布局系统
学习·flutter·ui
君赏1 天前
FlutterPatch:把 Shorebird 热更新的控制面搬回自己服务器
flutter
用户2181697049301 天前
Flutter tootip 轻量级提示
flutter
用户2181697049301 天前
Flutter 拖拽 Draggable DragTarget
flutter
yume_sibai1 天前
05-Flutter实战项目
前端·flutter
传奇开心果编程1 天前
【Flutter入门练中学】第1课:从零开始
学习·flutter·ui
用户2181697049302 天前
Flutter ClipPath
flutter