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

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

marquee_plus 是一个用于在Flutter中实现无限滚动文本效果的插件。它提供了丰富的自定义选项，包括滚动方向、持续时间、曲线以及每轮滚动后的暂停等。以下是关于如何使用 marquee_plus 插件的详细说明和完整示例代码。

依赖更新

为了确保插件兼容最新的Flutter版本（例如3.22.3），请将 fading_edge_scrollview 依赖更新到 4.1.1 版本。

基本用法

这是一个最简单的 Marquee 示例：

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

完整示例

以下是一个更复杂的示例，展示了如何充分利用 Marquee 的自定义功能。该示例包含了一个简单的跑马灯和一个带有更多配置项的复杂跑马灯，并且可以通过按钮切换语言方向（从左到右或从右到左）。

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

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

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

  [@override](/user/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"), // 根据语言方向生成唯一的Key
      text: !_useRtlText
          ? 'There once was a boy who told this story about a boy: "' // 英文文本
          : 'פעם היה ילד אשר סיפר סיפור על ילד:"', // 希伯来文文本
      velocity: 50.0, // 设置滚动速度
    );
  }

  // 构建复杂的跑马灯
  Widget _buildComplexMarquee() {
    return Marquee(
      key: Key("$_useRtlText"), // 根据语言方向生成唯一的Key
      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), // 每轮滚动后暂停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, // 设置减速曲线为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, // 子组件
      ),
    );
  }
}