MarqueeDirection enum

author:郑再红 email:1096877329@qq.com date: 2022/9/26 time: 15:20 describe: 跑马灯组件 / Marquee Component

支持垂直和横向滚动的跑马灯效果组件 Marquee component with vertical and horizontal scrolling support

功能特性 / Features

📜 支持垂直滚动 / Vertical scrolling
➡️ 支持横向滚动 / Horizontal scrolling
🔄 支持循环播放 / Loop playback
🎨 支持渐变边缘 / Fade edge support
⚙️ 可自定义速度和间隔 / Customizable speed and interval
📢 支持索引变化回调 / Index change callback
⏸️ 支持暂停/恢复控制 / Pause/resume control support

基础示例 / Basic Example

// 垂直跑马灯
MarqueeView(
  marqueeItems: ['消息1', '消息2', '消息3'],
  direction: MarqueeDirection.vertical,
  buildItem: (context, data) {
    return Text(data, style: TextStyle(fontSize: 16));
  },
)

// 横向跑马灯
MarqueeView(
  marqueeItems: ['新闻1', '新闻2', '新闻3'],
  direction: MarqueeDirection.horizontal,
  speed: 1.0,
  gap: 50,
  buildItem: (context, data) {
    return Text(data);
  },
)

// 带渐变边缘
MarqueeView(
  marqueeItems: items,
  direction: MarqueeDirection.horizontal,
  enableFadeEdge: true,
  fadeEdgeWidth: 40,
  buildItem: (context, data) {
    return Container(
      padding: EdgeInsets.all(8),
      child: Text(data),
    );
  },
)

// 公告栏示例
MarqueeView(
  marqueeItems: announcements,
  direction: MarqueeDirection.vertical,
  itemExtent: 40,
  interval: Duration(seconds: 3),
  animateDuration: Duration(milliseconds: 500),
  onIndexChange: (index) {
    print('当前显示: $index');
  },
  buildItem: (context, data) {
    return Row(
      children: [
        Icon(Icons.campaign, size: 20),
        SizedBox(width: 8),
        Expanded(child: Text(data)),
      ],
    );
  },
)

// 不循环播放
MarqueeView(
  marqueeItems: ['第一条', '第二条', '最后一条'],
  loop: false,
  buildItem: (context, data) => Text(data),
)

// 使用Controller控制暂停/恢复
final controller = MarqueeViewController();

Column(
  children: [
    MarqueeView(
      controller: controller,
      marqueeItems: ['消息1', '消息2', '消息3'],
      direction: MarqueeDirection.vertical,
      buildItem: (context, data) => Text(data),
    ),
    Row(
      children: [
        ElevatedButton(
          onPressed: () => controller.pause(),
          child: Text('暂停'),
        ),
        ElevatedButton(
          onPressed: () => controller.resume(),
          child: Text('恢复'),
        ),
      ],
    ),
  ],
)

注意事项 / Notes

垂直模式下 itemExtent 为单条高度 / itemExtent is item height in vertical mode
横向模式下 itemExtent 为容器高度 / itemExtent is container height in horizontal mode
speed 越大横向滚动越快 / Larger speed means faster horizontal scrolling
数据为空时显示空白占位 / Shows blank placeholder when data is empty
使用 controller 可以外部控制暂停和恢复 / Use controller to control pause/resume from outside

跑马灯方向 / Marquee Direction

功能特性 / Features

基础示例 / Basic Example

注意事项 / Notes

Values

Properties

Methods

Operators

Constants

marquee_view library