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

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

描述

marquee_flutter 是一个用于实现跑马灯效果的 Flutter 插件。它基于 ListView 实现，支持垂直和水平方向的滚动。由于 ListView 的特性，当进行水平滚动时需要设置高度，而垂直滚动时需要设置宽度。

安装

在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  marquee_flutter: ^0.1.4

然后运行以下命令以安装依赖：

flutter pub get

接下来，在 Dart 文件中导入该包：

import 'package:marquee_flutter/marquee_flutter.dart';

示例代码

以下是一个完整的示例代码，展示如何使用 marquee_flutter 插件来创建一个水平跑马灯效果。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MarqueeWidgetDemo(),
    );
  }
}

class MarqueeWidgetDemo extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("跑马灯示例"),
      ),
      body: Container(
        // 设置背景颜色
        color: Colors.blueGrey,
        // 设置高度（水平滚动时必须设置高度）
        height: 30,
        child: MarqueeWidget(
          // 跑马灯文字
          text: "ListView即滚动列表控件，能将子控件组成可滚动的列表。当你需要排列的子控件超出容器大小。",
          // 文字样式
          textStyle: TextStyle(fontSize: 16.0),
          // 滚动方向（水平滚动）
          scrollAxis: Axis.horizontal,
        ),
      ),
    );
  }
}

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

1 回复

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


marquee_flutter 是一个用于在 Flutter 应用中实现跑马灯效果的插件。它可以让文本或小部件在屏幕上水平滚动，非常适合用于显示长文本或广告信息。

安装

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

dependencies:
  flutter:
    sdk: flutter
  marquee_flutter: ^1.0.0

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

基本用法

以下是一个简单的示例，展示如何使用 marquee_flutter 插件来实现跑马灯效果：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Marquee Flutter Example'),
        ),
        body: Center(
          child: MarqueeWidget(
            text: 'This is a scrolling text using marquee_flutter plugin!',
            textStyle: TextStyle(fontSize: 20.0, color: Colors.black),
            scrollAxis: Axis.horizontal,
          ),
        ),
      ),
    );
  }
}

参数说明

MarqueeWidget 提供了多个参数来定制跑马灯效果：

  • text: 要滚动的文本内容。
  • textStyle: 文本的样式。
  • scrollAxis: 滚动的方向，可以是 Axis.horizontal（水平滚动）或 Axis.vertical（垂直滚动）。
  • velocity: 滚动的速度，默认值为 50.0。
  • pauseAfterRound: 每轮滚动后的暂停时间，默认值为 Duration(seconds: 1)。
  • startAfter: 开始滚动前的延迟时间，默认值为 Duration(seconds: 1)。
  • direction: 滚动的方向，可以是 Direction.oneWay（单向滚动）或 Direction.twoWay（双向滚动）。
  • blankSpace: 文本之间的空白区域宽度，默认值为 20.0。
  • onDone: 当滚动完成时的回调函数。

自定义小部件

除了文本，你还可以使用 MarqueeWidget 来滚动其他小部件。例如：

MarqueeWidget(
  child: Row(
    children: [
      Icon(Icons.star, color: Colors.yellow),
      Icon(Icons.star, color: Colors.yellow),
      Icon(Icons.star, color: Colors.yellow),
    ],
  ),
  scrollAxis: Axis.horizontal,
  velocity: 100.0,
)
回到顶部