Flutter開発実践 - テキストの長さに応じたマーキー表示テキストマーキー効果を実現する

Flutter 開発の実践 - マーキーテキストマーキー効果を実現する

最近の開発プロセスでは、マーキーテキストのマーキー効果が必要になり、ここではフラッターのプラグインマーキーを使用します。

レンダリングは次のとおりです
ここに画像の説明を挿入

ここに画像の説明を挿入

1 つ、マーキー

1.1 マーキーの導入

pubspec.yaml にマーキーを導入する

  # 跑马灯效果
  marquee: ^2.2.3

1.2 マーキーの使用

マーキーもとても使いやすいです。たとえば、テキストテキストを直接指定します

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

2. テキストの幅に応じてマーキー効果が必要かどうか

Text テキストのサイズに応じて、マーキー効果を表示する必要があるかどうかを判断し、テキストのサイズを取得するには、Size TextPainterを取得する TextPainter が必要です。 TextPainter View: https://blog.csdn.net/gloryFlow/記事/詳細/132198113

2.1 取得した文字幅に応じてマーキー効果を表示するかどうかを決定する

計算されたテキスト幅が指定された ContainerWidth を超えているかどうかを判断して、マーキーを表示するかどうかを決定します。

コードは以下のように表示されます

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 カスタムウィジェットの使用

以下では、このマーキーのウィジェットコードを次のように使用します

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

3. まとめ

Flutter開発実践 - テキストの長さに応じたマーキー表示テキストマーキー効果を実現します。TextPainter を使用してテキストコンテンツの幅を計算し、それを ContainerWidth と比較して、マーキーを表示する必要があるかどうかを判断します。
学習記録、日々改善を続けてください。