flutter如何实现跑马灯效果

在Flutter中如何实现跑马灯效果？我想在应用顶部添加一个水平滚动的文字跑马灯，类似公告栏的效果。目前尝试了ListView和SingleChildScrollView，但无法实现无限循环滚动。请问有没有现成的插件或推荐的最佳实现方式？需要支持自定义滚动速度、暂停控制和点击事件等功能。

2 回复

Flutter中实现跑马灯效果可使用Marquee库或自定义SingleChildScrollView配合AnimationController。简单示例：

Marquee(
  text: '跑马灯文本',
  style: TextStyle(fontSize: 20),
  scrollAxis: Axis.horizontal,
  crossAxisAlignment: CrossAxisAlignment.start,
  blankSpace: 20.0,
  velocity: 50.0,
)

需在pubspec.yaml添加依赖：marquee: ^2.2.3

更多关于flutter如何实现跑马灯效果的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现跑马灯效果有多种方式，以下是几种常用的实现方法：

1. 使用Flutter Marquee包（推荐）

首先在pubspec.yaml中添加依赖：

dependencies:
  flutter_marquee: ^1.1.0

然后使用：

import 'package:flutter_marquee/flutter_marquee.dart';

Marquee(
  text: '这是一段跑马灯文字，会自动滚动显示',
  velocity: 50.0, // 滚动速度
  startPadding: 10.0, // 起始间距
  fontSize: 16.0, // 字体大小
)

2. 使用AnimationController自定义实现

import 'package:flutter/material.dart';

class CustomMarquee extends StatefulWidget {
  final String text;
  
  const CustomMarquee({Key? key, required this.text}) : super(key: key);

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

class _CustomMarqueeState extends State<CustomMarquee>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<Offset> _animation;

  @override
  void initState() {
    super.initState();
    
    _controller = AnimationController(
      duration: const Duration(seconds: 10),
      vsync: this,
    )..repeat();
    
    _animation = Tween<Offset>(
      begin: const Offset(1.0, 0.0),
      end: const Offset(-1.0, 0.0),
    ).animate(_controller);
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 30,
      child: SlideTransition(
        position: _animation,
        child: Text(widget.text),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

3. 使用ListView.builder实现

class ListViewMarquee extends StatefulWidget {
  @override
  _ListViewMarqueeState createState() => _ListViewMarqueeState();
}

class _ListViewMarqueeState extends State<ListViewMarquee> {
  final ScrollController _controller = ScrollController();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _autoScroll();
    });
  }

  void _autoScroll() {
    _controller.animateTo(
      _controller.position.maxScrollExtent,
      duration: const Duration(seconds: 10),
      curve: Curves.linear,
    ).then((_) {
      _controller.jumpTo(0);
      _autoScroll();
    });
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 30,
      child: ListView.builder(
        controller: _controller,
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) {
          return Text(
            '跑马灯文字内容 ',
            style: TextStyle(fontSize: 16),
          );
        },
      ),
    );
  }
}

使用建议

  • 简单场景：推荐使用flutter_marquee包，配置简单功能完善
  • 自定义需求：使用AnimationController可以更灵活控制动画效果
  • 性能考虑：对于长文本，ListView.builder方式可能更节省内存

选择哪种方式取决于具体需求，第一种方法最简便实用。

回到顶部