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

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

一个简单且易于使用的跑马灯插件

  • 支持从任何小部件到跑马灯。
  • 支持交互，并可以响应子组件事件。
  • 支持其他基本功能。

MarqueeView

参数名称 类型 描述 必填 默认值
child Widget 是 -
width double 跑马灯宽度 否 null
height double 跑马灯高度 否 null
backgroundColor Color 背景色 否 null
controller MarqueeController 控制器 否 null
direction MarqueeDirection 滚动方向 否 MarqueeDirection.rtl
padding double 内容在滚动方向上的填充 否 0
spacing double 跑马灯内子组件之间的间距 否 100
pps double 每秒像素数 否 30
autoStart bool 自动开始 否 true
autoStartDelayed Duration 自动开始延迟时间 否 100毫秒
interaction bool 交互 否 false
restartAfterInteraction bool 交互停止后重新开始 否 true
restartAfterInteractionDelayed Duration 交互停止后重新开始的延迟时间 否 1秒

基本用法

final marqueeController = MarqueeController();

// marqueeController.start();
// marqueeController.stop();
// marqueeController.reset();

MarqueeView(
  height: 44,
  // direction: MarqueeDirection.rtl,
  // padding: screenWidth,
  spacing: 200,
  pps: 30,
  autoStart: true,
  // interaction: true,
  // restartAfterInteraction: true,
  // restartAfterInteractionDelayed: const Duration(seconds: 1),
  child: const Text(
    "A long time ago, I had a dream, I want this day, no longer cover my eyes, I want this land, no longer bury my heart.",
  ),
);

更多关于Flutter跑马灯效果插件marquee_view的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter跑马灯效果插件marquee_view的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


marquee_view 是一个用于在 Flutter 应用中实现跑马灯效果的插件。它可以让你在有限的空间内展示超出屏幕宽度的文本或内容，并通过滚动的方式显示完整内容。

安装

首先，你需要在 pubspec.yaml 文件中添加 marquee_view 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  marquee_view: ^1.0.0  # 请查看最新版本

然后运行 flutter pub get 来安装依赖。

基本使用

marquee_view 提供了一个 MarqueeView 组件，你可以将它放在你的 UI 中来实现跑马灯效果。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Marquee View Example'),
        ),
        body: Center(
          child: MarqueeView(
            text: 'This is a scrolling text example using marquee_view!',
            style: TextStyle(fontSize: 20.0, color: Colors.black),
            speed: 50.0,  // 滚动速度
          ),
        ),
      ),
    );
  }
}

参数说明

  • text: 要显示的文本内容。
  • style: 文本的样式，可以设置字体大小、颜色等。
  • speed: 滚动速度，单位为像素/秒。
  • direction: 滚动方向，默认为 MarqueeDirection.ltr（从左到右），也可以设置为 MarqueeDirection.rtl（从右到左）。
  • pauseDuration: 每次滚动开始前的暂停时间。
  • scrollDuration: 每次滚动的持续时间。
  • repeat: 是否重复滚动，默认为 true。

自定义滚动内容

除了文本，你还可以滚动自定义的 Widget。使用 MarqueeView.builder 可以滚动任意的 Widget。

MarqueeView.builder(
  itemBuilder: (BuildContext context, int index) {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 10.0),
      child: Icon(Icons.star, color: Colors.yellow, size: 30.0),
    );
  },
  itemCount: 10,  // 滚动的内容数量
  speed: 50.0,
)
回到顶部