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

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

简介

marquee_flutter 是一个用于实现跑马灯效果的 Flutter 插件,它基于 ListView 构建,支持水平和垂直两种滚动方向。需要注意的是,由于 ListView 会自动填充可用空间,因此在水平滚动时必须设置高度,在垂直滚动时必须设置宽度。

GitHub 主页:https://github.com/baoolong/MarqueeWidget
更多小部件:https://github.com/OpenFlutter/PullToRefresh


使用方法

1. 添加依赖

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

dependencies:
  marquee_flutter: ^0.1.4

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

2. 导入包

在需要使用的 Dart 文件中导入 marquee_flutter 包:

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
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MarqueeWidgetDemo(),
    );
  }
}

class MarqueeWidgetDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("跑马灯示例"),
      ),
      body: Container(
        // 设置背景颜色
        color: Colors.blueGrey,
        // 水平滚动时必须设置高度
        height: 50,
        child: MarqueeWidget(
          // 跑马灯文字
          text: "欢迎使用跑马灯效果!欢迎使用跑马灯效果!",
          // 文字样式
          textStyle: TextStyle(fontSize: 16.0, color: Colors.white),
          // 滚动方向:水平滚动
          scrollAxis: Axis.horizontal,
          // 是否循环滚动
          showFadingOnlyWhenScrolling: false,
          // 每次滚动的步长(单位为像素)
          fadeLength: 10.0,
        ),
      ),
    );
  }
}

注意事项

  1. 水平滚动时必须设置高度
    如果未设置高度,水平滚动可能会导致布局异常。

  2. 垂直滚动时必须设置宽度
    如果未设置宽度,垂直滚动可能会导致布局异常。

  3. 可以通过调整 scrollAxis 属性来切换水平或垂直滚动方向。


许可证

此项目采用 MIT 许可证,详情如下:

MIT License

Copyright (c) 2018 baoolong

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

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

1 回复

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


marquee_flutter_nullsafety 是一个支持空安全的 Flutter 插件,用于实现跑马灯效果。它可以在文本内容超出容器宽度时,自动滚动显示文本内容。以下是如何使用 marquee_flutter_nullsafety 插件的详细步骤:

1. 添加依赖

首先,在 pubspec.yaml 文件中添加 marquee_flutter_nullsafety 插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  marquee_flutter_nullsafety: ^2.0.0

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

2. 导入包

在需要使用跑马灯效果的 Dart 文件中导入 marquee_flutter_nullsafety 包:

import 'package:marquee_flutter_nullsafety/marquee_flutter_nullsafety.dart';

3. 使用 Marquee 组件

在你的 Flutter 应用中使用 Marquee 组件来实现跑马灯效果。以下是一个简单的示例:

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Marquee Flutter Example'),
        ),
        body: Center(
          child: Marquee(
            text: 'This is a long text that will scroll horizontally if it overflows.',
            style: TextStyle(fontSize: 20.0, color: Colors.black),
            scrollAxis: Axis.horizontal,
            crossAxisAlignment: CrossAxisAlignment.start,
            blankSpace: 20.0,
            velocity: 50.0,
            pauseAfterRound: Duration(seconds: 1),
            startPadding: 10.0,
            accelerationDuration: Duration(seconds: 1),
            accelerationCurve: Curves.linear,
            decelerationDuration: Duration(milliseconds: 500),
            decelerationCurve: Curves.easeOut,
          ),
        ),
      ),
    );
  }
}
回到顶部