Flutter 自定义marquee垂直滚动

最新推荐文章于 2024-08-10 08:39:11 发布

郭文武

最新推荐文章于 2024-08-10 08:39:11 发布

阅读量1.6k

点赞数

分类专栏： flutter 文章标签： flutter marquee flutter 公告滚动

本文链接：https://blog.csdn.net/isusjjyy/article/details/102800178

版权

这篇博客介绍了如何在Flutter中创建一个自定义的垂直Marquee插件，用于实现公告列表的向上滚动效果。文章提供了自定义类的详细说明及使用方法。

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

自定义垂直marquee插件

用来向上垂直滚动列表（一般滚动公告）

自定义类：

 import 'dart:async';
 import 'package:flutter/material.dart';

 class Marquee extends StatefulWidget {
   final List<String> textList;
   final List<TextSpan> textSpanList;
   final double fontSize;
   final Color textColor;
   final TextAlign textAlign;
   final Duration scrollDuration;
   final Duration stopDuration;
   final bool tapToNext;
   final MarqueeController controller;
   const Marquee({
     Key key,
     this.textList = const [],
     this.textSpanList = const [],
     this.textAlign = TextAlign.left,
     this.fontSize = 14.0,
     this.textColor = Colors.black,
     this.scrollDuration = const Duration(seconds: 1),
     this.stopDuration = const Duration(seconds: 3),
     this.tapToNext = false,
     this.controller,
   }) : super(key: key);

   @override
   _MarqueeState createState() => _MarqueeState();
 }

 class _MarqueeState extends State<Marquee> with SingleTickerProviderStateMixin {
   double percent = 0.0;
   int current = 0;

   List<String> get textList => widget.textList;
   List<TextSpan> get textSpanList => widget.textSpanList;

   Timer stopTimer;

   AnimationController animationConroller;

   MarqueeController get controller => widget.controller;

   @override
   void initState() {
     super.initState();
     animationConroller = AnimationController(vsync: this