Flutter- 跑马灯

跑马灯是一种常见的UI交互效果，通常用于展示需要滚动显示的信息，如广告、公告等。在Flutter中，你可以通过使用Marquee Widget轻松实现跑马灯效果。

如何使用

首先，需要在pubspec.yaml文件中添加marquee依赖：

dependencies:
  marquee: ^1.0.1

然后，在Flutter中使用Marquee Widget即可创建一个跑马灯。

Marquee(
  text: 'Flutter 跑马灯',
  style: TextStyle(fontSize: 24.0),
)

该代码片段会创建一个默认滚动速度的纵向跑马灯，文字内容为'Flutter 跑马灯'，字体大小为24.0。

配置选项

Marquee Widget提供了多个配置选项，用于自定义跑马灯效果。

text属性

跑马灯中显示的文本。可以为String类型或TextSpan类型。

Marquee(
  text: 'Flutter 跑马灯',
)

Marquee(
  text: TextSpan(
    text: 'Flutter',
    style: TextStyle(color: Colors.blue),
    children: [
      TextSpan(text: ' 跑马灯', style: TextStyle(color: Colors.red)),
    ],
  ),
)

style属性

文本的样式。可以为TextStyle类型。

Marquee(
  text: 'Flutter 跑马灯',
  style: TextStyle(fontSize: 24.0),
)

scrollAxis属性

滚动方向。可以为Axis枚举类型，分别为Axis.horizontal和Axis.vertical，默认值为Axis.horizontal。

Marquee(
  text: 'Flutter 跑马灯',
  scrollAxis: Axis.vertical,
)

scrollDuration属性

滚动一次的动画时长。可以为Duration类型，默认值为Duration(seconds: 10)。

Marquee(
  text: 'Flutter 跑马灯',
  scrollDuration: Duration(seconds: 5),
)

stopDuration属性

每次滚动停留的时长。可以为Duration类型，默认值为Duration(seconds: 3)。

Marquee(
  text: 'Flutter 跑马灯',
  stopDuration: Duration(seconds: 1),
)

blankSpace属性

首尾留白的空间大小。可以为double类型，默认值为50.0。

Marquee(
  text: 'Flutter 跑马灯',
  blankSpace: 100.0,
)

velocity属性

滚动速度。可以为double类型，默认值为50.0。

Marquee(
  text: 'Flutter 跑马灯',
  velocity: 100.0,
)

总结

跑马灯常用于展示需要滚动的信息，如广告、公告等。在Flutter中，你可以通过使用Marquee Widget轻松实现跑马灯效果。该Widget提供了多个配置选项，可以用于自定义跑马灯效果。