Flutter实现Android跑马灯及滚动广告

最新推荐文章于 2024-07-29 17:55:21 发布

lei.chang

最新推荐文章于 2024-07-29 17:55:21 发布

阅读量934

点赞数

分类专栏： Flutter 文章标签： android ios flutter

本文链接：https://blog.csdn.net/u013191719/article/details/105600765

版权

这篇博客介绍了如何在Flutter中使用ListView构建Android跑马灯效果，包括垂直和水平滚动模式。通过调整滚动速度、延迟和曲线变化，实现无缝循环滚动。文中提供详细代码实现，并已上传至pub.dev。

摘要由CSDN通过智能技术生成

简介

本文介绍怎么在Flutter里使用ListView实现Android的跑马灯，然后再扩展一下，实现上下滚动。

Github地址

该小控件已经成功上传到pub.dev，安装方式：

dependencies:
   flutterswitcher: ^0.0.1

效果图

先上效果图：

垂直模式

垂直滚动

水平模式

水平滚动

上代码

主要有两种滚动模式，垂直模式和水平模式，所以我们定义两个构造方法。
参数分别有滚动速度（单位是pixels/second）、每次滚动的延迟、滚动的曲线变化和children为空的时候的占位控件。

class Switcher {
  const Switcher.vertical({
    Key key,
    @required this.children,
    this.scrollDelta = _kScrollDelta,
    this.delayedDuration = _kDelayedDuration,
    this.curve = Curves.linearToEaseOut,
    this.placeholder,
  })  : assert(scrollDelta != null && scrollDelta > 0 && scrollDelta <= _kMaxScrollDelta),
        assert(delayDuration != null),
        assert(curve != null),
        spacing = 0,
        _scrollDirection = Axis.vertical,
        super(key: key);
  
  const Switcher.horizontal({
    Key key,
    @required this.children,
    this.scrollDelta = _kScrollDelta,
    this.delayedDuration = _kDelayedDuration,
    this.curve = Curves.linear,