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;}Widget 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,),),),
三、小结
flutter开发实战-实现marquee根据文本长度显示文本跑马灯效果。通过TextPainter计算文本内容的宽度与ContainerWidth进行对比确定是否需要显示marquee。
学习记录,每天不停进步。