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

效果如下

相关推荐
逍遥咸鱼2 小时前
Flutter文本框添加图片表情(粗制滥造版)
flutter
程序员老刘4 小时前
Flutter 官方Skill发布,对开发者意味着什么?
flutter·ai编程·客户端
血色橄榄枝4 小时前
20 Flutter for OpenHarmony 动画效果
flutter·开源·鸿蒙
Swift社区6 小时前
Flutter 项目如何做好性能监控与问题定位?
flutter
LawrenceLan6 小时前
36.Flutter 零基础入门(三十六):StatefulWidget 与 setState 进阶 —— 动态页面必学
开发语言·前端·flutter·dart
weixin_443478516 小时前
flutter组件学习之Stack 组件详解
学习·flutter
程序员Ctrl喵6 小时前
分层架构的协同艺术——解构 Flutter 的心脏
flutter·架构
Hello.Reader6 小时前
Flutter IM 桌面端消息发送、ACK 回执、SQLite 本地缓存与断线重连设计
flutter·缓存·sqlite
Hello.Reader6 小时前
Flutter IM 桌面端项目架构、聊天窗口布局与 WebSocket 长连接设计
websocket·flutter·架构
前端不太难6 小时前
Flutter Web / Desktop 为什么“能跑但不好用”?
前端·flutter·状态模式