路由简介
在现代移动应用开发中，路由是实现页面间导航的关键。在 Flutter 中，路由是一个封装了页面导航逻辑的对象，负责管理页面的堆栈以及页面之间的跳转。通过路由，可以方便地在不同的页面之间进行切换，同时还能处理返回按钮的行为。
创建简单的路由
定义路由
在 Flutter 中，路由通常由 MaterialPageRoute 或其子类来表示。我们可以使用 MaterialPageRoute 来定义一个简单的路由，然后将其添加到 Navigator 中。
-- -------------------- ---- -------
-- - --------- -
---- ------ -
----------------
-
----- ----- ------- --------------- -
---------
------ ------------------ -------- -
------ ------------
------ -------- ------
------ ----------
-------------- ------------
--
----- -------------
------- -------- ---------------
---------- ------------- -------- -- ---------------
--
--
-
-
----- ---------- ------- --------------- -
---------
------ ------------------ -------- -
------ ---------
------- -------
------ -----------
--
----- -------
------ ---------------
---------- -- -
---------------------------- -----------
--
------ ---------------
--
--
--
-
-
----- ------------ ------- --------------- -
---------
------ ------------------ -------- -
------ ---------
------- -------
------ ------------
--
----- -------
------ ---------------
---------- -- -
-----------------------
--
------ -----------
--
--
--
-
-使用命名路由
在上面的例子中，我们使用了命名路由的方式。MaterialPageRoute 可以接收一个字符串参数作为路由名称，这样在需要跳转时，可以通过名称来指定目标页面。
模态对话框
除了基本的页面跳转外，Flutter 还支持模态对话框的显示。模态对话框会覆盖当前页面，使得用户必须先关闭对话框才能继续操作。
显示模态对话框
使用 showDialog 函数可以显示一个模态对话框。
-- -------------------- ---- -------
---------------
---------- -- -
-----------
-------- --------
-------- ------------- -------- -
------ ------------
------ -----------
-------- -------------------
-------- -
-----------
------ -----------
---------- -- -
----------------------------
--
--
--
--
--
--
--
------ --------------
-页面堆栈
Flutter 的 Navigator 类管理着一个页面堆栈。当我们通过 Navigator.push() 方法进入一个新的页面时，这个页面会被压入堆栈顶部；当用户点击返回按钮时，当前页面会被弹出堆栈，回到前一个页面。
管理页面堆栈
我们可以通过 Navigator.of(context) 获取当前的 Navigator 对象，然后调用其方法来控制堆栈的操作。
Navigator.of(context).push(MaterialPageRoute(builder: (context) => NextPage())); Navigator.of(context).pop(); // 返回上一页 Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context) => NextPage())); // 替换当前页
自定义路由动画
默认情况下，Flutter 提供了几种内置的路由动画效果。如果我们想自定义这些动画，可以通过继承 PageRoute 类来实现。
创建自定义动画
下面是一个简单的例子，展示了如何创建一个自定义的淡入淡出动画。
-- -------------------- ---- -------
----- --------- ------- ---------------- -
----- ------ -----
------------------- -----------
- ------
------------ --------- ---------- ------------------- -- -----
------------------- --------- ---------- ------------------- ------ -
------ ---------------
-------- ----------
------ ------
--
--
--
---------
-------- --- ------------------ -- ----- ---------------------- -----
-
-- --------
---------------
--------
--------------- ----------------
--路由传值
在导航过程中，我们有时需要向目标页面传递数据。这可以通过构造函数或使用 ModalRoute 来实现。
通过构造函数传递
-- -------------------- ---- -------
----- ------------ ------- --------------- -
----- ------ --------
---------------------------
---------
------ ------------------ -------- -
------ ---------
------- -------
------ ------------
--
----- -------
------ --------------
--
--
-
-
-- ---
---------------
--------
------------------
-------- --------- -- ------------------------
--
--使用 ModalRoute 获取
另一种方式是通过 ModalRoute.of(context)?.settings.arguments 获取参数。
-- -------------------- ---- -------
----- ------------ ------- --------------- -
---------
------ ------------------ -------- -
----- ---- - ------------------------------------------ -- ----------- --------
------ ---------
------- -------
------ ------------
--
----- -------
------ -------------------- -- ----
--
--
-
-
-- ---
--------------------
--------
----------
---------- ----------- -----------
--以上便是 Flutter 中关于导航和路由的基本概念及其实现方法。通过合理运用这些技术，我们可以构建出更加灵活、易用的应用界面。