当前位置: 首页 > 网络应用技术

整个网络上最简单的flutter navigator2.0路由指南

时间:2023-03-08 01:45:05 网络应用技术

  关于扑朔迷离路由的一些原则,我们可以阅读我们上一篇文章“ flutter路由源代码分析”。在本文中,我们主要学习Navigator2.0的用法。

  为了证明Navigator2.0的使用情况,这里准备了一个简单的案例,该项目下载并在此处访问。

  NAV_DEMO目录是使用Navigator 1.0的示例。总共4页,其中:

  代码结构如下:

  核心代码:

  导航器1.0中存在的几个问题:

  很难处理在Web版本上进行路由导航的需求。如下所示,切换路线,地址栏没有更改

  在这里,我将重建最小修改和最简单的使用方式。如果使用的话,请查看Navigator 2.0

  修改代码结构:

  仅添加路由器文件夹并添加文件。自定义类继承自我介绍并混合到和平。

  这是必须实施的三种方法:

  该方法可以首先留在空气中,主要是查看方法。我们创建了路由的管理器并设置了两个主要参数。其中,存储对象列表;当路由被子时,它将被回电,并且开发人员可以在此处处理路由后堆栈的逻辑。

  在这里,我们真正需要关心的是,对象列表是什么?

  我们知道,在颤音中,单词路由用于表示应用程序中的页面,而路由堆栈是页面堆栈。2.0提出的类实际上等于路由的描述文件。此想法类似于在“扑朔迷离框架实现原理”中提到的四棵树。在flutter中添加的So描述是一个配置描述,并且基于此描述生成了类。相似地,它也是一种描述,用于生成真实的路线对象。

  如果您理解这一点,您将了解Navigator2.0不仅不会使路由管理更加复杂,而且更简单。只要我们操作此列表,相应的路由堆栈就会感知并自动更改。显示,我们只需要放置要放置的最后一个元素位置。Navigator2.0就是将同一黑框的路由堆栈转换为列表操作。我们要更改路由堆栈中的页面序列,我们只有需要修改元素位置。

  接下来,您需要查看如何使用类创建对象。类本身继承了自我类别,这意味着它确实是一个路由配置文件。它是一个抽象类,无法立即实例化。我们找到了它的两个直接实施类:

  在这里,我们了解到Flutter为我们提供了实现类别,一种是Android样式,另一种是iOS的样式。

  使用我们直接编写的页面添加一种方法来封装这些逻辑以帮助创建:

  其中一些与静态路由配置表相似,但注意到我们可以通过参数传递页面的构造函数,该参数比1.0的静态路由更灵活。

  好吧,您只需要编写一些方法即可在此处操作列表:

  最后,为了使用Navigator 2.0接口,有必要对其进行修改。为了演示简单的整体变量,在整个情况下是一个全局变量:

  修改,直接引用此全局变量:

  最主要的是创建声明之一并设置属性。这不是必需的,但是为了证明返回密钥的处理,我们的案例会创建默认实现。

  好吧,它基本上是完成的。在将路由堆栈用于使用Navigator 1.0之前,它被我们自己提供的界面替换。

  包括构造函数使用动态路由到详细信息页面的地方:

  详细的页面接收数据:

  您看到了吗?我们可以轻松地通过类似于1.0的静态路由方法在页面上传递页面。

  这是Navigator2.0的基本用途。您仍然发现很难理解吗?

  以下是完整的代码。我们还重写了处理页面退出的逻辑的方法,当时我们不希望用户单击“返回”按钮时,我们会直接退出应用程序。以下完成。当我们退休到根路由页面时,我们会弹出一个对话框,向用户询问您是否确定是否要退出应用程序。它需要用于打包。现在不需要。它可以直接在中间处理。

  在上述情况下,我们仍未解决Web版本的问题。当我们在浏览器地址栏中输入URL时,我们无法定位特定的路由页面。当我们切换到特定路由页面时,地址栏的URL不会同步更改。如果您的应用程序将来与Web版本兼容,则有必要继续深入学习Navigator2.0。

  要解决这个问题,我们需要自定义路由信息解析器:

  这是要实施的两种方法,即

  可以看出,这两种方法的功能正好相反,它们仅与我们的两个需求相对应:输入URL以切换相应的路由页面;操作路由页面,URL同步。

  具体而言,该方法接收一个类型参数,该参数描述了一个URL信息,其中包含两个属性是字符串和动态类型。URL的部分用于保存页面中的状态。例如,页面中有一个输入框,内容已在输入框中输入。存储时,可以在下次恢复页面时恢复数据。清楚地了解该方法的参数后,上面的代码实现已得到充分了解。我们制作URL分析类型,该类型比直接操作字符串更方便,然后生成相应的路由配置并根据此信息返回。

  该方法的逻辑更简单。它接收一组参数的路由配置信息。我需要根据当前路由配置信息生成一个URL,然后将其包装到对象中并返回。此处返回的URL是更新浏览器地址栏的URL。

  在这一点上,我们的路由信息解析器已编写,现在我们需要在其中添加代码:

  首先,您需要重写一种方法,其实现是返回我们的列表,然后实现留在空白中的方法。

  在路由信息解析器中被调用后,该方法将在此处进行调整。显然,该方法的返回值是转发到方法的参数。在该方法中,我们完成了对URL的分析并生成一组路由配置信息。现在,将此一组配置信息重新发布到中间,这意味着我们需要位于中间以生成此路由配置信息的相应对象,并插入当前列表中,最终实现了路由堆栈更新。将过程汇总到一个句子中,该句子是外部输入URL,最终导致应用程序内部路由页面的生成和更新。

  最后,修改,设置我们的路由信息解析器:

  在这里,我们直接替换提供的新施工方法。使用此构造器可以省略我们以前设置的设置。

  切换应用程序路由,地址栏也会同时更新:

  输入URL,在应用程序中导航到相应的路线:

  完美!完整的源代码访问nav2_demo

  请注意,Navigator 2.0接口和状态管理框架的组合更好。本文与简单的状态管理框架没有结合。

  通常,Navigator 2.0并不复杂。它使Flutter的路由管理更加方便和灵活。第三方开发人员可以基于此机制建立高级别的动态路由导航,以基于此机制建立高级别的动态路由导航。

  微信公共帐户:“编程的道路从0到1”