在Flutter中调整脚手架大小

Question

在Flutter中调整脚手架大小

3

项目

你好，我正在尝试在Flutter中制作一些自定义的屏幕过渡效果。我的目标是使用Navigator.push(context, MyRoute(..))在第一个屏幕之上打开第二个屏幕。我的问题是，我希望第二个屏幕只占设备高度的一半，并且在屏幕的其余部分显示旧页面，可能会模糊一些内容。我在寻找一种像BottomSheet样式的效果，但并不使用实际的widget。

问题

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

谢谢

- justAnotherOverflowUser

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- magee05 · Accepted Answer

我认为你可以像下面这样做。首先创建一个透明的页面路由。以下是一个扩展PageRoute类的类，用于创建透明的页面路由，以便您可以看到它后面的内容。它重写了"opaque"值并将其设置为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,
                  ),
                ),
              )
      ),
);

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