当我滚动到列表视图的底部时，底部的项目将被重建。同样，当我滚动到顶部时，我的第一个项目会被重建。第一个项目是一张带有可选筹码的卡片，当发生这种情况时，该筹码将被取消选择。 “入口”动画也会重播。我怎样才能阻止这个？
这是基本代码（它使用 simple_animations 包，我似乎无法重现芯片的问题，但动画仍然有问题）：
import 'package:flutter/material.dart';
import 'package:simple_animations/simple_animations.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final List _chips = ['Hello', 'World'];
List _selected = [];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Issue demo'),
),
body: ListView(
children: <Widget>[
FadeIn(
1,
Card(
child: Wrap(
spacing: 10,
children: List<Widget>.generate(
_chips.length,
(int index) => InputChip(
label: Text(_chips[index]),
selected: _selected.contains(_chips[index]),
onSelected: (selected) {
setState(() {
if (selected) {
_selected.add(_chips[index]);
} else {
_selected.remove(_chips[index]);
}
});
}),
),
),
),
),
FadeIn(1.5, Text('A', style: Theme.of(context).textTheme.display4)),
FadeIn(2, Text('Very', style: Theme.of(context).textTheme.display4)),
FadeIn(2.5, Text('Big', style: Theme.of(context).textTheme.display4)),
FadeIn(3, Text('Scroll', style: Theme.of(context).textTheme.display4)),
FadeIn(3.5, Text('View', style: Theme.of(context).textTheme.display4)),
FadeIn(4, Text('With', style: Theme.of(context).textTheme.display4)),
FadeIn(4.5, Text('Lots', style: Theme.of(context).textTheme.display4)),
FadeIn(5, Text('Of', style: Theme.of(context).textTheme.display4)),
FadeIn(5.5,Text('Items', style: Theme.of(context).textTheme.display4)),
FadeIn(
6,
Card(
child: Text('Last item',
style: Theme.of(context).textTheme.display2),
),
),
],
),
);
}
}
class FadeIn extends StatelessWidget {
final double delay;
final Widget child;
FadeIn(this.delay, this.child);
@override
Widget build(BuildContext context) {
final tween = MultiTrackTween([
Track("opacity")
.add(Duration(milliseconds: 500), Tween(begin: 0.0, end: 1.0)),
Track("translateX").add(
Duration(milliseconds: 500), Tween(begin: 130.0, end: 0.0),
curve: Curves.easeOut)
]);
return ControlledAnimation(
delay: Duration(milliseconds: (300 * delay).round()),
duration: tween.duration,
tween: tween,
child: child,
builderWithChild: (context, child, animation) => Opacity(
opacity: animation["opacity"],
child: Transform.translate(
offset: Offset(animation["translateX"], 0), child: child),
),
);
}
}
您应该自己运行此命令以完全理解问题
要保持 ListView 中的元素处于活动状态（向后滚动时不重新渲染），您应该使用参数
addAutomaticKeepAlives: true这是我为您编辑的代码
import 'package:flutter/material.dart';
import 'package:simple_animations/simple_animations.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final List _chips = ['Hello', 'World'];
List _selected = [];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Issue demo'),
),
body: ListView(
addAutomaticKeepAlives: true,
children: <Widget>[
FadeIn(
1,
Card(
child: Wrap(
spacing: 10,
children: List<Widget>.generate(
_chips.length,
(int index) => InputChip(
label: Text(_chips[index]),
selected: _selected.contains(_chips[index]),
onSelected: (selected) {
setState(() {
if (selected) {
_selected.add(_chips[index]);
} else {
_selected.remove(_chips[index]);
}
});
}),
),
),
),
),
FadeIn(1.5, Text('A', style: Theme.of(context).textTheme.display4)),
FadeIn(2, Text('Very', style: Theme.of(context).textTheme.display4)),
FadeIn(2.5, Text('Big', style: Theme.of(context).textTheme.display4)),
FadeIn(3, Text('Scroll', style: Theme.of(context).textTheme.display4)),
FadeIn(3.5, Text('View', style: Theme.of(context).textTheme.display4)),
FadeIn(4, Text('With', style: Theme.of(context).textTheme.display4)),
FadeIn(4.5, Text('Lots', style: Theme.of(context).textTheme.display4)),
FadeIn(5, Text('Of', style: Theme.of(context).textTheme.display4)),
FadeIn(5.5,Text('Items', style: Theme.of(context).textTheme.display4)),
FadeIn(
6,
Card(
child: Text('Last item',
style: Theme.of(context).textTheme.display2),
),
),
],
),
);
}
}
class FadeIn extends StatefulWidget {
final double delay;
final Widget child;
FadeIn(this.delay, this.child);
_FadeInState createState() => _FadeInState();
}
class _FadeInState extends State<FadeIn> with AutomaticKeepAliveClientMixin {
@override
Widget build(BuildContext context) {
super.build(context);//this line is needed
final tween = MultiTrackTween([
Track("opacity")
.add(Duration(milliseconds: 500), Tween(begin: 0.0, end: 1.0)),
Track("translateX").add(
Duration(milliseconds: 500), Tween(begin: 130.0, end: 0.0),
curve: Curves.easeOut)
]);
return ControlledAnimation(
delay: Duration(milliseconds: (300 * widget.delay).round()),
duration: tween.duration,
tween: tween,
child: widget.child,
builderWithChild: (context, child, animation) => Opacity(
opacity: animation["opacity"],
child: Transform.translate(
offset: Offset(animation["translateX"], 0), child: child),
),
);
}
@override
// TODO: implement wantKeepAlive
bool get wantKeepAlive => true;
}
只需在Listview中添加cacheExtent为9999即可，下面是CacheExtent的解释
视口在可见区域前后都有一个区域要缓存 当用户滚动时即将变得可见的项目。 落在该缓存区域中的项目即使在 在屏幕上（尚未）可见。 cacheExtent描述了有多少像素 缓存区域在前缘之前和后缘之后延伸 视口的边缘。
示例
ListView.builder(
cacheExtent: 9999,
padding: EdgeInsets.only(bottom: 100, top: 8),
itemCount: item.length,
itemBuilder: (context, index) {
});