为什么嵌套导航器之间有阴影？

Question

当我使用嵌套在包含导航器的 MaterialApp 中的导航器时，会出现如下图所示的阴影。

为什么？如何去除这个阴影？

我的代码在这里：

import 'package:flutter/material.dart';

void main() => runApp(NavigatorNested());

class NavigatorNested extends StatefulWidget {
    @override
    NavigatorNestedState createState() => NavigatorNestedState();
}

class NavigatorNestedState extends State<NavigatorNested> {
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            initialRoute: 'hpme',
            title: 'test',
            theme: ThemeData(
                primarySwatch: Colors.blue,
            ),
            home: Scaffold(
                appBar: AppBar(
                    title: Text('helle world'),
                ),
                body: Container(
                        margin: EdgeInsets.symmetric(vertical: 48, horizontal: 24),
                        child: Navigator(
                        onGenerateRoute: (settings) {
                            return MaterialPageRoute<dynamic>(
                                settings: settings,
                                builder: (context) {
                                return Text('helle world');
                            });
                        },
                        onUnknownRoute: (settings) {
                            return MaterialPageRoute<dynamic>(
                                settings: settings,
                                builder: (context) {
                                return Text('helle world');
                            });
                        },
                        initialRoute: "home",
                    ),
                ),
            ),
        );
    }
}

如果我Text('hello')用来替换Navigator，它可以正常工作。这是flutrer中的错误吗？

Answer 1

您可以将导航器包装在 ClipRect 中。

return ClipRect(child:Navigator(

Answer 2

MaterialPageRoute不是 Material Widget 本身。这个阴影只发生在 iOS 上，并且来自类中的buildPageTransitions方法CupertinoPageRoute......

当使用MaterialPageRouteFlutter 时pageTransitionsTheme，默认情况下在 iOS 上返回 aCupertinoPageRouteTransitionsBuilder和 Android aFadeUpwardsPageTransitionsBuilder

阴影是 iOS 的默认页面转换的一部分，但可能有很好的理由不希望这些显示出来。

参见：https : //api.flutter.dev/flutter/material/PageTransitionsTheme-class.html https://raw.githubusercontent.com/flutter/flutter/master/packages/flutter/lib/src/cupertino/route.dart

有几种解决方案：

(1)PageRouteBuilder按照之前的建议使用自定义（并构建您自己的过渡），但它会破坏在CupertinoPageRoute.

(2) 也定义FadeUpwardsPageTransitionsBuilder为 iOS 上的默认过渡。但这将再次破坏 iOS 上的向后滑动手势。

MaterialApp(
  theme: ThemeData(
    pageTransitionsTheme: PageTransitionsTheme(
      builders: {
        TargetPlatform.iOS: FadeUpwardsPageTransitionsBuilder(),
        TargetPlatform.android: FadeUpwardsPageTransitionsBuilder(),
      }
    ),
  ),
  ...
)

(3) 子类CupertinoPageTransition和覆盖build。在 build 函数中有一个_primaryShadowAnimation你不需要的动画。这将保持 iOS 上的向后滑动手势完好无损。您还必须对一些父类进行子类化，例如CupertinoPageRouteTransitionsBuilder返回您的自定义CupertinoPageTransition而不是：

# file: packages/flutter/lib/src/cupertino/route.dart, lines: 407-410
child: DecoratedBoxTransition(
  decoration: _primaryShadowAnimation,
  child: child,
),

你直接返回孩子：

child: child,

Answer 3

MaterialPageRoute 本身是一个材质小部件，所以它有一个高程和一个阴影。

改用PageRouteBuilder，这是不包含材质效果的pageroute。一个很好的例子是在Navigator文档的“自定义路由”部分。

编辑：抱歉，文档中的示例似乎不适合您的场景。您可以像这样使用 PageRouteBuilder

Navigator(
    //...
    onGeneratedRoute: PageRouteBuilder(
        pageBuilder: (context, _, __) => yourWidget,
        transitionsBuilder: //There are some good examples about this transition animation on the web
    ),
    //...
)