如何使用路由处理 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 属性，您可以阅读详细信息here。

那么您的代码将如下所示。 [已编辑，我添加了在材质应用程序上添加导航键的位置]

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

你的deep link stream可以在build方法之前触发，但当时不允许调用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;
      }
    });
  });
}

...