Flutter通过List生成的可点击按钮如何为onTap配置独立跳转路由

第一步：修改_MenuItem类，新增路由名称字段 #

给_MenuItem新增routeName属性，用来存储每个菜单对应的跳转路由：

class _MenuItem {
  final IconData icon;
  final String title;
  // 新增路由字段
  final String routeName;

  _MenuItem(this.icon, this.title, this.routeName);
}

第二步：给menuList的每一项配置对应路由 #

按照你实际的路由命名规则，给每个菜单项补充对应的路由名称：

static List menuList = [
  _MenuItem(Icons.person, 'Mayor\'s Office', '/mayorOffice'),
  _MenuItem(Icons.people, 'Employees', '/employees'),
  _MenuItem(Icons.chat, 'WeChat', '/wechat'),
  _MenuItem(Icons.cancel, 'OPEN', '/open'),
  _MenuItem(Icons.business, 'BizList', '/bizList'),
  _MenuItem(Icons.water_damage, 'utilities', '/utilities'),
  _MenuItem(Icons.map, 'Welaka Map', '/welakaMap'),
  _MenuItem(Icons.email, 'Contact Us', '/contactUs'),
  _MenuItem(Icons.info_outline, 'About WelakaOne', '/aboutWelakaOne'),
  _MenuItem(Icons.add, 'About walsh+logic', '/aboutWalshLogic'),
];

第三步：修改onTap跳转逻辑 #

原来的写法错误创建了新的_MenuItem实例，应该直接读取当前索引对应菜单项的routeName字段：

onTap: () {
  Navigator.pushNamed(context, menuList[position].routeName);
},

额外注意事项 #

需要提前在项目根MaterialApp的routes配置中注册所有用到的路由，否则跳转时会抛出路由未找到的异常，配置示例如下：

MaterialApp(
  routes: {
    '/mayorOffice': (context) => MayorOfficePage(),
    '/employees': (context) => EmployeesPage(),
    // 剩余路由依次注册
  },
  // 其他配置
);

内容的提问来源于stack exchange，提问作者user12244565