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

Question

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

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

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

class MyScaffold extends StatelessWidget {
  const MyScaffold({
    super.key,
    required this.state,
    required this.child,
  });

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

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

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

MaterialApp.router(
  // ...
  routerConfig: _routerConfig
);

生成的布局树：

.
└── MaterialApp
    └── MyScaffold
        └── Scaffold
            └── AdaptiveLayout
                └── SlotLayout
                    └── MyPage
                        └── Scaffold
                            └── // ...

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

最初，我遇到了here描述的问题，我可以通过重组代码来解决这个问题。由此我得到的印象是，

Scaffold

需要是

Navigator

的直接后代，页面转换才能按预期工作。但是，鉴于我当前的代码，我相信情况确实如此。因此，我不确定是什么导致了当前的转换故障。

Answer 1

我发现改变这一点的唯一方法是明确禁用底部导航屏幕的过渡动画。当使用

ShellRoute

指定

GoRoute

路线时，使用

pageBuilder

而不是

builder

并用

NoTransitionPage

包裹屏幕，如下所示：

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

由

NoTransitionPage

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

Answer 2

尝试给予 脚手架（ 背景颜色：