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"),)
],
);
}
}