flutter 跑馬燈橫向縱向滾動

跑馬燈滾動在項目中經常會用到，滾動有水平滾動和上下滾動兩種方式
1.橫向滾動

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

class YYMarquee extends StatefulWidget {
  Duration duration; // 輪播時間
  double stepOffset; // 偏移量
  double paddingLeft; // 內容之間的間距
  List<Widget>children = [];  //內容
  YYMarquee(
      {
      this.paddingLeft,
      this.duration,
      this.stepOffset,
      this.children});
  _YYMarqueeState createState() => _YYMarqueeState();
}

class _YYMarqueeState extends State<YYMarquee> {
  ScrollController _controller; // 執行動畫的controller
  Timer _timer; // 定時器timer
  double _offset = 0.0; // 執行動畫的偏移量

  @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); // 線性曲線動畫
      }
    });
  }

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

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

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

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      physics:NeverScrollableScrollPhysics(),
      scrollDirection: Axis.horizontal, // 橫向滾動
      controller: _controller, // 滾動的controller
      itemBuilder: (context, index) {
        return _child();
      },
    );
  }
}

關於使用

Widget _marqueeview() {
    return Container(
      margin: EdgeInsets.only(left: 15, right: 15),
      height: 31,
      child: Row(
        children: <Widget>[
          Padding(
            padding: EdgeInsets.only(left: 20, right: 10),
            child: Center(
              child: Image.asset(
                'assets/icon_laba.png',
                width: 15,
                height: 15,
              ),
            ),
          ),
          Expanded(
              child: Padding(
            padding: EdgeInsets.only(right: 15),
            child: YYMarquee(
              stepOffset: 200.0,
              duration: Duration(seconds: 5),
              paddingLeft: 50.0,
              children: [
                Text(
                  '手機用戶155****0523借款成功',
                  style: TextStyle(
                    fontSize: 13,
                    color: Color(0xFFEE8E2B),
                  ),
                ),
                Text(
                  '手機用戶1345****0531借款成功',
                  style: TextStyle(fontSize: 13, color: Color(0xFFEE8E2B)),
                ),
                Text(
                  '手機用戶145****0555借款成功',
                  style: TextStyle(fontSize: 13, color: Color(0xFFEE8E2B)),
                ),
                Text(
                  '手機用戶175****0594借款成功',
                  style: TextStyle(fontSize: 13, color: Color(0xFFEE8E2B)),
                ),
                Text(
                  '手機用戶185****0521借款成功',
                  style: TextStyle(fontSize: 13, color: Color(0xFFEE8E2B)),
                ),
              ],
            ),
          )),
        ],
      ),
      decoration: BoxDecoration(
        color: Color(0xFFFFF2E6),
        borderRadius: BorderRadius.circular(15),
      ),
    );
  }

2.縱向滾動，縱向滾動我這里使用的是flutter_Swiper實現的滾動

  final list = [
    '3月1日王女士（卡號5346）成功借款10000',
    '4月3日李女士（卡號3232）成功借款30000',
    '2月6日王先生（卡號4432）成功借款10000',
    '4月2日劉女士（卡號8908）成功借款50000',
    '1月1日張女士（卡號0894）成功借款100000',
    '10月1日陳先生（卡號7233）成功借款80000',
    '9月1日吳女士（卡號7298）成功借款10000',
  ];
 // 輪播
  Widget _marqueeView() {
    return Padding(
      padding: EdgeInsets.only(left: 16, right: 16, top: 20),
      child: Container(
        alignment: Alignment.center,
        color: ColorConst.Color_Font_White,
        height: SIZE_SCALE(34),
        child: _marqueeSwiper(),
      ),
    );
  }

  Widget _marqueeSwiper() {
    return Container(
      height: SIZE_SCALE(34),
      width: SCREEN_WIDTH(context),
      alignment: Alignment.center,
      child: Swiper(
        itemCount: list.length,
        scrollDirection: Axis.vertical,
        loop: true,
        autoplay: true,
        itemBuilder: (BuildContext context, int index) {
          // return Text('3月1日李女士（卡號5666）成功借款10000');
          return Container(
            height: SIZE_SCALE(34),
            alignment: Alignment.center,
            child: Text(
              list[index],
              style: TextStyle(
                fontSize: FONT_SCALE(13),
                color: ColorConst.Color_Font_Gray,
              ),
            ),
          );
        },
      ),
    );
  }