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

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

MaterialPageRoute不是 Material Widget 本身。此阴影仅出现在 iOS 上并且来自 buildPageTransitions CupertinoPageRoute 中的方法类(class)....

使用 MaterialPageRoute 时Flutter 看着你的 pageTransitionsTheme默认情况下，iOS 返回 CupertinoPageRouteTransitionsBuilder和 Android 一个 FadeUpwardsPageTransitionsBuilder
阴影是 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 (并构建您自己的过渡)按照之前的建议工作，但它会破坏 iOS 上在 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: child,