Material Design 是 Google 推出的一套设计语言，旨在为移动设备和 Web 应用程序提供一致的视觉和交互体验。其中，AppBar 和 Navigation 是 Material Design 中非常重要的组件，本文将介绍如何使用 AppBar 和 Navigation 实现一个完整的页面布局。
AppBar
AppBar 是 Material Design 中的顶部栏，通常包含应用程序的名称、菜单和其他操作按钮。在实际开发中，我们可以使用 AppBar 来实现以下功能：
- 显示应用程序的名称和图标
- 提供导航和搜索功能
- 显示通知和消息
- 提供操作按钮和菜单
在 Flutter 中，AppBar 是由 AppBar 组件实现的。例如，我们可以使用以下代码创建一个简单的 AppBar：
-- -------------------- ---- -------
-------
------ -------------- ------ -----
-------- -
-----------
----- -------------------
---------- -- -
-- ----- ------
--
--
-----------
----- --------------------------
---------- -- -
-- ----- -------
--
--
----------------
------------ ------------- -------- -
------ -
--------------
------ -----------
------ -----------
--
--------------
------ -----------
------ -------
--
--
--
----------- ------- -
-- ----- ------
--
--
--
-在上述代码中，我们创建了一个包含标题、搜索按钮、通知按钮和菜单的 AppBar。其中，IconButton 是一个带有图标的按钮，PopupMenuButton 是一个带有弹出菜单的按钮。
Navigation
Navigation 是 Material Design 中的导航组件，通常用于显示应用程序的页面结构和内容。在实际开发中，我们可以使用 Navigation 来实现以下功能：
- 显示页面结构和内容
- 提供页面之间的导航和跳转
- 显示页面的标题和内容
- 提供页面操作和菜单
在 Flutter 中，Navigation 是由路由（Route）和 Navigator 组件实现的。例如，我们可以使用以下代码创建一个包含两个页面的 Navigation：
-- -------------------- ---- -------
----- ----- ------- --------------- -
---------
------ ------------------ -------- -
------ ------------
------ --------- ------ ----
----- -----------
------- -
-------- --------- -- -----------
----------- --------- -- --------------
--
--
-
-
----- -------- ------- --------------- -
---------
------ ------------------ -------- -
------ ---------
------- -------
------ -----------
--
----- -------
------ -------------
------ ---------------
---------- -- -
---------------------------- ------------
--
--
--
--
-
-
----- ----------- ------- --------------- -
---------
------ ------------------ -------- -
------ ---------
------- -------
------ -------------
--
----- -------
------ -------------
------ -------------
---------- -- -
-----------------------
--
--
--
--
-
-在上述代码中，我们创建了一个包含两个页面的 Navigation。其中，MaterialApp 是一个包含路由配置的应用程序组件，HomePage 和 ProfilePage 是两个页面组件，Navigator 是一个用于页面导航的组件。
在 HomePage 中，我们使用 RaisedButton 组件创建了一个按钮，并在按钮的 onPressed 事件中使用 Navigator.pushNamed 方法跳转到 ProfilePage 页面。在 ProfilePage 中，我们使用 RaisedButton 组件创建了一个按钮，并在按钮的 onPressed 事件中使用 Navigator.pop 方法返回到上一个页面。
Navigation Drawer
Navigation Drawer 是 Material Design 中的侧边栏，通常用于显示应用程序的导航菜单和设置。在实际开发中，我们可以使用 Navigation Drawer 来实现以下功能：
- 显示应用程序的导航菜单和设置
- 提供页面之间的导航和跳转
- 显示页面的标题和内容
- 提供页面操作和菜单
在 Flutter 中，Navigation Drawer 是由 Drawer 组件实现的。例如，我们可以使用以下代码创建一个包含 Navigation Drawer 的页面：
-- -------------------- ---- -------
----- ----- ------- --------------- -
---------
------ ------------------ -------- -
------ ------------
------ --------- ------ ----
----- -----------
------- -
-------- --------- -- -----------
----------- --------- -- --------------
--
--
-
-
----- -------- ------- --------------- -
---------
------ ------------------ -------- -
------ ---------
------- -------
------ -----------
--
------- -------
------ ---------
-------- ----------------
--------- -
-------------
------ -------------- ------ -----
----------- --------------
------ ------------
--
--
---------
------ -----------
------ -- -
-----------------------
---------------------------- ---------
--
--
---------
------ -------------
------ -- -
-----------------------
---------------------------- ------------
--
--
--
--
--
----- -------
------ -------------
------ ---------------
---------- -- -
---------------------------- ------------
--
--
--
--
-
-
----- ----------- ------- --------------- -
---------
------ ------------------ -------- -
------ ---------
------- -------
------ -------------
--
----- -------
------ -------------
------ -------------
---------- -- -
-----------------------
--
--
--
--
-
-在上述代码中，我们创建了一个包含 Navigation Drawer 的页面。其中，Drawer 是一个包含菜单项的组件，DrawerHeader 是一个包含标题和图标的组件，ListTile 是一个表示菜单项的组件。
在 HomePage 中，我们使用 Drawer 组件创建了一个 Navigation Drawer，并在其中添加了两个菜单项。在菜单项的 onTap 事件中，我们使用 Navigator.pop 方法关闭 Navigation Drawer，并使用 Navigator.pushNamed 方法跳转到对应的页面。在 ProfilePage 中，我们使用 RaisedButton 组件创建了一个按钮，并在按钮的 onPressed 事件中使用 Navigator.pop 方法返回到上一个页面。
总结
本文介绍了 Material Design 中的 AppBar 和 Navigation 组件，并通过示例代码演示了如何使用 AppBar 和 Navigation 实现一个完整的页面布局。在实际开发中，我们可以根据具体的需求和设计要求，灵活使用 AppBar 和 Navigation 来实现各种功能和效果，提高应用程序的用户体验和可用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650e41f295b1f8cacd77fac6