3 项目命名路由Router组件配置

不知到大家在软件开发过程中,在写页面跳转过程中,反复写重复跳转的代码,那么能不能用key value的形式 /search--键, SearchPage--值对的方式来简化跳转页面实现。

那么话不多说,我们开始来详细描述Tabs组件实现过程:

1 创建1个Routers文件夹,并创建router.dart文件

routers文件夹

2 将封装好的代码copy到router.dart文件里面

3 配置tabs跳转的key和value

配置path

4 MyApp的组件里面添加onGenerateRoute属性并赋值router里面onGenerateRoute,并且initialRoute--/确定根控制器Tabs

红色框路由配置

5 测试编译没有错误的情况下,开始进行在主页添加1个按钮进行测试跳转其他页面功能尝试

  创建Search.dart文件,创建搜索页并添加AppBar和body的UI组件

创建搜索页面

  在router.dart配置搜索页面 1个router的path来实现页面跳转路径

search的path

  在Home主页创建一个按钮,添加跳转时间测试路由

  测试首页按钮跳转搜索页面是否成功

主页按钮跳转
跳转搜索页面
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容