Flutter中如何为Drawer内的每个_buildRow添加页面导航功能？

步骤1：修改_buildRow函数，添加点击回调参数 #

首先给_buildRow新增一个可选的onTap回调参数，用来绑定点击事件。如果你的_buildRow原本返回ListTile，直接利用其自带的onTap属性即可：

Widget _buildRow(IconData icon, String title, {VoidCallback? onTap}) {
  return ListTile(
    leading: Icon(icon, color: Colors.white),
    title: Text(title, style: TextStyle(color: Colors.white)),
    onTap: onTap, // 绑定点击回调
  );
}

如果是自定义布局的_buildRow，用InkWell包裹组件来处理点击：

Widget _buildRow(IconData icon, String title, {VoidCallback? onTap}) {
  return InkWell(
    onTap: onTap,
    child: Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      child: Row(
        children: [
          Icon(icon, color: Colors.white),
          SizedBox(width: 16),
          Text(title, style: TextStyle(color: Colors.white)),
        ],
      ),
    ),
  );
}

步骤2：为每个菜单项添加导航逻辑 #

在_buildDrawer中调用_buildRow时，传入对应的onTap回调，注意点击后先关闭Drawer再跳转页面，以下是两种常用实现方式：

方式1：直接使用MaterialPageRoute跳转

适合不需要全局路由配置的场景：

_buildRow(Icons.home, "Home", onTap: () {
  Navigator.pop(context); // 关闭侧边栏
  Navigator.push(context, MaterialPageRoute(builder: (context) => HomeScreen()));
}),
_buildDivider(),
_buildRow(Icons.person_pin, "Your profile", onTap: () {
  Navigator.pop(context);
  Navigator.push(context, MaterialPageRoute(builder: (context) => YourProfileScreen()));
}),
_buildDivider(),
_buildRow(Icons.settings, "Settings", onTap: () {
  Navigator.pop(context);
  Navigator.push(context, MaterialPageRoute(builder: (context) => SettingsScreen()));
}),
// 其余菜单项按相同逻辑补充

方式2：使用命名路由（更易维护）

先在项目的MaterialApp中配置全局路由：

MaterialApp(
  initialRoute: '/profile',
  routes: {
    '/profile': (context) => ProfileScreen(), // 当前页面
    '/home': (context) => HomeScreen(),
    '/your-profile': (context) => YourProfileScreen(),
    '/settings': (context) => SettingsScreen(),
    '/contact-us': (context) => ContactUsScreen(),
    '/help': (context) => HelpScreen(),
  },
)

然后在_buildRow的onTap中调用pushNamed：

_buildRow(Icons.home, "Home", onTap: () {
  Navigator.pop(context);
  Navigator.pushNamed(context, '/home');
}),
_buildDivider(),
_buildRow(Icons.person_pin, "Your profile", onTap: () {
  Navigator.pop(context);
  Navigator.pushNamed(context, '/your-profile');
}),
// 其余菜单项按相同逻辑补充

注意事项 #

• 确保_buildDrawer能获取到BuildContext，若之前未传参，修改函数定义为_buildDrawer(BuildContext context)，调用时传入context。
• 跳转目标页面（如HomeScreen、SettingsScreen等）需提前创建对应的Stateful/Stateless Widget。

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