Flutter垂直跑马灯插件marquee_vertical的使用

Flutter垂直跑马灯插件marquee_vertical的使用

功能特性

1. 支持上下方向滚动
2. 支持多行跑马灯列表

屏幕展示

使用方法

MarqueeVertical 是一个用于实现垂直跑马灯效果的Flutter插件。下面是一个完整的示例代码，展示了如何使用 MarqueeVertical 插件来创建一个垂直滚动的文本列表。

完整示例Demo

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 这个小部件是应用程序的根
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '垂直跑马灯示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final texts = [
    "Three BTS members test positive for Covid-19",
    "Third major cruise ship hit by Covid outbreak",
    "The bipartisan friendship that could overcome 'toxic' year in Washington",
    "World's most indebted property developer reports progress completing homes",
    "France may have their very own Donald Trump",
    "Opinion: Putin resurrected Soviet ghosts",
    "Nobel laureate and anti-apartheid hero has died",
    "Dad, sons and dogs die in fire likely caused by Christmas tree or electrical issues",
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("垂直跑马灯示例"),
      ),
      body: SingleChildScrollView(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // 第一个跑马灯：两行向上滚动
            Card(
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: MarqueeVertical(
                  itemCount: texts.length, // 数据项的数量
                  lineHeight: 20, // 每行的高度
                  marqueeLine: 2, // 显示的行数
                  itemBuilder: (index) => Align(
                    alignment: Alignment.centerLeft, // 文本对齐方式
                    child: Text(
                      texts[index], // 显示的文本内容
                      overflow: TextOverflow.ellipsis, // 超出部分用省略号表示
                    ),
                  ),
                  scrollDuration: const Duration(milliseconds: 300), // 滚动持续时间
                  stopDuration: const Duration(seconds: 3), // 停止滚动的时间
                ),
              ),
            ),
            // 第二个跑马灯：三行向下滚动
            Card(
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: MarqueeVertical(
                  itemCount: texts.length, // 数据项的数量
                  lineHeight: 20, // 每行的高度
                  marqueeLine: 3, // 显示的行数
                  direction: MarqueeVerticalDirection.moveDown, // 滚动方向（向下）
                  itemBuilder: (index) {
                    return Align(
                      alignment: Alignment.centerLeft, // 文本对齐方式
                      child: Text(
                        texts[index], // 显示的文本内容
                        overflow: TextOverflow.ellipsis, // 超出部分用省略号表示
                      ),
                    );
                  },
                  scrollDuration: const Duration(milliseconds: 300), // 滚动持续时间
                  stopDuration: const Duration(seconds: 3), // 停止滚动的时间
                ),
              ),
            ),
            // 第三个跑马灯：带图标的三行向下滚动
            Card(
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child: MarqueeVertical(
                  itemCount: texts.length, // 数据项的数量
                  lineHeight: 23, // 每行的高度
                  marqueeLine: 3, // 显示的行数
                  direction: MarqueeVerticalDirection.moveDown, // 滚动方向（向下）
                  itemBuilder: (index) {
                    return Row(children: [
                      const Icon(Icons.access_alarm), // 图标
                      Expanded(
                        child: Text(
                          texts[index], // 显示的文本内容
                          overflow: TextOverflow.ellipsis, // 超出部分用省略号表示
                        ),
                      )
                    ]);
                  },
                  scrollDuration: const Duration(milliseconds: 300), // 滚动持续时间
                  stopDuration: const Duration(seconds: 3), // 停止滚动的时间
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}