当我在我的(网络)应用程序中导航时,我得到了这个奇怪的黑色边框。 “缩放”动画本身是可取的,但我想摆脱黑色边框。有什么想法吗?
请注意,内容区域下方没有黑色层 - 这看起来像是动画故障。
以下是我的小部件和设置的缩写版本:
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
的直接后代,页面转换才能按预期工作。但是,鉴于我当前的代码,我相信情况确实如此。因此,我不确定是什么导致了当前的转换故障。
我发现改变这一点的唯一方法是明确禁用底部导航屏幕的过渡动画。当使用
ShellRoute
指定 GoRoute
路线时,使用 pageBuilder
而不是 builder
并用 NoTransitionPage
包裹屏幕,如下所示:
GoRoute(
path: "/bottomNavigation/screenA"
pageBuilder: (context, state) => NoTransitionPage(child: ScreenA())
)
由
NoTransitionPage
包裹的所有路线在导航到它们时根本不会使用任何动画,这是底部导航目的地的预期行为。
尝试给予 脚手架( 背景颜色: