我想取得下面的事情(动画风格都没关系,我正在寻找这样做的方法) 但是,所有资源和问题都只能解释如何创建 项目添加或删除

问题描述 投票:0回答:2
wo,所有资源和问题都只能解释如何创建 项目添加或删除动画。 我当前的代码(我使用集体模式)

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

examplewiDgets,例如

AnimatedOpacity

AnimatedPositioned

可以用来实现这一目标。但是,儿童小部件的生命周期有点复杂。他们根据滚动位置被摧毁和重新创建。如果儿童小部件的动画从初始化开始,那么每当孩子对UI可见时,它都会重新。

我的chacky
解决方案。我使用静态布尔来指示是“第一次”还是“娱乐”状态,只是忽略了“娱乐”。您可以在Dartpad中复制并尝试。
ListView
flutter flutter-animation flutter-animatedlist
2个回答
7
投票

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

0
投票

如果您使用的是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); }, ), ), ), ); }, ), ) ], ); }}

    

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.