App开发新手咨询：如何为图标添加route跳转至第二屏幕

做第一个App碰到路由问题太正常了，你已经写完icons row布局的话，剩下的配置步骤很少，我以新手最常用的Flutter跨端开发为例给你写可直接跑的实现，如果你用的是其他技术栈（React Native、原生安卓/iOS），贴对应代码我再给你适配版本。

• 首先准备好你的第二屏幕页面组件，就是点击图标之后要展示的那个页面，先把基础布局写好，比如命名为SecondScreen
• 配置路由映射，两种常用方式选一种就行：
  • 不用命名路由的话不需要提前全局配置，跳转的时候直接传组件实例，适合小项目
  • 用命名路由的话，在根入口MaterialApp的routes字段里提前绑定路径和页面的对应关系，适合页面多的项目

// 命名路由全局配置示例，写在main.dart的App入口里
MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => const HomePage(), // 你放icons row的首页
    '/targetPage': (context) => const SecondScreen(), // 第二页的路由映射
  },
)

• 给你要加跳转的图标外层包点击响应组件，推荐用InkWell，自带点击水波纹反馈，比GestureDetector体验好：

// 这部分是你icons row里对应目标图标的代码
InkWell(
  onTap: () {
    // 命名路由跳转调用这行
    Navigator.pushNamed(context, '/targetPage');
    
    // 不用命名路由就替换成下面这段，不需要提前配路由表
    // Navigator.push(
    //   context,
    //   MaterialPageRoute(builder: (context) => const SecondScreen())
    // );
  },
  child: const Icon(
    Icons.settings, // 替换成你自己用的图标资源
    size: 36,
  ),
)

常见踩坑点 #

• 跳转报错提示找不到路由：先检查路由路径拼写是不是完全一致，斜杠、大小写都不能错，再确认SecondScreen组件已经正确导入到当前代码文件
• 点击没反应：先给onTap方法里加个print('点击触发')打日志，看是不是点击事件没绑定上，别把图标写在InkWell的外层了
• 跳过去之后回不来：如果第二页你自己写了AppBar别去掉leading位置的返回按钮，默认的AppBar会自动渲染返回箭头，点击就能回到首页，不需要额外写返回逻辑

要是你跑的时候碰到其他报错，直接贴对应部分的代码和报错日志就行。

内容的提问来源于stack exchange，提问作者Anna Šmite