0
点赞
收藏
分享

微信扫一扫

Flutter实现文字的跑马灯滚动显示

如果你想实现自动滚动,显示完毕后等待1秒钟再次开始自动滚动,可以使用Marquee这个库,它专门用于实现文本的滚动效果。首先,你需要在 pubspec.yaml 文件中添加 marquee 依赖:

dependencies:
  marquee: ^1.0.3

然后运行 flutter packages get 命令以安装依赖项。

接下来,使用 Marquee 组件替换你的 Text 组件。以下是一个示例:


import 'package:marquee/marquee.dart';

// ...

Marquee(
  text: snapshot.data![index].title,
  style: const TextStyle(fontSize: 12),
  scrollAxis: Axis.horizontal,
  crossAxisAlignment: CrossAxisAlignment.start,
  blankSpace: 20.0,  // 跑马灯中每次滚动的空白距离
  velocity: 50.0,   // 滚动速度,每秒50.0个逻辑像素
  pauseAfterRound: Duration(seconds: 1),  // 每次滚动完成后的暂停时间
),

这样设置后,Marquee 将在水平方向上滚动文本,完成一轮滚动后将在暂停1秒后重新开始。

举报

相关推荐

0 条评论