要为AnimatedSwitcher添加动画效果,可以使用AnimatedSwitcher的transitionBuilder属性来自定义动画。下面是一个示例代码:
import 'package:flutter/material.dart';
class AnimatedSwitcherExample extends StatefulWidget {
@override
_AnimatedSwitcherExampleState createState() => _AnimatedSwitcherExampleState();
}
class _AnimatedSwitcherExampleState extends State {
bool _showFirst = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('AnimatedSwitcher Example'),
),
body: Center(
child: AnimatedSwitcher(
duration: Duration(milliseconds: 500),
transitionBuilder: (Widget child, Animation animation) {
return ScaleTransition(
scale: animation,
child: child,
);
},
child: _showFirst
? Container(
key: ValueKey(1),
width: 200,
height: 200,
color: Colors.red,
)
: Container(
key: ValueKey(2),
width: 200,
height: 200,
color: Colors.blue,
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_showFirst = !_showFirst;
});
},
child: Icon(Icons.swap_horizontal_circle),
),
);
}
}
void main() {
runApp(MaterialApp(
home: AnimatedSwitcherExample(),
));
}
在上面的示例中,transitionBuilder属性被设置为一个自定义的ScaleTransition,该过渡效果会根据animation的值对子部件进行缩放动画。在点击按钮时,通过改变_showFirst的值来切换显示的子部件,从而触发动画效果。