共享轴过渡动画切换器吗?

Question

是否有办法让AnimatedSwitcher的水平轴滑动页面过渡?

我想保持我的背景静态，所以我使用AnimatedSwitcher而不是Navigator，然后我如何使用AnimatedSwitcher滑动动画，类似于动画包中的SharedAxisTransition?

Scaffold(
body: Stack(
children: [
SizedBox(
height: screenHeight,
width: screenWidth,
child: Container(), // Contains a color so the background is set
),
OtherWidgetsHere(),
],
)
)

我现在做的是，我将OtherWidgetsHere()与AnimatedSwitcher更改为不同的小部件，但它没有像SharedAxisTransition那样的动画。

我如何使用Navigator来改变每个Scaffold，但保持一个背景图像恒定，所以只有上面的元素淡出?

Answer 1

可以做您想做的事情，但不完全使用AnimatedSwitcher。这是因为AnimatedSwitcher是对称的——当添加子元素时，它播放动画，当移除子元素时，它播放相同的动画。SharedAxisTransform有不同的动画进入和离开，所以不能适合AnimatedSwitcher。

幸运的是，动画包中包含一个小部件PageTransitionSwitcher，它与AnimatedSwitcher做同样的事情，但用于动画包中的不对称动画。

我制作这个工具小部件是为了使它易于使用:

class SharedAxisSwitcher extends StatelessWidget {
const SharedAxisSwitcher({
Key? key,
required this.child,
}) : super(key: key);
final Widget child;
@override
Widget build(BuildContext context) {
return PageTransitionSwitcher(
child: child,
transitionBuilder: (
Widget child,
Animation<double> primaryAnimation,
Animation<double> secondaryAnimation,
) {
return SharedAxisTransition(
animation: primaryAnimation,
secondaryAnimation: secondaryAnimation,
transitionType: SharedAxisTransitionType.horizontal,
child: child,
);
},
);
}
}

使用方式与AnimatedSwitcher相同-通过更改child小部件:

class Demo extends StatefulWidget {
const Demo({super.key});
@override
createState() => _DemoState();
}
class _DemoState extends State<Demo> {
var index = 1;
@override
Widget build(BuildContext context) {
return Column(
children: [
SharedAxisSwitcher(
child: Text(
"Child #$index",
// note - changing the key is necessary to get the child animation
// if the type of the child (`Text` here) does not change
key: Key("$index"),
),
),
TextButton(
child: const Text("Next child"),
onPressed: () {
setState(() {
index++;
});
},
)
],
);
}
}