当前位置：首页 > news >正文

Flutter部件出场即动画，不显示时不占用空间不占内存

news 2026/6/11 18:51:22

              /// flutter_animate 插件if (show)Container(width: 200,height: 100,color: Colors.orange,child: Center(child: Text('flutter_animate')),).animate().fadeIn() // uses `Animate.defaultDuration`.scale() // inherits duration from fadeIn
                    .move(delay: 300.ms,duration: 600.ms) // runs after the above w/new duration// .blurXY()
              ,Divider(height: 20,),/// 使用简单，显示隐藏
              Visibility(visible: show,maintainState: true,maintainAnimation: true,child: Container(width: 200,height: 100,color: Colors.orange,child: Center(child: Text('Visibility')),),),Divider(height: 20,),AnimatedSize(duration: Duration(milliseconds: 1000),curve: Curves.easeInOut,alignment: Alignment.topCenter, // 动画对齐方式
                child: show? Container(width: 200,height: 100,color: Colors.orange,child: Center(child: Text('AnimatedSize')),): const SizedBox.shrink(), // 隐藏时零高度
              ),Divider(height: 20,),if (show)TweenAnimationBuilder(duration: Duration(milliseconds: 1000),tween: Tween<double>(begin: 0, end: 1),builder: (context, value, child) {return Container(width: 200, // 宽度也动画height: 100,color: Colors.green,child: Center(child: Text('TweenAnimationBuilder')),);},),Divider(height: 20,),AnimatedSwitcher(duration: Duration(milliseconds: 1000),transitionBuilder: (child, animation) {// 组合动画：淡入 + 缩放return FadeTransition(opacity: animation,child: ScaleTransition(scale: Tween<double>(begin: 0, end: 1).animate(animation),child: child,),);},child: show? Container(width: 200, // 宽度也动画height: 100,color: Colors.green,child: Center(child: Text('AnimatedSwitcher')),): const SizedBox.shrink(),),