Flutter中的透明页面路由,用于显示(半)透明页面 [英] Transparent PageRoute in Flutter for displaying a (semi-) transparent page
问题描述
是否可以使用具有透明背景的页面路由,以便我可以在现有页面顶部显示(半)透明页面?
Would it be possible to have a page route with a transparent background so I can show a (semi-)transparent page on top of an existing page?
< a href = https://i.stack.imgur.com/Mu2NE.jpg rel = noreferrer>
推荐答案
是的,绝对可以!一种解决方案是扩展 PageRoute
并使 opaque
getter返回false。可能的解决方案如下所示:
Yes, definitely! One solution would be to extend PageRoute
and make the opaque
getter return false. A possible solution could look like the following:
import 'package:flutter/widgets.dart';
class TransparentRoute extends PageRoute<void> {
TransparentRoute({
@required this.builder,
RouteSettings settings,
}) : assert(builder != null),
super(settings: settings, fullscreenDialog: false);
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: Semantics(
scopesRoute: true,
explicitChildNodes: true,
child: result,
),
);
}
}
请记住,这也会创建自定义过渡动画和行为与较复杂的 MaterialPageRoute
不同(例如,向后滑动手势不适用于iOS上的当前实现)。
Keep in mind that this would also create a custom transition animation and behave differently than the more complex MaterialPageRoute
(e.g. the swipe-back gesture would not work with the current implementation on iOS).
您可以这样使用它:
Navigator.of(context).push(
TransparentRoute(builder: (BuildContext context) => YourSecondPage())
);
有关 PageRoute
和不同的实施者,请转至 https://docs.flutter.io/flutter/widgets /PageRoute-class.html
For more info on the PageRoute
and the different implementers, head over to https://docs.flutter.io/flutter/widgets/PageRoute-class.html
这篇关于Flutter中的透明页面路由,用于显示(半)透明页面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!