怎么建立个人网站,房地产营销门户网站建设,深圳网站的网络公司,网站上的动态背景怎么做的flutter开发实战-实现marquee文本跑马灯效果
最近开发过程中需要marquee文本跑马灯效果#xff0c;这里使用到了flutter的插件marquee
效果图如下 一、marquee
1.1 引入marquee
在pubspec.yaml中引入marquee # 跑马灯效果marquee: ^2.2.31.2 marquee使用
marquee使用也是…flutter开发实战-实现marquee文本跑马灯效果
最近开发过程中需要marquee文本跑马灯效果这里使用到了flutter的插件marquee
效果图如下 一、marquee
1.1 引入marquee
在pubspec.yaml中引入marquee # 跑马灯效果marquee: ^2.2.31.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,),),),三、小结
flutter开发实战-实现marquee根据文本长度显示文本跑马灯效果。通过TextPainter计算文本内容的宽度与ContainerWidth进行对比确定是否需要显示marquee。 学习记录每天不停进步。
