Práctica de desarrollo de aleteo: realice el efecto de marquesina de texto de visualización de marquesina según la longitud del texto

Práctica de desarrollo de aleteo: realice el efecto de marquesina de texto de marquesina

En el proceso de desarrollo reciente, se necesita el efecto de marquesina de texto, aquí se utiliza el complemento de marquesina de flutter.

Las representaciones son las siguientes.

uno, marquesina

1.1 Presentación de marquesina

Introducir marquesina en pubspec.yaml

  # 跑马灯效果
  marquee: ^2.2.3

1.2 uso de marquesina

La marquesina también es muy cómoda de usar. Por ejemplo, especifique directamente el texto

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

o establecer más valores de atributos

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,
)

2. Si se requiere un efecto de marquesina según el ancho del texto

De acuerdo con el tamaño del texto, juzgue si es necesario mostrar el efecto de marquesina y, para obtener el tamaño del texto, necesita TextPainter para obtener la
vista Size TextPainter: https://blog.csdn.net/gloryFlow/ artículo/detalles/132198113

2.1 Determinar si se muestra el efecto de marquesina de acuerdo con el ancho del texto obtenido

Determine si el ancho del texto calculado excede el ContainerWidth especificado para determinar si se muestra Marquee

El código se muestra a continuación.

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 Usar el widget personalizado

A continuación utilizo el
código del widget de esta marquesina de la siguiente manera

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,
              ),
            ),
          ),

Tres.Resumen

Práctica de desarrollo de aleteo: realice el efecto de marquesina de texto de visualización de marquesina según la longitud del texto. Calcule el ancho del contenido del texto a través de TextPainter y compárelo con ContainerWidth para determinar si es necesario mostrar el marco.
Registros de aprendizaje, sigue mejorando cada día.