gpt4 book ai didi

Flutter 共享元素英雄动画不适用于自定义 ModalRoute

转载 作者:IT王子 更新时间:2023-10-29 06:34:31 26 4
gpt4 key购买 nike

为了在 flutter 中获得类似模态的效果(当页面被推到当前页面的顶部时,背景为黑色并且足够透明,以便您可以在背景中看到后面的页面)。

我正在使用 ModalRoute 类在我当前页面的顶部显示一个覆盖小部件。

我的问题是:当我的 TestOverlay 页面进入时,只显示 fadeIn 动画而不显示 Shared Element Hero 动画。

后面的页面有一个 Hero(tag: "111", child: Text("Test")) 小部件,当我调用 Navigator.of(context).push(TestOverlay ()); 只有 FadeIn 是动画的,共享元素转换不起作用.. :(

谁知道为什么?

谢谢!!

class TestOverlay extends ModalRoute<void> {
TestOverlay();

@override
Duration get transitionDuration => Duration(milliseconds: 400);

@override
bool get opaque => false;

@override
bool get barrierDismissible => false;

@override
Color get barrierColor => Colors.black.withOpacity(0.7);

@override
String get barrierLabel => null;

@override
bool get maintainState => true;

@override
Widget buildPage(
BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
) {
// This makes sure that text and other content follows the material style
return Material(
type: MaterialType.transparency,
// make sure that the overlay content is not cut off
child: GestureDetector(
onTap: () {
Navigator.pop(context);
},
behavior: HitTestBehavior.opaque,
child: SafeArea(
child: _buildOverlayContent(context),
),
),
);
}

Widget _buildOverlayContent(BuildContext context) {
return Center(
child: Hero(tag: "111", Text("Test"))
);
}

@override
Widget buildTransitions(
BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
// You can add your own animations for the overlay content
return FadeTransition(
opacity: animation,
child: ScaleTransition(
scale: animation,
child: child,
),
);
}
}

最佳答案

改用PageRoute:

class TestOverlay extends PageRoute<void> {
TestOverlay({
@required this.builder,
RouteSettings settings,
}) : assert(builder != null),
super(settings: settings);

final WidgetBuilder builder;

@override
bool get opaque => false;

@override
Color get barrierColor => null;

@override
String get barrierLabel => null;

@override
bool get maintainState => true;

@override
Duration get transitionDuration => Duration(milliseconds: 350);

@override
Widget buildPage(BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation) {
final result = builder(context);
return FadeTransition(
opacity: Tween<double>(begin: 0, end: 1).animate(animation),
child: result,
);
}
}

关于Flutter 共享元素英雄动画不适用于自定义 ModalRoute,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52677981/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com