Flutter 使Widget渐入进入页面

1,需求

        (1),初始化时传入一个List<Widget>类型的数组;

        (2),将实例展示在页面上,传入的数组将以渐进效果依次展示在页面上;

        (3),你可以在非初始化的其他事件时继续增加Widget以渐进效果展示在页面上。

2,主要代码

        我已经将它封装,您可以直接复制使用

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

class AnimateList extends StatefulWidget {
  // 要显示的widget
  final List<Widget> children;
  // 动画完成时长
  int milliseconds;

  AnimateList({
    Key? key,
    required this.children,
    this.milliseconds = 500,
  }) : super(key: key);

  @override
  State<AnimateList> createState() => _AnimateListState();

  // 添加新的widget
  updata({required List<Widget> listWidget}) {
    return _AnimateListState.state!.addWidget(listWidget: listWidget);
  }
}

class _AnimateListState extends State<AnimateList>
    with TickerProviderStateMixin {
  static _AnimateListState? state;
  _AnimateListState() {
    state = this;
  }

  late List<AnimationController> _animationControllers;
  late List<Animation<double>> _animations;
  late ScrollController _scrollController;
  List showWidgetlist = [];

  @override
  Widget build(BuildContext context) {
    return _listViewWidget();
  }

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

  @override
  void dispose() {
    for (var controller in _animationControllers) {
      controller.dispose();
    }
    _scrollController.dispose();
    super.dispose();
  }

// 初始化
  void init() {
    _scrollController = ScrollController();
    _animationControllers = List<AnimationController>.generate(
      widget.children.length,
      (index) => AnimationController(
        vsync: this,
        duration: Duration(milliseconds: widget.milliseconds), // 持续时间可以根据需要进行调整
      ),
    );

    _animations = _animationControllers.map((controller) {
      return Tween<double>(begin: 0, end: 1).animate(
        CurvedAnimation(
          parent: controller,
          curve: Curves.easeIn,
        ),
      );
    }).toList();

    for (int i = 0; i < _animationControllers.length; i++) {
      _startAnimation(i);
    }
  }

  // 新增结构并执行动画
  addWidget({required List<Widget> listWidget}) {
    for (var i = 0; i < listWidget.length; i++) {
      Timer(Duration(seconds: i == 0 ? 0 : i), () {
        _animationControllers.add(AnimationController(
          vsync: this,
          duration:
              Duration(milliseconds: widget.milliseconds), // 持续时间可以根据需要进行调整
        ));
        _animations.add(Tween<double>(begin: 0, end: 1).animate(
          CurvedAnimation(
            parent: _animationControllers[_animationControllers.length - 1],
            curve: Curves.easeIn,
          ),
        ));
        _startAnimation(_animationControllers.length - 1,
            newWidget: listWidget[i]);
      });
    }
  }

// 开始执行动画
  void _startAnimation(int index, {Widget? newWidget}) {
    Future.delayed(Duration(seconds: newWidget == null ? index.toInt() : 0),
        () {
      if (mounted)
        setState(() {
          if (newWidget != null) {
            showWidgetlist.add(newWidget);
          } else {
            showWidgetlist.add(widget.children[index]);
          }
          _animationControllers[index].forward();
          Timer(Duration(milliseconds: widget.milliseconds), () {
            _scrollToBottom();
          });
        });
    });
  }

  // 自动滑动
  void _scrollToBottom() {
    _scrollController.animateTo(
      _scrollController.position.maxScrollExtent,
      duration: Duration(milliseconds: widget.milliseconds),
      curve: Curves.easeOut,
    );
  }

// 显示结构
  ListView _listViewWidget() {
    return ListView.builder(
        itemCount: showWidgetlist.length,
        controller: _scrollController,
        itemBuilder: ((context, index) {
          return AnimatedBuilder(
              animation: _animations[index],
              builder: (BuildContext context, Widget? child) {
                return Opacity(
                  opacity: _animations[index].value,
                  child: Transform.translate(
                    offset: Offset(
                      0,
                      100 * (1 - _animations[index].value),
                    ),
                    child: child,
                  ),
                );
              },
              child: Row(
                children: [showWidgetlist[index], Text('$index')],
              ));
        }));
  }
}

3,用法示例

import 'package:flutter/material.dart';
import 'package:keep_zzh/views/Demo/index.dart';

class MyWidget extends StatefulWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {

var _animate = AnimateList(children: [
  Text("widget1"),
  Container(
    width: 500,
    height: 300,
    color: Colors.pink,
    child: Text("widget2"),),
  Padding(padding: EdgeInsets.all(10),
    child: Text("widget3"),
    )
],);

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        _animate,
        Positioned(right: 100,bottom: 100, child: Text("点击这个可以新增widget"),)
      ],
    );
  }
}

猜你喜欢

转载自blog.csdn.net/weixin_48235660/article/details/133178662