要在小部件之间使用AnimatedSwitcher进行切换,需要使用一个key来标识每个小部件。这样,AnimatedSwitcher可以根据key来确定要切换的小部件。以下是一个示例代码,演示如何在两个小部件之间切换:
import 'package:flutter/material.dart';
class MyAnimatedSwitcher extends StatefulWidget {
@override
_MyAnimatedSwitcherState createState() => _MyAnimatedSwitcherState();
}
class _MyAnimatedSwitcherState extends State {
bool _isFirstWidget = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('AnimatedSwitcher Demo'),
),
body: Center(
child: AnimatedSwitcher(
duration: Duration(milliseconds: 500),
transitionBuilder: (Widget child, Animation animation) {
return ScaleTransition(
scale: animation,
child: child,
);
},
child: _isFirstWidget ? FirstWidget(key: UniqueKey()) : SecondWidget(key: UniqueKey()),
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_isFirstWidget = !_isFirstWidget;
});
},
child: Icon(Icons.swap_horiz),
),
);
}
}
class FirstWidget extends StatelessWidget {
const FirstWidget({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
key: key,
width: 200,
height: 200,
color: Colors.blue,
child: Center(
child: Text('First Widget', style: TextStyle(color: Colors.white, fontSize: 20)),
),
);
}
}
class SecondWidget extends StatelessWidget {
const SecondWidget({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
key: key,
width: 200,
height: 200,
color: Colors.red,
child: Center(
child: Text('Second Widget', style: TextStyle(color: Colors.white, fontSize: 20)),
),
);
}
}
void main() {
runApp(MyAnimatedSwitcher());
}
在这个示例中,我们创建了一个MyAnimatedSwitcher小部件,它包含一个AnimatedSwitcher和一个浮动操作按钮。当点击浮动操作按钮时,我们会在两个小部件之间切换。AnimatedSwitcher的transitionBuilder参数用于指定切换动画,我们使用了一个ScaleTransition来实现一个缩放动画。
注意,每个小部件都需要有一个唯一的key,所以我们在切换小部件时使用了UniqueKey()来生成新的key。这样,AnimatedSwitcher就可以区分不同的小部件,并在切换时执行动画。