我目前有一个 SliverList
其项目是动态加载的。问题是,一旦加载了这些项目,SliverList
会更新,而不会对更改进行动画处理,从而使加载和加载之间的过渡非常不和谐。
我看到 AnimatedList
存在,但它不是条子,所以我不能将它直接放在 CustomScrollView
中。
最佳答案
您现在可能已经知道了,但不妨在这里提及它以帮助人们。
您可以使用 SliverAnimatedList .它达到了要求的结果。
SliverAnimatedList 构造:
itemBuilder
定义了新项目的构建方式。构建器通常应该返回一个 Transition
小部件,或任何将使用 animation
参数的小部件。
SliverAnimatedList(
key: someKey,
initialItemCount: itemCount,
itemBuilder: (context, index, animation) => SizeTransition(
sizeFactor: animation,
child: SomeWidget()
)
)
动态添加/删除
您可以通过使用 SliverAnimatedListState
的 insertItem
和 removeItem
方法来做到这一点。您可以通过以下任一方式访问该状态:
SliverAnimatedList
提供一个 Key
并使用 key.currentState
SliverAnimatedList.of(context)
静态方法。如果您需要从列表之外进行更改,您总是需要使用 key 。
这里有一个完整的例子来说明问题。通过点击 FloatingActionButton
可以添加项目,并通过点击项目本身来移除项目。我同时使用了 key
和 of(context)
方法来访问 SliverAnimatedListState
。
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class SliverAnimatedListTest extends StatefulWidget {
@override
_SliverAnimatedListTestState createState() => _SliverAnimatedListTestState();
}
class _SliverAnimatedListTestState extends State<SliverAnimatedListTest> {
int itemCount = 2;
// The key to be used when accessing SliverAnimatedListState
final GlobalKey<SliverAnimatedListState> _listKey =
GlobalKey<SliverAnimatedListState>();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Sliver Animated List Test")),
// fab will handle inserting a new item at the last index of the list.
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
_listKey.currentState.insertItem(itemCount);
itemCount++;
},
),
body: CustomScrollView(
slivers: <Widget>[
SliverAnimatedList(
key: _listKey,
initialItemCount: itemCount,
// Return a widget that is wrapped with a transition
itemBuilder: (context, index, animation) =>
SizeTransition(
sizeFactor: animation,
child: SomeWidget(
index: index,
// Handle removing an item using of(context) static method.
// Returned widget should also utilize the [animation] param
onPressed: () {
SliverAnimatedList.of(context).removeItem(
index,
(context, animation) => SizeTransition(
sizeFactor: animation,
child: SomeWidget(
index: index,
)));
itemCount--;
}),
))
],
),
);
}
}
class SomeWidget extends StatelessWidget {
final int index;
final Function() onPressed;
const SomeWidget({Key key, this.index, this.onPressed}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(20.0),
child: Center(
child: FlatButton(
child: Text("item $index"),
onPressed: onPressed,
)));
}
}
https://stackoverflow.com/questions/47906505/