DEV Community
·
使用auto_route库的Flutter应用程序、布局小部件和底部导航栏
💡
原文英文，约900词，阅读约需4分钟。
📝
内容提要
本教程介绍如何使用auto_route库创建底部导航栏，包括主页、记忆和个人资料三个独立屏幕。通过AutoTabsScaffold构建导航，并在app_router文件中配置路由，最后创建可重用的布局小部件以简化各屏幕样式设置。
🎯
关键要点
- 本教程介绍如何使用auto_route库创建底部导航栏。
- 底部导航栏包含主页、记忆和个人资料三个独立屏幕。
- 使用AutoTabsScaffold构建导航，确保屏幕代码与导航代码独立。
- 创建三个屏幕：主页、记忆和个人资料，使用RoutePage注解。
- 使用AutoTabsScaffold构建底部导航栏，设置routes和bottomNavigationBuilder。
- 在app_router文件中配置路由，设置主导航屏幕及其子屏幕。
- 创建可重用的布局小部件，以简化各屏幕的样式设置。
- 布局小部件允许添加标题、浮动按钮和操作按钮。
- 建议在主页和记忆屏幕中也使用布局小部件，以便统一样式。
➡️
