flutter 旋转动画_禁用脚手架FAB动画 - IT屋

默认情况下，在应用运行期间更改FAB时，"颤动中的脚手架"会为浮动操作按钮(FAB)设置动画。

< / a>

如何禁用此动画？

文档引用了 动画，该动画可缩放更改时的按钮：

///动画师将[floatingActionButton]移到新的
[floatingActionButtonLocation]。 /// ///如果为null，则
[ScaffoldState]将使用默认动画器
[]。 final
FloatingActionButtonAnimator floatActionButtonAnimator;

但是，没有迹象表明如何完全禁用缩放动画。

完整的示例代码，包含以下问题：

  import'dart：async'; 

导入" package：flutter / "；

void main()=> runApp(MyApp());

类MyApp扩展了StatelessWidget {
@override
Widget build(BuildContext context){
return MaterialApp(
home：MyHomePage()，
);
}
}

类MyHomePage扩展了StatefulWidget {
MyHomePage({Key key})：super(key：key);

@override
_MyHomePageState createState()=> _MyHomePageState();
}

类_MyHomePageState扩展State< MyHomePage> {
Timer _timer;
bool showFirst = true;

@override
void initState(){
_timer = (new Duration(seconds：2)，(Timer t){
setState(() {
showFirst =！showFirst;
});
})；
();
}

@override
小部件构建(BuildContext上下文){
return Scaffold(
body：Container()，
floatActionButtonLocation：showFirst
？
：，
floatActionButton：Padding(
padding：(top：)，
子级：Column(
儿童：< Widget> [
Text('Floating Action Button Title')，
showFirst
？(
heroTag：'unique'，
图标：Icon()，
标签：Text('First FAB')，
onPressed：(){}，
)
：(
heroTag：'unique2'，
图标：Icon()，
标签：Tex t(’第二FAB’)，
onPressed：(){}，
)，
]，
)，
)，
)；
}

@override
void dispose(){
();
();
}
}

在每个FAB中添加不同的英雄标签不会影响动画。

解决方案

您需要扩展FloatingActionButtonAnimator并覆盖其方法，请检查以下代码，

  import'dart：async'; 
导入的" package：flutter / "； 

void main()=> runApp(MyApp());

类MyApp扩展了StatelessWidget {
@override
Widget build(BuildContext context){
return MaterialApp(
home：MyHomePage()，
);
}
}

类MyHomePage扩展了StatefulWidget {
MyHomePage({Key key})：super(key：key);

@override
_MyHomePageState createState()=> _MyHomePageState();
}

类_MyHomePageState扩展State< MyHomePage> {
Timer _timer;
bool showFirst = true;

@override
void initState(){
_timer = (new Duration(seconds：2)，(Timer t){
setState(() {
showFirst =！showFirst;
});
})；
();
}

@override
小部件构建(BuildContext上下文){
return Scaffold(
body：Container()，
floatActionButtonAnimator：NoScalingAnimation ()，
floatActionButtonLocation：showFirst
？
：，
floatActionButton：Padding(
padding：(top：)，
子项：Column(
子项：< Widget> [
Text('Floating Action Button Title')，
showFirst
？(
heroTag：'unique'，
图标：Icon()，
标签：Text('First FAB')，
onPressed：(){}，
)
：(
heroTag：'unique2'，
icon：Icon()，
标签：Text('Second FAB')，
onPressed：(){}，
)，
]，
)，
)，
) ;
}

@override
void dispose(){
();
();
}
}

类NoScalingAnimation扩展了FloatingActionButtonAnimator {
double _x;
double _y;
@override
偏移量getOffset({偏移量开始，偏移量结束，双重进度}){
_x = begin.dx +()* progress;
_y = begin.dy +()*进步;
return Offset(_x，_y);
}

@override
Animation< double> getRotationAnimation({Animation< double> parent}){
return Tween< double>(开始：，结束：).animate(parent);
}

@override
Animation< double> getScaleAnimation({Animation< double> parent}){
return Tween< double>(开始：，结束：).animate(parent);
}
}

您可以通过更改每种方法返回的值来控制动画行为。对于前。您可以通过将 getOffset 方法更改为

，使fab从左跳到右而没有动画 @override 
偏移量getOffset({偏移量开始，偏移量结束，两倍进度}){
if(progress == ){
返回结束； 
}其他{
开始返回； 
} 
} 

本文地址：IT屋 » 禁用脚手架FAB动画