Flutter跑马灯效果插件marquee的使用

插件介绍

Marquee 是一个Flutter小部件，它能够以无限滚动的方式显示文本。该插件提供了丰富的自定义选项，包括但不限于滚动方向、持续时间、曲线动画以及每轮滚动后的暂停等。

提示： 如果您觉得这个插件很有用，请在GitHub上给项目点个星⭐️来支持开发者的工作。

使用方法

简单示例

下面是一个最基础的例子，仅需设置要滚动的文本：

Marquee(
  text: 'There once was a boy who told this story about a boy: "',
)

完整功能示例

以下代码展示了如何充分利用 Marquee 的各种自定义属性来创建更复杂的效果：

Marquee(
  text: 'Some sample text that takes some space.',
  style: TextStyle(fontWeight: FontWeight.bold),
  scrollAxis: Axis.horizontal,
  crossAxisAlignment: CrossAxisAlignment.start,
  blankSpace: 20.0,
  velocity: 100.0,
  pauseAfterRound: Duration(seconds: 1),
  startPadding: 10.0,
  accelerationDuration: Duration(seconds: 1),
  accelerationCurve: Curves.linear,
  decelerationDuration: Duration(milliseconds: 500),
  decelerationCurve: Curves.easeOut,
)

对于更多关于属性的信息，请参阅 API文档。

示例Demo

为了更好地理解 Marquee 的使用方式，这里提供了一个完整的示例应用，其中包括了简单的和复杂的两个 Marquee 实例，并且可以通过浮动按钮切换语言（从左到右或从右到左的文字排列）。

import 'package:flutter/material.dart';
import 'package:marquee/marquee.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _useRtlText = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Marquee',
      home: Scaffold(
        backgroundColor: Colors.deepOrange,
        body: ListView(
          padding: EdgeInsets.only(top: 50),
          children: [
            _buildMarquee(),
            _buildComplexMarquee(),
          ].map(_wrapWithStuff).toList(),
        ),
        floatingActionButton: FloatingActionButton.extended(
          onPressed: () => setState(() => _useRtlText = !_useRtlText),
          label: !_useRtlText
              ? const Text('Switch to Hebrew')
              : const Text('החלף לאנגלית'),
          backgroundColor: Colors.pink,
        ),
      ),
    );
  }

  Widget _buildMarquee() {
    return Marquee(
      key: Key("$_useRtlText"),
      text: !_useRtlText
          ? 'There once was a boy who told this story about a boy: "'
          : 'פעם היה ילד אשר סיפר סיפור על ילד:"',
      velocity: 50.0,
    );
  }

  Widget _buildComplexMarquee() {
    return Marquee(
      key: Key("$_useRtlText"),
      text: !_useRtlText
          ? 'Some sample text that takes some space.'
          : 'זהו משפט ראשון של הטקסט הארוך. זהו המשפט השני של הטקסט הארוך',
      style: TextStyle(fontWeight: FontWeight.bold),
      scrollAxis: Axis.horizontal,
      crossAxisAlignment: CrossAxisAlignment.start,
      blankSpace: 20,
      velocity: 100,
      pauseAfterRound: Duration(seconds: 1),
      showFadingOnlyWhenScrolling: true,
      fadingEdgeStartFraction: 0.1,
      fadingEdgeEndFraction: 0.1,
      numberOfRounds: 3,
      startPadding: 10,
      accelerationDuration: Duration(seconds: 1),
      accelerationCurve: Curves.linear,
      decelerationDuration: Duration(milliseconds: 500),
      decelerationCurve: Curves.easeOut,
      textDirection: _useRtlText ? TextDirection.rtl : TextDirection.ltr,
    );
  }

  Widget _wrapWithStuff(Widget child) {
    return Padding(
      padding: EdgeInsets.all(16),
      child: Container(height: 50, color: Colors.white, child: child),
    );
  }
}

以上就是 Marquee 插件的基本使用教程及完整示例。希望对您有所帮助！如果您有任何疑问或者需要进一步的帮助，请随时提问。