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

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,
  // 轴对齐方式start
  crossAxisAlignment: CrossAxisAlignment.start,
  // 空白间距
  blankSpace: 20.0,
  // 速度
  velocity: 100.0,
  // 暂停时长
  pauseAfterRound: Duration(seconds: 1),
  // startPadding
  startPadding: 10.0,
  // 加速时长
  accelerationDuration: Duration(seconds: 1),
  // 加速Curve
  accelerationCurve: Curves.linear,
  // 减速时长
  decelerationDuration: Duration(milliseconds: 500),
  // 减速Curve
  decelerationCurve: 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;
  }

  @override
  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。

学习记录，每天不停进步。