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

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

重复从右向左滚动文本的动作。

使用

要使用此包，请在pubspec.yaml文件中添加flutter_marquee作为依赖项。

简单示例

这是一个基本的组件示例。

example_video

完整示例代码

以下是一个完整的示例代码，展示了如何使用flutter_marquee插件来实现跑马灯效果。

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

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

class MyApp extends StatelessWidget {
  // 此部件是你的应用的根部件。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 这是你的应用的主题。
        //
        // 尝试运行你的应用。你会看到应用有一个蓝色工具栏。然后，不退出应用，将primarySwatch修改为Colors.green，然后运行“热重载”（在控制台中按“r”键，或者在Flutter IDE中保存更改）。
        // 注意计数器没有重置回零；应用并没有重新启动。
        primarySwatch: Colors.blue,
        // 这使得视觉密度适应你运行应用的平台。对于桌面平台，控件会比移动平台更小更紧密（更密集）。
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({required this.title});

  // 这个部件是你的应用的首页。它是有状态的，意味着它有一个包含影响其外观的字段的状态对象。
  // 这个类是状态的配置。它包含了由父部件（本例中是App部件）提供的值（本例中是标题），并被状态的构建方法使用。部件子类中的字段总是标记为“final”。

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 这个方法每次调用setState时都会被重新运行，例如通过上面的_incrementCounter方法。
    //
    // Flutter框架已经优化了构建方法的重运行速度，因此你可以重建任何需要更新的部分，而不是单独改变部件实例。
    return Scaffold(
      appBar: AppBar(
        // 这里我们取自MyHomePage对象的值，该对象是由App.build方法创建的，并用于设置我们的appbar标题。
        title: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            return Marquee(str: widget.title, containerWidth: constraints.maxWidth, baseMilliseconds: 5000);
          },
        ),
      ),
      body: Center(
        // Center是一个布局部件。它接受一个子部件并将它定位在父部件的中间。
        child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            return Marquee(str: "saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaample", containerWidth: constraints.maxWidth, baseMilliseconds: 10000);
          },
        ),
      ),
    );
  }
}

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

1 回复

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


flutter_marquee 是一个用于在 Flutter 应用中实现跑马灯效果的插件。它可以让你轻松地在应用中创建水平或垂直滚动的文本或小部件。

以下是如何使用 flutter_marquee 插件的步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_marquee: ^2.0.0  # 请根据实际情况使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 flutter_marquee 包：

import 'package:flutter_marquee/flutter_marquee.dart';

3. 使用 Marquee 小部件

你可以使用 Marquee 小部件来创建跑马灯效果。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Marquee Example'),
        ),
        body: Center(
          child: Marquee(
            text: '这是一个跑马灯效果的文本，它会一直滚动直到你停止它。',
            style: TextStyle(fontSize: 20.0, color: Colors.black),
            scrollAxis: Axis.horizontal, // 水平滚动
            crossAxisAlignment: CrossAxisAlignment.center,
            blankSpace: 20.0, // 文本之间的空白
            velocity: 50.0, // 滚动速度
            pauseAfterRound: Duration(seconds: 1), // 每轮滚动后的暂停时间
            startPadding: 10.0, // 开始滚动前的空白
            accelerationDuration: Duration(seconds: 1), // 加速时间
            accelerationCurve: Curves.linear, // 加速曲线
            decelerationDuration: Duration(seconds: 1), // 减速时间
            decelerationCurve: Curves.easeOut, // 减速曲线
          ),
        ),
      ),
    );
  }
}

4. 参数说明

Marquee 小部件提供了多个参数来定制跑马灯效果：

  • text: 要滚动的文本。
  • style: 文本的样式。
  • scrollAxis: 滚动方向，可以是 Axis.horizontal（水平）或 Axis.vertical（垂直）。
  • crossAxisAlignment: 文本在滚动方向上的对齐方式。
  • blankSpace: 文本之间的空白距离。
  • velocity: 滚动速度，值越大滚动越快。
  • pauseAfterRound: 每轮滚动后的暂停时间。
  • startPadding: 开始滚动前的空白距离。
  • accelerationDuration: 加速时间。
  • accelerationCurve: 加速曲线。
  • decelerationDuration: 减速时间。
  • decelerationCurve: 减速曲线。

5. 自定义小部件

除了滚动文本，Marquee 小部件还支持滚动自定义的小部件。你可以将 child 参数替换为任何小部件：

Marquee(
  child: Row(
    children: [
      Icon(Icons.star, color: Colors.yellow),
      Text(' 这是一个自定义小部件的跑马灯效果 '),
      Icon(Icons.star, color: Colors.yellow),
    ],
  ),
  scrollAxis: Axis.horizontal,
  velocity: 50.0,
)

6. 控制滚动

你还可以通过 MarqueeController 来控制滚动的开始、暂停和停止：

final _controller = MarqueeController();

Marquee(
  controller: _controller,
  text: '这是一个受控制的跑马灯效果',
  style: TextStyle(fontSize: 20.0, color: Colors.black),
  scrollAxis: Axis.horizontal,
  velocity: 50.0,
);

// 开始滚动
_controller.start();

// 暂停滚动
_controller.pause();

// 停止滚动
_controller.stop();
回到顶部