页面转换期间脚手架主体周围有黑色边框

Question

当我在我的（网络）应用程序中导航时，我得到了这个奇怪的黑色边框。“缩放”动画本身是可取的，但我想摆脱黑色边框。有任何想法吗？

\n

请注意，内容区域下方没有黑色层 - 这看起来像是动画故障。

\n

\n

以下是我的小部件和设置的缩写版本：

\n

class MyScaffold extends StatelessWidget {\n  const MyScaffold({\n    super.key,\n    required this.state,\n    required this.child,\n  });\n\n  final GoRouterState state;\n  final Widget child;\n  \n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: //...,\n      body: AdaptiveLayout( // https://pub.dev/packages/flutter_adaptive_scaffold\n        internalAnimations: false,\n        primaryNavigation: // `NavigationRail` for large screens\n        bottomNavigation: // `NavigationBar` for small screens\n        body: SlotLayout(\n          config: {\n            Breakpoints.smallAndUp: SlotLayout.from(\n              key: PortalScaffold.bodyKey,\n              builder: (_) => Container(\n                clipBehavior: Clip.hardEdge,\n                decoration: const BoxDecoration(),\n                constraints: const BoxConstraints.expand(),\n                child: child,\n              ),\n            ),\n          },\n        ),\n      ),\n    );\n  }\n}\n

\n

class MyPage extends StatelessWidget {\n  const MyPage({super.key});\n  @override\n  Widget build(BuildContext context) {\n    final theme = Theme.of(context);\n    final t = AppLocalizations.of(context)!;\n    return Scaffold(\n      body: Container(\n        color: theme.colorScheme.background,\n        constraints: const BoxConstraints.expand(),\n        child: Text(t.myPageLabel),\n      ),\n    );\n  }\n}\n

\n

final _routerConfig = GoRouter(\n  // ...\n  routes: [\n    // ...\n    ShellRoute( // ShellRoute allows navigation widget to be retained on page changes\n      builder: (context, state, child) {\n        return MyScaffold(state: state, child: child);\n      },\n      routes: [\n        // ...\n        GoRoute(\n          path: // ...\n          builder: (context, state) => const MyPage(),\n        );\n      ]\n    )\n  ]\n);\n\nMaterialApp.router(\n  // ...\n  routerConfig: _routerConfig\n);\n

\n

生成的布局树：

\n

.\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 MaterialApp\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 MyScaffold\n        \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Scaffold\n            \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 AdaptiveLayout\n                \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 SlotLayout\n                    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 MyPage\n                        \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 Scaffold\n                            \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 // ...\n

\n

一些漫无目的的“提供足够的细节”让SO接受我的问题：

\n

最初，我遇到了此处描述的问题，我可以通过重组代码来解决该问题。由此我得到的印象是，Scaffold需要成为Navigator页面转换的直接后代才能按预期工作。但是，鉴于我当前的代码，我相信情况确实如此。因此，我不确定是什么导致了当前的转换故障。

\n

Answer 1

我发现改变这一点的唯一方法是明确禁用底部导航屏幕的过渡动画。当使用use而不是指定ShellRoute路由并用 包裹屏幕时，如下所示：GoRoutepageBuilderbuilderNoTransitionPage

GoRoute(
  path: "/bottomNavigation/screenA"
  pageBuilder: (context, state) => NoTransitionPage(child: ScreenA())
)

包裹的所有路线NoTransitionPage在导航到它们时根本不会使用任何动画，这是底部导航目的地的预期行为。