Flutter走马灯

Flutter走马灯,第1张

Flutter走马灯 一、预览

二、代码 1. 封装方法

参考:

  1. Flutter走马灯
  2. Flutter生命周期
import 'dart:async';
import 'package:flutter/material.dart';

class NotablePage extends StatefulWidget {
  Widget child;  // 轮播的内容
  Duration duration;  // 轮播时间
  double stepOffset;  // 偏移量
  double paddingLeft;  // 内容之间的间距

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

  @override
  _NotablePageState createState() => _NotablePageState();
}

class _NotablePageState extends State {

  late ScrollController _controller;  // 执行动画的controller
  late Timer _timer;  // 定时器timer
  double _offset = 0.0;  // 执行动画的偏移量

  @override
  void initState() {
    super.initState();
    _controller = ScrollController(initialScrollOffset: _offset);

    WidgetsBinding widgetsBinding = WidgetsBinding.instance!;
    widgetsBinding.addPostframeCallback((timeStamp) {
      _controller.animateTo(widget.stepOffset, duration:  widget.duration, curve: Curves.linear);
    });

    _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();
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      physics: NeverScrollableScrollPhysics(),
      scrollDirection: Axis.horizontal,
      controller: _controller,
      itemBuilder: (context, index){
        List 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 Row(children: items,);
      }
    );
  }
}

2. 使用
NotablePage(
  new Text("大家好"),
  200.0,
  new Duration(seconds: 2),
  230.0
)

欢迎分享,转载请注明来源:内存溢出

原文地址:https://www.54852.com/zaji/5696782.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-12-17
下一篇2022-12-17

发表评论

登录后才能评论

评论列表(0条)

    保存