当前位置：首页 > news >正文

flutter开发实战-实现marquee根据文本长度显示文本跑马灯效果

news 2025/8/7 6:12:07

flutter开发实战-实现marquee文本跑马灯效果

最近开发过程中需要marquee文本跑马灯效果，这里使用到了flutter的插件marquee

效果图如下
在这里插入图片描述

在这里插入图片描述

一、marquee

1.1 引入marquee

在pubspec.yaml中引入marquee

  # 跑马灯效果marquee: ^2.2.3

1.2 marquee使用

marquee使用也是非常方便的。比如直接指定文本text

Marquee(text: 'flutter开发实战-实现marquee文本跑马灯效果',
)

或者设置更多属性值

Marquee(// 文本text: '实现marquee文本跑马灯效果，这里是一传长文本',// 文本样式style: TextStyle(fontWeight: FontWeight.bold),// 滚动轴：水平或者竖直scrollAxis: Axis.horizontal,// 轴对齐方式startcrossAxisAlignment: CrossAxisAlignment.start,// 空白间距blankSpace: 20.0,// 速度velocity: 100.0,// 暂停时长pauseAfterRound: Duration(seconds: 1),// startPaddingstartPadding: 10.0,// 加速时长accelerationDuration: Duration(seconds: 1),// 加速CurveaccelerationCurve: Curves.linear,// 减速时长decelerationDuration: Duration(milliseconds: 500),// 减速CurvedecelerationCurve: Curves.easeOut,
)

二、根据文本宽度是否需要跑马灯效果

根据Text文本的大小判断是否需要进行显示跑马灯效果，获取文本的大小，需要TextPainter来获取Size
TextPainter查看：https://blog.csdn.net/gloryFlow/article/details/132198113

2.1 根据获取的文本宽度确定是否显示跑马灯效果

判断计算的文本宽度是否超出指定的ContainerWidth，来确定是否显示Marquee

代码如下

import 'package:flutter/material.dart';
import 'package:marquee/marquee.dart';typedef MarqueeBuilder = Marquee Function(BuildContext context, String text, TextStyle textStyle);
typedef TextBuilder = Text Function(BuildContext context, String text, TextStyle textStyle);class MarqueeText extends StatelessWidget {final String text;final TextStyle textStyle;final double containerWidth;final TextBuilder textBuilder;final MarqueeBuilder marqueeBuilder;const MarqueeText({Key? key,required this.marqueeBuilder,required this.textBuilder,required this.text,required this.textStyle,required this.containerWidth}): super(key: key);Size calculateTextSize(String text, TextStyle style) {final TextPainter textPainter = TextPainter(text: TextSpan(text: text, style: style),maxLines: 1,textDirection: TextDirection.ltr)..layout(minWidth: 0, maxWidth: double.infinity);return textPainter.size;}@overrideWidget build(BuildContext context) {final textWidth = this.calculateTextSize(this.text, this.textStyle).width;return textWidth < this.containerWidth? this.textBuilder(context, text, textStyle): this.marqueeBuilder(context, text, textStyle);}
}

2.2 使用该自定义的Widget

下面我这里使用这个跑马灯的Widget
代码如下

Container(width: size.width,height: size.height,alignment: Alignment.center,color: Colors.greenAccent,// child: LoadingWidget(bgColor: Colors.blueGrey,),child: MarqueeText(containerWidth: 300,text: "如果你不相信努力和时光，那么时光第一个就会辜负你。不是因为有希望才去努力，而是努力了，才能看到希望。",textStyle: TextStyle(fontSize: 25,fontWeight: FontWeight.w400,fontStyle: FontStyle.normal,color: Colors.redAccent,decoration: TextDecoration.none,),marqueeBuilder: (context, text, textStyle) => Marquee(text: text,style: textStyle,scrollAxis: Axis.horizontal,crossAxisAlignment: CrossAxisAlignment.start,blankSpace: 20.0,velocity: 100.0,pauseAfterRound: Duration(milliseconds: 500),showFadingOnlyWhenScrolling: true,fadingEdgeStartFraction: 0.1,fadingEdgeEndFraction: 0.1,startPadding: 10.0,accelerationDuration: Duration(milliseconds: 100),accelerationCurve: Curves.linear,decelerationDuration: Duration(milliseconds: 100),decelerationCurve: Curves.easeOut,textDirection: TextDirection.ltr,),textBuilder: (context, text, textStyle) => Text(text,style: textStyle,),),),