flutter - 在 flutter 中调整脚手架的大小

Question

项目

您好，我正在尝试在两个简单屏幕之间的 flutter 中进行一些自定义转换。我的目标是使用 Navigator.push(context, MyRoute(..)) 在第一个屏幕之上调用另一个屏幕。我的问题是我希望第二个屏幕只有设备高度的一半。屏幕的其余部分应该只显示旧页面，可能有些模糊。我正在寻找 BottomSheet 样式效果，但没有使用实际的小部件。

问题

无论我尝试什么，当 Navigator.push 被调用时，新屏幕总是会调整大小以填满整个屏幕，我无法在顶部获得一个较小的脚手架并具有一定的透明度隐藏旧页面。

谢谢

Answer 1

我认为您可以执行以下操作。首先创建透明页面路由。这是一个扩展 PageRoute 类以创建透明页面路由的类，因此您可以看到它背后的内容。它覆盖“不透明”值并将其设置为 false。

import 'package:flutter/widgets.dart';

/// Creates a route that leaves the background behind it transparent
///
///
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,
      ),
    );
  }
}

将其用作您的页面路由。

在您要导航到的脚手架中，您可以执行以下操作。这将使它只占据屏幕的一半并显示它后面的上一页:

Navigator.of(context).push(
      TransparentRoute(
          builder: (context) => Scaffold(
                appBar: null,
                backgroundColor: Colors.transparent,
                body: Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    height: MediaQuery.of(context).size.height / 2,
                    color: Colors.red,
                  ),
                ),
              )
      ),
);

如果我正确理解您的问题，我认为这应该可以解决问题!