Flutter跑马灯文本插件marquee_text的使用

截图

使用

在你的pubspec.yaml文件中添加marquee_text作为依赖项。
```
dependencies:
  marquee_text: ^2.5.0+1
```

现在可以在你的Flutter项目中使用它了：

import 'package:flutter/material.dart';
import 'package:marquee_text/marquee_text.dart';
import 'package:marquee_text/vertical_marquee_text.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> _textList = [
    'Short text.',
    'Long text Long text Long text Long text Long text'
  ];

  var firstTextIndex = 0;
  var secondTextIndex = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('MarqueeTextDemo'),
        centerTitle: true,
      ),
      body: Column(
        children: [
          Row(
            children: [
              /// 第一个文本
              /// 固定宽度的Container
              Container(
                color: Colors.green,
                width: 160,
                child: MarqueeText(
                  text: TextSpan(
                    text: _textList[firstTextIndex],
                  ),
                  speed: 90,
                  textDirection: TextDirection.rtl,
                  marqueeDirection: MarqueeDirection.ltr,
                ),
              ),
              const SizedBox(width: 12),
              /// 第二个文本
              /// 包含在Expanded中
              Expanded(
                child: Container(
                  color: Colors.pink,
                  child: MarqueeText(
                    text: TextSpan(
                      text: _textList[secondTextIndex],
                    ),
                    style: const TextStyle(
                      fontSize: 24,
                      color: Colors.white,
                    ),
                    marqueeDirection: MarqueeDirection.ltr,
                  ),
                ),
              ),
            ],
          ),
          Row(
            children: [
              Expanded(
                child: MaterialButton(
                  color: Colors.green,
                  child: const Text(
                    'ChangeFirstText',
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                  onPressed: () {
                    setState(() {
                      firstTextIndex = 1 - firstTextIndex;
                    });
                  },
                ),
              ),
              const SizedBox(width: 12),
              Expanded(
                child: MaterialButton(
                  color: Colors.pink,
                  child: const Text(
                    'ChangeSecondText',
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                  onPressed: () {
                    setState(() {
                      secondTextIndex = 1 - secondTextIndex;
                    });
                  },
                ),
              ),
            ],
          ),
          Container(
            color: Colors.green,
            width: 160,
            height: 100,
            child: const VerticalMarqueeText(
              marqueeDirection: MarqueeDirection.btt,
              textAlign: TextAlign.center,
              text: TextSpan(
                children: [
                  TextSpan(
                    text: '''Hello,Flutter!

Hello,Flutter! Hello,Flutter! Hello,Flutter! Hello,Flutter! Hello,Flutter! Hello,Flutter! Hello,Flutter! ‘’’, ), TextSpan( text: ‘’‘Hello,Flutter! Hello,Flutter! Hello,Flutter! Hello,Flutter! Hello,Flutter! Hello,Flutter! Hello,Flutter! Hello,Flutter!’’’, style: TextStyle( color: Colors.red, ), ), ], ), speed: 30, ), ), ], ), ); } }

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

ionicwang 1楼•2 天前

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

当然，以下是一个关于如何在Flutter中使用marquee_text插件来实现跑马灯文本的示例代码。这个插件允许你在文本超出其容器宽度时，自动滚动显示文本。

首先，确保你已经在pubspec.yaml文件中添加了marquee_text依赖：

dependencies:
  flutter:
    sdk: flutter
  marquee_text: ^x.y.z  # 请替换为最新版本号

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

接下来，你可以在你的Flutter应用中使用这个插件。以下是一个完整的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Marquee Text Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Marquee Text Example'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: MarqueeText(
            text: '这是一个非常长的文本，用于演示Flutter中的MarqueeText插件效果。',
            style: TextStyle(fontSize: 20, color: Colors.black),
            blankSpace: 20.0,
            speed: 50.0,
            pauseAfterRound: Duration(seconds: 1),
            startPadding: 10.0,
            alignment: Alignment.centerLeft,
            crossAxisAlignment: CrossAxisAlignment.center,
            fadeout: MarqueeFadeout.clip,
            repeating: true,
            curve: Curves.easeInOutQuad,
          ),
        ),
      ),
    );
  }
}

在这个示例中：

MarqueeText组件用于显示跑马灯文本。
text属性设置要显示的文本。
style属性用于设置文本的样式。
blankSpace属性设置文本在滚动前后的空白间距。
speed属性设置文本滚动的速度。
pauseAfterRound属性设置文本在一轮滚动结束后的暂停时间。
startPadding属性设置文本开始滚动前的初始填充。
alignment属性设置文本的对齐方式。
crossAxisAlignment属性设置文本在交叉轴上的对齐方式。
fadeout属性设置文本在滚动到边缘时的淡出效果。
repeating属性设置文本是否重复滚动。
curve属性设置文本滚动的动画曲线。

你可以根据实际需求调整这些属性，以达到最佳的显示效果。