class _MembersPageState extends State<MembersPage> {
@override
Widget build(BuildContext context) {
return BlocProvider<MembersPageBloc>(
create: (context) =>
MembersPageBloc(userRepository: UserRepository.instance)..add(MembersPageShowed()),
child: BlocBuilder<MembersPageBloc, MembersPageState>(
builder: (context, state) {
if (state is MembersPageSuccess) {
return ListView.builder(
itemCount: state.users.length,
itemBuilder: (context, index) {
User user = state.users[index];
return ListTile(
isThreeLine: true,
leading: Icon(Icons.person, size: 36),
title: Text(user.name),
subtitle: Text(user.username),
onTap: () => null,
);
},
);
} else
return Text("I don't care");
},
),
);
}
}
wiDgets,例如
AnimatedOpacity
和
AnimatedPositioned
可以用来实现这一目标。但是,儿童小部件的生命周期有点复杂。他们根据滚动位置被摧毁和重新创建。如果儿童小部件的动画从初始化开始,那么每当孩子对UI可见时,它都会重新。
我的chacky解决方案。我使用静态布尔来指示是“第一次”还是“娱乐”状态,只是忽略了“娱乐”。您可以在Dartpad中复制并尝试。
ListView
I在Dartpad上创建了一个gist
,显示了如何添加初始动画
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.brown,
body: ListView(
children: List.generate(
25,
(i) => AnimatedListItem(i, key: ValueKey<int>(i)),
),
),
),
);
}
}
class AnimatedListItem extends StatefulWidget {
final int index;
const AnimatedListItem(this.index, {Key? key}) : super(key: key);
@override
State<AnimatedListItem> createState() => _AnimatedListItemState();
}
class _AnimatedListItemState extends State<AnimatedListItem> {
bool _animate = false;
static bool _isStart = true;
@override
void initState() {
super.initState();
if (_isStart) {
Future.delayed(Duration(milliseconds: widget.index * 100), () {
setState(() {
_animate = true;
_isStart = false;
});
});
} else {
_animate = true;
}
}
@override
Widget build(BuildContext context) {
return AnimatedOpacity(
duration: const Duration(milliseconds: 1000),
opacity: _animate ? 1 : 0,
curve: Curves.easeInOutQuart,
child: AnimatedPadding(
duration: const Duration(milliseconds: 1000),
padding: _animate
? const EdgeInsets.all(4.0)
: const EdgeInsets.only(top: 10),
child: Container(
constraints: const BoxConstraints.expand(height: 100),
child: Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
widget.index.toString(),
style: const TextStyle(fontSize: 24),
),
),
),
),
),
);
}
}
要点是为每个列表项目创建一个ListView
,请缓存并清理动画完成。
AnimationController
如果您使用的是flutter_animate我建议用以下列表包装列表瓷砖,则可以添加尽可能多的效果。
Great软件包,如果您不使用它,则应该。
import 'package:flutter/material.dart';
class DifferentPage extends StatefulWidget {
const DifferentPage({super.key});
@override
State<DifferentPage> createState() => DifferentStatePage();
}
class DifferentStatePage extends State<DifferentPage> {
final _item = [];
final GlobalKey<AnimatedListState> _key = GlobalKey();
void _addItem() {
_item.insert(0, 'Item ${_item.length + 1}');
_key.currentState!.insertItem( 0,
duration: const Duration(seconds: 1),
);
}
void _removeItem(int index) {
_key.currentState!.removeItem( index, (_, animation) {
return SizeTransition(
sizeFactor: animation,
child: const Card(
margin: EdgeInsets.all(10),
color: Colors.red,
child: ListTile(
title: Text(
'Deleted',
style: TextStyle(fontSize: 22),
),
),
),
);
},
duration: const Duration(milliseconds: 300),
);
_item.removeAt(index);
}
@override
Widget build(BuildContext context) {
return Column(
children: [
const SizedBox( height: 10 ),
IconButton(
onPressed: _addItem,
icon: const Icon(Icons.add_box_rounded),
),
Expanded(
child: AnimatedList(
key: _key,
initialItemCount: 0,
padding: const EdgeInsets.all(10),
itemBuilder: (context, index, animation) {
return SizeTransition(
key: UniqueKey(),
sizeFactor: animation,
child: Card(
margin: const EdgeInsets.all(10),
color: Colors.amberAccent,
child: ListTile(
title: Text(
_item[index],
style: const TextStyle(fontSize: 22),
),
trailing: IconButton(
icon: const Icon(Icons.delete),
onPressed: () {
_removeItem(index);
},
),
),
),
);
},
),
)
],
);
}}