Flutter无限滚动跑马灯插件flutter_infinite_marquee的使用

简介

[flutter_infinite_marquee](https://pub.dev/packages/flutter_infinite_marquee) 是一个提供自动滚动功能的跑马灯组件，适用于在屏幕上循环显示文本或组件。它支持自定义滚动方向、步长、频率等参数，并且还支持点击和滑动手势交互。

中文文档

• 中文文档

安装

要使用这个包，请在项目的 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter_infinite_marquee: last_version

使用方法

首先，在 Dart 文件中导入该包：

import 'package:flutter_infinite_marquee/flutter_infinite_marquee.dart';

然后可以按照以下方式创建一个简单的无限滚动跑马灯组件：

SizedBox(
  height: 50,
  child: InfiniteMarquee(
    itemBuilder: (BuildContext context, int index) {
      return Text('Hello, world! $index');
    },
  ),
)

参数说明

以下是 InfiniteMarquee 的一些重要参数：

• stepOffset: 滚动步长，默认为1。
• frequency: 自动滚动的频率，默认为10毫秒，与 stepOffset 结合控制滚动速度。
• itemBuilder: 构建跑马灯项的回调函数。
• separatorBuilder: 构建分隔符的回调函数（可选）。
• initialScrollOffset: 初始滚动偏移量。
• scrollDirection: 滚动方向，默认是水平方向。

示例代码

下面是一个完整的示例应用，展示了如何配置和使用 InfiniteMarquee 组件：

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Marquee',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Marquee'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> _items = [
    '三字经',
    '水到渠成',
    '如鱼',
    '潜移默化',
    '帅',
    '人生苦短',
    '我用Flutter',
    '黑云压城城欲摧',
    '悬壶问道，月光转照'
  ];

  void _showToast(String item) {
    showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(content: Text(item));
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            // 垂直滚动示例
            Container(
              margin: const EdgeInsets.all(30),
              height: 200,
              child: InfiniteMarquee(
                frequency: const Duration(milliseconds: 20),
                scrollDirection: Axis.vertical,
                itemBuilder: (BuildContext context, int index) {
                  String item = '${_items[index % _items.length]}  $index';
                  return GestureDetector(
                    onTap: () {
                      _showToast(item);
                    },
                    child: Align(
                      alignment: Alignment.centerLeft,
                      child: Container(
                        height: 34,
                        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
                        margin: const EdgeInsets.symmetric(vertical: 8),
                        decoration: BoxDecoration(
                          color: Colors.greenAccent,
                          borderRadius: BorderRadius.circular(10),
                        ),
                        child: Text(item),
                      ),
                    ),
                  );
                },
              ),
            ),
            
            // 水平滚动示例
            SizedBox(
              height: 50,
              child: InfiniteMarquee(
                stepOffset: -1,
                itemBuilder: (BuildContext context, int index) {
                  String item = '${_items[index % _items.length]}  $index';
                  return GestureDetector(
                    onTap: () {
                      _showToast(item);
                    },
                    child: Container(
                      padding: const EdgeInsets.all(10),
                      color: Colors.primaries[index % Colors.primaries.length],
                      child: Center(
                        child: Text(item, style: const TextStyle(fontSize: 20, color: Colors.white)),
                      ),
                    ),
                  );
                },
                separatorBuilder: (BuildContext context, int index) {
                  return Center(
                    child: Icon(Icons.hail_sharp, color: Colors.primaries[index % Colors.primaries.length]),
                  );
                },
              ),
            ),
            
            // 另一个水平滚动示例
            Container(
              height: 50,
              margin: const EdgeInsets.only(top: 20),
              child: InfiniteMarquee(
                itemBuilder: (BuildContext context, int index) {
                  String item = '${_items[index % _items.length]}  $index';
                  return GestureDetector(
                    onTap: () {
                      _showToast(item);
                    },
                    child: Container(
                      padding: const EdgeInsets.all(10),
                      color: Colors.primaries[index % Colors.primaries.length],
                      child: Center(
                        child: Text(item, style: const TextStyle(fontSize: 20, color: Colors.white)),
                      ),
                    ),
                  );
                },
              ),
            ),
            
            // 并排两个垂直滚动示例
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Container(
                  margin: const EdgeInsets.only(top: 20),
                  width: 40,
                  height: 400,
                  child: InfiniteMarquee(
                    scrollDirection: Axis.vertical,
                    itemBuilder: (BuildContext context, int index) {
                      String item = _items[index % _items.length];
                      return GestureDetector(
                        onTap: () {
                          _showToast(item);
                        },
                        child: Container(
                          padding: const EdgeInsets.all(10),
                          color: Colors.primaries[index % Colors.primaries.length],
                          child: Center(
                            child: Text(item, style: const TextStyle(fontSize: 20, color: Colors.white)),
                          ),
                        ),
                      );
                    },
                  ),
                ),
                Container(
                  margin: const EdgeInsets.only(top: 20),
                  width: 40,
                  height: 400,
                  child: InfiniteMarquee(
                    stepOffset: -2,
                    scrollDirection: Axis.vertical,
                    itemBuilder: (BuildContext context, int index) {
                      String item = _items[index % _items.length];
                      return GestureDetector(
                        onTap: () {
                          _showToast(item);
                        },
                        child: Container(
                          padding: const EdgeInsets.all(10),
                          color: Colors.primaries[index % Colors.primaries.length],
                          child: Center(
                            child: Text(item, style: const TextStyle(fontSize: 20, color: Colors.white)),
                          ),
                        ),
                      );
                    },
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

样例图示

如果您有任何问题或者改进建议，欢迎随时在 GitHub issues 提交。感谢您的使用！