dart - Flutter 中的透明 PageRoute 用于显示（半）透明页面

Question

是否可以有一个具有透明背景的页面路由，以便我可以在现有页面的顶部显示一个（半）透明页面？

Answer 1

您也不需要覆盖任何类，只需使用：

Navigator.of(context).push(
  PageRouteBuilder(
    opaque: false, // set to false
    pageBuilder: (_, __, ___) => Page2(),
  ),
);

Answer 2

当然是！一种解决方案是扩展PageRoute并使opaquegetter 返回 false。一个可能的解决方案可能如下所示：

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 上的当前实现）。

你可以像这样使用它：

Navigator.of(context).push(
    TransparentRoute(builder: (BuildContext context) => YourSecondPage())
);

有关PageRoute不同实现者的更多信息，请访问https://docs.flutter.io/flutter/widgets/PageRoute-class.html

Answer 3

如果要进行材料页面路由转换，也可以使用此页面路由：

class MaterialTransparentRoute<T> extends PageRoute<T>
    with MaterialRouteTransitionMixin<T> {
  MaterialTransparentRoute({
    @required this.builder,
    RouteSettings settings,
    this.maintainState = true,
    bool fullscreenDialog = false,
  })  : assert(builder != null),
        assert(maintainState != null),
        assert(fullscreenDialog != null),
        super(settings: settings, fullscreenDialog: fullscreenDialog);

  final WidgetBuilder builder;

  @override
  Widget buildContent(BuildContext context) => builder(context);

  @override
  bool get opaque => false;

  @override
  final bool maintainState;

  @override
  String get debugLabel => '${super.debugLabel}(${settings.name})';
}

并像这样推送您的第二页：

Navigator.of(context).push(
    MaterialTransparentRoute(builder: (BuildContext context) => YourSecondPage())
);

Answer 4

你需要像这样用不透明度包装你的小部件Opacity( opacity: 0.25, child: Container(child:Text('hello world')) )