Flutter 跑马灯 最适合自己修改

最新推荐文章于 2024-07-29 17:55:21 发布
最新推荐文章于 2024-07-29 17:55:21 发布
阅读量2.8k 收藏
点赞数 4
分类专栏： flutter 文章标签： flutter 跑马灯 Flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39099317/article/details/87858294
版权

完美搭配任何场景 主要有 垂直 和 水平 两种方向的

上图先

这里文字有点出来是因为我用的层叠布局 其它就没事了 不影响 这里水平跑马灯并不好 正常是要两段文本进行循环交替 这也很容易实现 只要再复制一个横向跑马灯 一前一后 不就循环了吗？  而我主要是要垂直的 由于时间关系不做操作 贴代码了

 

import 'package:flutter/material.dart';
import 'package:zwt_life_flutter_app/common/style/GlobalStyle.dart';

//公告栏动画 垂直淡入淡出
class MyNoticeVecAnimation extends StatefulWidget {
  final Duration duration;
  final List<String> messages;

  const MyNoticeVecAnimation({
    Key key,
    this.duration = const Duration(milliseconds: 3000),
    this.messages,
  }) : super(key: key);

  @override
  _MyNoticeVecAnimationState createState() {
    // TODO: implement createState
    return _MyNoticeVecAnimationState();
  }
}

class _MyNoticeVecAnimationState extends State<MyNoticeVecAnimation>
    with TickerProviderStateMixin {
  AnimationController _controller;

  int _nextMassage = 0;

  //透明度
  Animation<double> _opacityAni1, _opacityAni2;

  //位移
  Animation<Offset> _positionAni1, _positionAni2;

  @override
  Widget build(BuildContext context) {
    _startVerticalAni();
    //正向开启动画
    // TODO: implement build
    return SlideTransition(
      position: _positionAni2,
      child: FadeTransition(
        opacity: _opacityAni2,
        child: SlideTransition(
          position: _positionAni1,
          child: FadeTransition(
            opacity: _opacityAni1,
            child: Text(
              widget.messages[_nextMassage],
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: GlobalConstant.middleText,
            ),
          ),
        ),
      ),
    );
  }


  //纵向滚动
  void _startVerticalAni() {
    // TODO: implement initState
    _controller = AnimationController(duration: widget.duration, vsync: this);

    _opacityAni1 = Tween<double>(begin: 0.0, end: 1.0).animate(
      CurvedAnimation(
          parent: _controller, curve: Interval(0.0, 0.1, curve: Curves.linear)),
    );

    _opacityAni2 = Tween<double>(begin: 1.0, end: 0.0).animate(
      CurvedAnimation(
          parent: _controller, curve: Interval(0.9, 1.0, curve: Curves.linear)),
    );

    _positionAni1 = Tween<Offset>(
      begin: const Offset(0.0, 1.0),
      end: const Offset(0.0, 0.0),
    ).animate(
      CurvedAnimation(
          parent: _controller, curve: Interval(0.0, 0.1, curve: Curves.linear)),
    );

    _positionAni2 = Tween<Offset>(
      begin: const Offset(0.0, 0.0),
      end: const Offset(0.0, -1.0),
    ).animate(
      CurvedAnimation(
          parent: _controller, curve: Interval(0.9, 1.0, curve: Curves.linear)),
    );

    _controller
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          setState(() {
            _nextMassage++;
            if (_nextMassage >= widget.messages.length) {
              _nextMassage = 0;
            }
          });
          _controller.reset();
          _controller.forward();
        }
        if (status == AnimationStatus.dismissed) {
          _controller.forward();
        }
      });
    _controller.forward();
  }

  //释放
  @override
  void dispose() {
    _controller.dispose();
    // TODO: implement dispose
    super.dispose();
  }
}

  

import 'package:flutter/material.dart';
import 'package:zwt_life_flutter_app/common/style/GlobalStyle.dart';

//公告栏动画 水平淡入淡出
class MyNoticeHorAnimation extends StatefulWidget {
  final Duration duration;
  final List<String> messages;

  const MyNoticeHorAnimation({
    Key key,
    this.duration = const Duration(milliseconds: 3000),
    this.messages,
  }) : super(key: key);

  @override
  _MyNoticeHorAnimationState createState() {
    // TODO: implement createState
    return _MyNoticeHorAnimationState();
  }
}

class _MyNoticeHorAnimationState extends State<MyNoticeHorAnimation>
    with TickerProviderStateMixin {
  AnimationController _controller;

  int _nextMassage = 0;

  //透明度
  Animation<double> _opacityAni1, _opacityAni2;

  //位移
  Animation<Offset> _positionAni1, _positionAni2;

  @override
  Widget build(BuildContext context) {
    _startHorizontalAni();
    //正向开启动画
    // TODO: implement build
    return SlideTransition(
      position: _positionAni2,
      child: FadeTransition(
        opacity: _opacityAni2,
        child: SlideTransition(
          position: _positionAni1,
          child: FadeTransition(
            opacity: _opacityAni1,
            child: Text(
              widget.messages[_nextMassage],
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              style: GlobalConstant.middleText,
            ),
          ),
        ),
      ),
    );
  }

  //横向滚动
  void _startHorizontalAni() {
    // TODO: implement initState
    _controller = AnimationController(duration: widget.duration, vsync: this);

    _opacityAni1 = Tween<double>(begin: 1.0, end: 1.0).animate(
      CurvedAnimation(
          parent: _controller, curve: Interval(0.0, 0.0, curve: Curves.linear)),
    );

    _opacityAni2 = Tween<double>(begin: 1.0, end: 1.0).animate(
      CurvedAnimation(
          parent: _controller, curve: Interval(0.0, 0.0, curve: Curves.linear)),
    );

    _positionAni1 = Tween<Offset>(
      begin: const Offset(1.0, 0.0),
      end: const Offset(0.0, 0.0),
    ).animate(
      CurvedAnimation(
          parent: _controller, curve: Interval(0.0, 0.5, curve: Curves.linear)),
    );

    _positionAni2 = Tween<Offset>(
      begin: const Offset(0.0, 0.0),
      end: const Offset(-1.0, 0.0),
    ).animate(
      CurvedAnimation(
          parent: _controller, curve: Interval(0.5, 1.0, curve: Curves.linear)),
    );

    _controller
      ..addStatusListener((status) {
        if (status == AnimationStatus.completed) {
          setState(() {
            _nextMassage++;
            if (_nextMassage >= widget.messages.length) {
              _nextMassage = 0;
            }
          });
          _controller.reset();
          _controller.forward();
        }
        if (status == AnimationStatus.dismissed) {
          _controller.forward();
        }
      });
    _controller.forward();
  }

  //释放
  @override
  void dispose() {
    _controller.dispose();
    // TODO: implement dispose
    super.dispose();
  }
}

 

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:zwt_life_flutter_app/common/style/GlobalStyle.dart';
import 'package:zwt_life_flutter_app/widget/GSYWidget/MySearchInputWidget.dart';
import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';
import 'package:zwt_life_flutter_app/widget/GSYWidget/animation/MyNoticeHorAnimation.dart';
import 'package:zwt_life_flutter_app/widget/GSYWidget/animation/MyNoticeVecAnimation.dart';

class HomePage extends StatefulWidget {
  static final String sName = "Home";

  @override
  _HomePageState createState() {
    // TODO: implement createState
    return _HomePageState();
  }
}

class _HomePageState extends State<HomePage> with TickerProviderStateMixin {
  var hotSearchTag = [
    "网曝杨紫邓伦热恋 | 元宵节诗词 | 身份证异地能补办吗",
    "两限房是什么意思 | 公务员可以考研吗 | 一元等于多少日元",
    "喻恩泰喊话王景春 | 云南结婚吹唢呐视频 | 汉服下裙穿法"
  ];



  @override
  void initState() {
    // TODO: implement initState
    super.initState();

  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {

    FlutterStatusbarcolor.setStatusBarWhiteForeground(true);
    return Scaffold(
      appBar: AppBar(backgroundColor: Colors.black54, actions: <Widget>[
        Stack(alignment: Alignment.centerLeft, //指定未定位或部分定位widget的对齐方式
            children: <Widget>[
              Container(
                decoration: new BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(4.0)),
                    color: Colors.white,
                    border: new Border.all(
                        color: Theme.of(context).primaryColor, width: 0.3),
                    boxShadow: [
                      BoxShadow(
                          color: Theme.of(context).primaryColorDark,
                          blurRadius: 4.0)
                    ]),
                padding: new EdgeInsets.only(right: ScreenUtil().setWidth(600)),
                margin: EdgeInsets.only(top: 8.0, bottom: 8.0, right: 10.0),
              ),
              Positioned(
                left: 5.0,
                child: Icon(Icons.search, size: 18.0, color: Colors.black38),
              ),
              Positioned(
                left: 23.0,
                right: 1.0,
                child: MyNoticeHorAnimation(duration: const Duration(milliseconds: 6000),messages: hotSearchTag)
              )
            ]),
        Container(
          margin: EdgeInsets.only(top: 5.0, right: 10.0),
          child: GestureDetector(
            child: Row(
              children: <Widget>[
                Column(
                  children: <Widget>[
                    Icon(
                      Icons.camera_alt,
                      color: Colors.white,
                    ),
                    Text(
                      "发布",
                      style: TextStyle(color: Colors.white, fontSize: 12.0),
                    )
                  ],
                ),
              ],
            ),
          ),
        ),
      ]),
    );
  }
}

flutter更新频繁 我这里不上传项目了  在HomePage界面 我就传入时间和数组就可以用了 很方便

ZWT韬
关注
专栏目录
flutter 跑马灯+渐变透明度背景
CSDN博客
08-13 1077
之前也是记录了很多小组件的实现，这次把所有代码都给放到这里吧 这是效果： 数据（后台数据，不过我这是没的，不要在意这些小细节，忽略吧） Http().post(url, pathParams: params, data: params, success: (json) { studyModel = FindStudyModel.fromJson(json); }, errorCallback: (erro
flutter ListView 跑马灯
CSDN博客
08-12 540
首次填写，后期可能会调整,复制自自己代码，里面会有很多亢余代码，主要是给自己看的，敬请谅解吧 两个样式的，当然，如果改成一行更简单，多行也是可以的 class FindArticle extends StatefulWidget { final List articleList = ['21323123','21323123','21323123','21323123','21323123',]; FindArticle(BuildContext context, this.articleL
Flutter 跑马灯
weixin_33725272的博客
02-12 861
本文介绍2种跑马灯效果的实现：连贯式，非连贯式。效果如下图 连贯式 实现思路：写一个无限长度的列表（ListView），通过一个定时任务（Timer）每隔一定时间滑动一定距离（ScrollController）。这里面比较tricky的是滑动距离的设置，你不能直接设置一个和时间成正比的值。因为页面可能存在息屏或者跳转到其它页面的不可见状态，此时是不希望有滑动的，就算你给他设置了滑动，系统并不会去...
使用Flutter实现一个走马灯布局的示例代码
08-25
主要介绍了使用 Flutter 实现一个走马灯布局的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Flutter中实现字体跑马灯
最新发布
程序员吗？
07-29 378
在业务需求开发过程中，经常有需要用到跑马灯效果来展示一些提醒文案，达到醒目的效果，在Flutter中要实现跑马灯的效果，需要借助Timer进行实现，可根据示例，结合自己的项目进行自定义扩展改造，达到项目所需效果。
flutter跑马灯实现
wsxqaz的专栏
03-18 2002
import 'dart:async'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:uuid/uuid.dart'; typedef SimpleMarqueeChange = Function(List<Widget> item...
Flutter-跑马灯效果实现
clmd_ld 的技术博客
03-20 2562
使用三方组件在首页做个跑马灯效果，隔一段时间首页会闪一下，估计是三方组件有内存泄露。趁有空自己写个简单跑马灯效果。
flutter跑马灯
weixin_34090643的博客
12-06 712
flutter_marquee flutter 插件 flutter 跑马灯 可以指定跑马灯的方向 可以传入数组，可以是自定义的widget 可以控制跑马灯的时间间隔 控制点击事件等等 效果图 git github.com/LiuC520/flu… 引入: dependencies: flutter: sdk: flutter flutter_marquee: git: ...
flutter开发实战-实现marquee根据文本长度显示文本跑马灯效果
一名开发者
08-09 3778
flutter开发实战-实现marquee根据文本长度显示文本跑马灯效果。通过TextPainter计算文本内容的宽度与ContainerWidth进行对比确定是否需要显示marquee。
Flutter实现Android跑马灯及滚动广告
u013191719的博客
04-18 938
简介 本文介绍怎么在Flutter里使用ListView实现Android的跑马灯，然后再扩展一下，实现上下滚动。 Github地址 该小控件已经成功上传到pub.dev，安装方式： dependencies: flutterswitcher: ^0.0.1 效果图 先上效果图： 垂直模式 水平模式 上代码 主要有两种滚动模式，垂直模式和水平模式，所以我们定义两个构造方法。 参数分别有...
Flutter跑马灯Marquee
大灰狼的小绵羊哥哥的博客
06-11 1941
android原生得自带跑马灯，可真是幸福啊！Flutter就没那么友好了，必须自己去写，写写也好（安慰自己），了解下怎么实现的；原理其实很简单，代码量也很少。只不过是让ListView不停的animateTo就行了；本跑马灯不但可以水平方向滚动，也可以垂直方向滚动，好了，看下效果图 老规矩，先看下我写好的控件是怎么使用的！ 第一步：添加以下代码到你的pubspec.yaml文件 dependencies: marquee_flutter: ^0.1.2 第二步：导包，添加以下代码到你要使用...
Flutter走马灯
鲸落
01-04 1255
一、预览 二、代码 1. 封装方法 参考： Flutter走马灯 Flutter生命周期 import 'dart:async'; import 'package:flutter/material.dart'; class NotablePage extends StatefulWidget { Widget child; // 轮播的内容 Duration duration; // 轮播时间 double stepOffset; // 偏移量 double padding
android 广告 跑马灯,Flutter实现Android跑马灯及滚动广告
weixin_39979617的博客
05-26 443
简介本文介绍怎么在Flutter里使用ListView实现Android的跑马灯，然后再扩展一下，实现上下滚动。该小控件已经成功上传到pub.dev，安装方式：dependencies:flutterswitcher: ^0.0.1效果图先上效果图：垂直模式垂直滚动水平模式水平滚动上代码主要有两种滚动模式，垂直模式和水平模式，所以我们定义两个构造方法。参数分别有滚动速度(单位是pixels/sec...
flutter 文字从左到右轮播滚动，跑马灯
weixin_44911775的博客
05-05 1126
【代码】flutter 文字从左到右轮播滚动，跑马灯。
flutter跑马灯消息队列效果实现
weixin_42629287的博客
07-02 874
import 'dart:async'; import 'package:flutter/material.dart'; class YYMarquee extends StatefulWidget { Duration duration; // 轮播时间 double stepOffset; // 偏移量 double paddingLeft; // 内容之间的间距 List<Widget>children = []; //内容 YYMarquee( {
flutter 图片跑马灯效果怎么实现
05-14
要实现 Flutter 中的图片跑马灯效果，可以使用 `ListView` 和 `PageView` 两种方式。 ## 使用 ListView 使用 `ListView` 组件来实现图片的跑马灯效果，只需要将 `ListView` 的 `scrollDirection` 属性设置为 `Axis.horizontal`，然后将列表项设置为横向排列即可。 示例代码： ```dart ListView.builder( scrollDirection: Axis.horizontal, itemCount: images.length, itemBuilder: (BuildContext context, int index) { return Container( margin: EdgeInsets.all(8.0), child: Image.network(images[index]), ); }, ); ``` ## 使用 PageView 使用 `PageView` 组件来实现图片的跑马灯效果，通过设置 `PageView` 的 `scrollDirection` 属性为 `Axis.horizontal` 来实现横向滑动，同时可以设置 `PageView` 的 `pageSnapping` 属性为 `true` 来实现滑动后自动对齐到页面边缘。 示例代码： ```dart PageView.builder( scrollDirection: Axis.horizontal, itemCount: images.length, itemBuilder: (BuildContext context, int index) { return Container( margin: EdgeInsets.all(8.0), child: Image.network(images[index]), ); }, pageSnapping: true, ); ``` 注意：这两种方式的实现方式不同，`ListView` 会根据内容的大小自动计算滚动范围，而 `PageView` 则需要指定页面数量。另外，如果需要实现循环滚动，可以将 `PageView` 的 `controller` 属性设置为 `PageController(initialPage: images.length)`，并在页面到达边缘后重新跳转到第一张图。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值