flutter 跑马灯横向纵向滚动

Posted 2020-11-27 qqcc1388

跑马灯滚动在项目中经常会用到，滚动有水平滚动和上下滚动两种方式
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,
              ),
            ),
          );
        },
      ),
    );
  }