Flutter：状态更改后如何导航到新页面？

Posted 2023-02-23

【中文标题】Flutter：状态更改后如何导航到新页面？

【英文标题】：Flutter : How to navigate to new page after state change?

【发布时间】：2018-01-24 17:41:52

【问题描述】：

状态改变后如何导航到新页面？

我有一个需要先登录的应用程序。只有在登录后，应用程序组件才会完全创建。所以我写了这样的东西：

主应用

class AppComponentState extends State<AppComponent> implements CredentialProvider 

  Credential credential;

  @override
  Widget build(BuildContext context) 
    if (credential == null) 
      return new MaterialApp(
        routes: <String, WidgetBuilder>
          '/': (BuildContext context) => new LoginPage(this),
        ,
      );
     else 
      return new MaterialApp(
        routes: <String, WidgetBuilder>
          '/': (BuildContext context) => new Desktop(credential),
          ...
        ,
      );
    
  
  @override
  void setCredential(Credential s) 
    setState(() 
      credential = s;
    );
  

凭据提供程序接口

abstract CredentialProvider 
    void setCredential(Credential c);

LoginPage 中的登录按钮侦听器，凭据已设置并路由到新页面。

@override
Widget build(BuildContext context) 

  void _handleSubmitted() 
    ...
    credentialProvider.setCredential(c); // this change main widget state and hence new pages are created
    // call setTimeout ?
    Navigator.pushNamed(context, "/"); // this should go to new page, because credential is set.
  

  ...

看起来，在调用Navigator.pushNamed(context, "/"); 之前，我必须等待当前的digest loop 完成。在颤振摘要循环中有什么好的方法可以做，比如 javascript 中的setTimeout？

MaterialApp 的条件创建有点奇怪。颤振中有更好的模式吗？

【参考方案1】：

要回答您的直接问题，addPostFrameCallback 或 Future.delayed 可以在最短延迟后调用代码。但是，这种模式存在一些问题：

我建议您只有一个MaterialApp 小部件。您可以为登录页面设置单独的路由。 在 Flutter 中，状态从父级流向子级。孩子不应该在父母State 上调用方法。相反，父母可以将回调传递给孩子。或者也许是ChangeNotifier。如果没有其他方法可以做您想做的事，您可以使用GlobalKey 从应用程序中的任何位置访问AppComponentState 并在其上调用setCredential，但您会失去一些封装性和可测试性这样做。 如果用户按下后退按钮并返回上一个位置，则在导航器堆栈上推送另一个 "/" 可能会导致问题。可能您想要的是触发一些作为LoginPage 和Desktop 父级的小部件的重建。或者您可以再次致电runApp() 以强制一切重建。

【讨论】：

onGenerateRoute 可能是解决多个MaterialApp 的解决方案？不过它有自己的problem？