Question

项目

嗨，我正在尝试在两个简单的屏幕之间进行一些自定义的过渡。我的目标是使用var hasIssues = true; var emoji = hasIssues ? "?" : "?"; using (var client = new SmtpClient("host")) using (var mail = new MailMessage()) { mail.From = new MailAddress("name@from.com"); mail.To.Add("name@to.com); mail.Subject = $"{emoji} Emoji Test"; mail.Body = "Did it go well? Check the emoji on the subject line"; client.Send(mail); }在另一个屏幕上方调用另一个屏幕。我的问题是我希望第二个屏幕仅是设备高度的一半。屏幕的其余部分应仅显示旧页面，可能会有某种模糊感。我正在搜索BottomSheet样式效果，但未使用实际的小部件。

问题

无论我尝试什么，当调用Navigator.push(context, MyRoute(..))时，新屏幕的大小都会始终调整为填满整个屏幕，并且我无法在顶部放一个较小的支架，并且不能透明地隐藏旧页面

谢谢

Answer 1

我认为您可以执行以下操作。首先创建一个透明的页面路由。这是一个扩展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,
                  ),
                ),
              )
      ),
);

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

调整脚手架的大小

项目

问题

1 个答案: