要解决在ListView中AnimatedContainer不起作用的问题,可以使用AnimatedBuilder来替代AnimatedContainer。
下面是一个示例代码:
import 'package:flutter/material.dart';
class AnimatedContainerListView extends StatefulWidget {
@override
_AnimatedContainerListViewState createState() => _AnimatedContainerListViewState();
}
class _AnimatedContainerListViewState extends State {
List _listItems = List.generate(10, (index) => ListItem(index));
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('AnimatedContainer ListView'),
),
body: ListView.builder(
itemCount: _listItems.length,
itemBuilder: (context, index) {
return AnimatedListItem(
child: _listItems[index],
);
},
),
);
}
}
class AnimatedListItem extends StatefulWidget {
final Widget child;
AnimatedListItem({this.child});
@override
_AnimatedListItemState createState() => _AnimatedListItemState();
}
class _AnimatedListItemState extends State with SingleTickerProviderStateMixin {
AnimationController _animationController;
Animation _opacityAnimation;
@override
void initState() {
super.initState();
_animationController = AnimationController(
duration: Duration(milliseconds: 500),
vsync: this,
);
// 创建透明度动画
_opacityAnimation = Tween(
begin: 0.0,
end: 1.0,
).animate(_animationController);
// 播放动画
_animationController.forward();
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _opacityAnimation,
builder: (context, child) {
return Opacity(
opacity: _opacityAnimation.value,
child: child,
);
},
child: widget.child,
);
}
}
class ListItem extends StatelessWidget {
final int index;
ListItem(this.index);
@override
Widget build(BuildContext context) {
return Container(
height: 100.0,
color: Colors.blue,
margin: EdgeInsets.all(10.0),
child: Center(
child: Text(
'Item $index',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
),
),
),
);
}
}
void main() {
runApp(MaterialApp(
home: AnimatedContainerListView(),
));
}
在上面的代码中,我们使用AnimatedListItem来包装每个列表项。在AnimatedListItem中使用AnimatedBuilder来创建动画效果,这里我们使用透明度动画来实现渐变效果。
这样,我们就能够在ListView中使用AnimatedContainer的效果了。