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

效果如下

相关推荐
小墙程序员12 小时前
Flutter 教程(十二)异步编程
flutter
王喆14 小时前
跨平台全屏效果实现方案:HarmonyOS、Android与iOS实践总结
flutter·harmonyos
Tee xm16 小时前
清晰易懂的 Flutter 卸载和清理教程
linux·windows·flutter·macos
leluckys19 小时前
flutter 专题 七十三Flutter打包未签名的ipa
flutter
张风捷特烈2 天前
Flutter 伪3D绘制#03 | 轴测投影原理分析
android·flutter·canvas
马拉萨的春天2 天前
flutter 项目结构目录以及pubspec.ymal等文件描述
flutter
bst@微胖子2 天前
Flutter项目之登录注册功能实现
开发语言·javascript·flutter
小墙程序员3 天前
Flutter 教程(十一)多语言支持
flutter
无知的前端3 天前
Flutter 一文精通Isolate,使用场景以及示例
android·flutter·性能优化
yidahis3 天前
Flutter 运行新建项目也报错?
flutter·trae