Flutter 跑馬燈 消息滾動(dòng)

效果圖

使用示例:

new YYMarquee(
  new Text("YYMarqueeYYMarqueeYYMarqueeYYMarqueeYYMarqueeYYMarqueeYYMarqueeYYMarqueeYYMarqueeYYMarquee"), 
  200.0,
  new Duration(seconds: 2),
  230.0
)

具體代碼:

import 'package:flutter/material.dart';
import 'dart:async';  //Timer

class YYMarquee extends StatefulWidget {
  Widget child;  // 輪播的內(nèi)容
  Duration duration;  // 輪播時(shí)間
  double stepOffset;  // 偏移量
  double paddingLeft;  // 內(nèi)容之間的間距

  YYMarquee(this.child, this.paddingLeft, this.duration, this.stepOffset);

  _YYMarqueeState createState() => _YYMarqueeState();
}


class _YYMarqueeState extends State<YYMarquee> {
  ScrollController _controller;  // 執(zhí)行動(dòng)畫的controller
  Timer _timer;  // 定時(shí)器timer
  double _offset = 0.0;  // 執(zhí)行動(dòng)畫的偏移量

  @override
  void initState() {
    super.initState();

    _controller = ScrollController(initialScrollOffset: _offset);
    _timer = Timer.periodic(widget.duration, (timer) {
      double newOffset = _controller.offset + widget.stepOffset;
      if (newOffset != _offset) {
        _offset = newOffset;
        _controller.animateTo(
            _offset,
            duration: widget.duration, curve: Curves.linear);  // 線性曲線動(dòng)畫 
      }
    });
  }

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

  Widget _child() {
    return new Row(
        children: _children()
    );
  }

  // 子視圖
  List<Widget> _children() {
    List<Widget> items = [];
    for (var i = 0; i<=2; i++) {
      Container item = new Container(
        margin: new EdgeInsets.only(right: i != 0 ? 0.0 : widget.paddingLeft),
        child: i != 0 ? null : widget.child,
      );
      items.add(item);
    }
    return items;
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      scrollDirection: Axis.horizontal,  // 橫向滾動(dòng)
      controller: _controller,  // 滾動(dòng)的controller
      itemBuilder: (context, index) {
        return _child();
      },
    );
  }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • ① 每個(gè)人高考的時(shí)候都會(huì)特別謹(jǐn)慎對(duì)待,為什么?因?yàn)樗P(guān)系到每個(gè)人的未來。 每個(gè)人在擇偶的時(shí)候會(huì)...
    玉兒說閱讀 2,618評(píng)論 0 8
  • 余生太長(zhǎng),夜?jié)u清風(fēng)人漸涼 高坐之上 西風(fēng)走不甘留 久夜清明 獨(dú)自空回頭 問那燈光 花落之下幾枝獨(dú)秀 怎奈安然 不及...
    安然笙歌閱讀 233評(píng)論 0 0
  • 這樣的來訪者很稀缺,正如生命成長(zhǎng)中常常提到的幾個(gè)詞一樣:獨(dú)特、珍貴、美好! 我們?cè)诤?jiǎn)短的問候了之后,來訪者明確想要...
    WengWen閱讀 328評(píng)論 0 1
  • 讓春風(fēng)吹動(dòng)你的長(zhǎng)發(fā), 絲絲拂過我的臉龐。 萌發(fā)的季節(jié)里, 永遠(yuǎn)都有淡雅的清香; 讓夏雨澆灌你的思想, 縷縷消散我的...
    如意在心中閱讀 386評(píng)論 2 4

友情鏈接更多精彩內(nèi)容