如何在Flutter中使用路由处理深度链接

Question

我正在尝试构建深度链接功能，到目前为止，应用程序的初始启动和从深度链接检索参数都很顺利。

然而，在我深度链接到应用程序后，我在导航到屏幕时遇到了问题。我该怎么做？

我的代码如下：

void main() { 
runApp(MyApp()); 
}
class MyApp extends StatefulWidget {   
@override   
_MyAppState createState() => _MyAppState(); 
}
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {   
Uri _latestUri;  
Object _err;
StreamSubscription _sub;
@override   void initState() {
super.initState();
_handleIncomingLinks();
}
@override void dispose() {
_sub?.cancel();
super.dispose();   
}
void _handleIncomingLinks() {
_sub = uriLinkStream.listen((Uri uri) {
if (!mounted) return;
print('got uri: $uri'); // printed: got uri: myapp://?key1=test
setState(() {
_latestUri = uri;
_err = null;
Navigator.pushNamed(context, 'login'); // This doesn't work because the context does not include navigator
});
}, onError: (Object err) {
if (!mounted) return;
print('got err: $err');
setState(() {
_latestUri = null;
if (err is FormatException) {
_err = err;
} else {
_err = null;
}
});
});   
}
@override Widget build(BuildContext context) {
return MaterialApp(
initialRoute: 'splash-screen',
onGenerateRoute: (settings) {
switch (settings.name) {
case 'splash-screen':
return
PageTransition(
child: BlocProvider(
create: (context) => SplashScreenCubit(APIRepository(
apiClient: APIClient(httpClient: http.Client()))),
child: SplashScreen(),
),
type: PageTransitionType.rightToLeft,
settings: settings);
break;
case 'create-account':
return PageTransition(
child: BlocProvider(
create: (context) => CreateAccountScreenCubit(
APIRepository(
apiClient: APIClient(httpClient: http.Client()))),
child: CreateAccountScreen(),
),
type: PageTransitionType.rightToLeft,
settings: settings);
break;
case 'login':
return PageTransition(
child: BlocProvider(
create: (context) => LoginScreenCubit(APIRepository(
apiClient: APIClient(httpClient: http.Client()))),
child: LoginScreen(),
),
type: PageTransitionType.rightToLeft,
settings: settings);
break;
default:
return null;
},
);
}
}

Answer 1

如果您需要的是能够在不从Navigtor.of获取上下文的情况下进行导航，以便处理深度链接，则需要使用navigatorKey属性，您可以在此处阅读详细信息。

那么你的代码将是这样的。[编辑，我添加了在材料应用程序上添加导航键的位置]

void main() { ... }
class MyApp extends StatefulWidget { ... }
class _MyAppState extends State<MyApp> with SingleTickerProviderStateMixin {   
Uri _latestUri;  
Object _err;
GlobalKey<NavigatorState> navigatorKey = GlobalKey();
StreamSubscription _sub;
@override   void initState() { ... }
@override void dispose() { ... }
void _handleIncomingLinks() {
_sub = uriLinkStream.listen((Uri uri) {
if (!mounted) return;
print('got uri: $uri'); // printed: got uri: myapp://?key1=test
setState(() {
_latestUri = uri;
_err = null;
});
// use the navigatorkey currentstate to navigate to the page you are intended to visit
navigatorKey.currentState.pushNamedAndRemoveUntil('login', (route) => false);
}, onError: (Object err) { ... });
@override Widget build(BuildContext context) { 
return MaterialApp(
...
navigatorKey: navigatorKey,
...
);
}
}

Answer 2

您的深度链接流可以在构建方法之前触发，但此时不允许调用Navigator。因此，您可以使用SchedulerBinding:提供的addPostFrameCallback来修复它

addpostframecallback

为该帧的末尾安排回调。

不请求新帧。

此回调在帧期间运行，就在持久帧之后回调(当主渲染管道冲洗(。如果帧正在进行，而帧后回调尚未进行尚未执行，则注册的回调仍在执行在帧期间。否则，将执行已注册的回调在下一帧期间。

回调按添加它们的顺序执行。

不能取消注册帧后回调。它们被准确地称为一旦

...
void _handleIncomingLinks() {
_sub = uriLinkStream.listen((Uri uri) {
if (!mounted) return;
print('got uri: $uri'); // printed: got uri: myapp://?key1=test
setState(() {
_latestUri = uri;
_err = null;
// Call your navigator inside addPostFrameCallback
WidgetsBinding.instance?.addPostFrameCallback((_) {
Navigator.pushNamed(context, 'login');
});
});
}, onError: (Object err) {
if (!mounted) return;
print('got err: $err');
setState(() {
_latestUri = null;
if (err is FormatException) {
_err = err;
} else {
_err = null;
}
});
});
}
...