内容简介:本文介绍2种跑马灯效果的实现:连贯式,非连贯式。效果如下图实现思路:写一个无限长度的列表(ListView),通过一个定时任务(Timer)每隔一定时间滑动一定距离(ScrollController)。这里面比较tricky的是滑动距离的设置,你不能直接设置一个和时间成正比的值。因为页面可能存在息屏或者跳转到其它页面的不可见状态,此时是不希望有滑动的,就算你给他设置了滑动,系统并不会去滑动它。所以每次轮询都去获取当前列表滑动的距离(scrollController.offset),在它基础上加上一个距离作为
本文介绍2种跑马灯效果的实现:连贯式,非连贯式。效果如下图
连贯式
实现思路:写一个无限长度的列表(ListView),通过一个定时任务(Timer)每隔一定时间滑动一定距离(ScrollController)。这里面比较tricky的是滑动距离的设置,你不能直接设置一个和时间成正比的值。因为页面可能存在息屏或者跳转到其它页面的不可见状态,此时是不希望有滑动的,就算你给他设置了滑动,系统并不会去滑动它。所以每次轮询都去获取当前列表滑动的距离(scrollController.offset),在它基础上加上一个距离作为要滚动到的位置。
class _MarqueeContinuousState extends State<MarqueeContinuous> { ScrollController _controller; Timer _timer; double _offset = 0.0; @override void initState() { super.initState(); _controller = ScrollController(initialScrollOffset: _offset); _timer = Timer.periodic(widget.duration, (timer) { double newOffset = _controller.offset + widget.stepOffset; if (newOffset != _offset) { _offset = newOffset; _controller.animateTo(_offset, duration: widget.duration, curve: Curves.linear); } }); } @override void dispose() { _timer.cancel(); _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return ListView.builder( scrollDirection: Axis.horizontal, controller: _controller, itemBuilder: (context, index) { return widget.child; }); } } 复制代码
非连贯式
实现思路:通过不断播放平移动画来实现(FractionalTranslation)。这里需要注意的是,动画是全屏幕展示的,如果你要让它只在控件范围内显示,需要把它包裹在ClipRect中(ClipRect会把超出控件部分裁剪掉)。另外要使超出屏幕宽度的文字不被折叠,需要把控件包裹在SingleChildScrollView中。
class _MarqueeSingleState extends State<MarqueeSingle> with SingleTickerProviderStateMixin { AnimationController _controller; Animation<Offset> _animation; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 10)); _animation = Tween<Offset>(begin: Offset(1.0, 0.0), end: Offset(-1.0, 0.0)) .animate(_controller); _animation.addListener(() { setState(() {}); }); _controller.repeat(); } @override Widget build(BuildContext context) { return ClipRect(child: FractionalTranslation( translation: _animation.value, child: SingleChildScrollView( scrollDirection: Axis.horizontal, child: widget.child))); } @override void dispose() { _controller.dispose(); super.dispose(); } } 复制代码
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Learning PHP, MySQL, JavaScript, and CSS
Robin Nixon / O'Reilly Media / 2012-9-3 / USD 39.99
If you're familiar with HTML, you can quickly learn how to build interactive, data-driven websites with the powerful combination of PHP, MySQL, and JavaScript - the top technologies for creating moder......一起来看看 《Learning PHP, MySQL, JavaScript, and CSS》 这本书的介绍吧!