Flutter自定义Navigation Drawer无法跳转页面、点击后不关闭问题求助

问题根因 #

• 未在MaterialApp中注册路由表：仅定义了Routes常量类，未将路由名称与对应页面绑定到MaterialApp的routes属性，调用pushReplacementNamed时无法匹配到目标路由，无跳转响应。
• 未添加抽屉关闭逻辑：抽屉属于当前页面的弹窗层，跳转前未调用Navigator.pop(context)关闭抽屉，抽屉不会自动消失。
• 需确认目标页面已声明routeName常量：若CandidateForm、Settings、LogOut页面未定义静态routeName字段，Routes类引用的常量值会失效。

修复方案 #

1. 调整SideDrawer组件点击逻辑 #

修改所有ListTile的onTap回调，先关闭抽屉再执行跳转：

class SideDrawer extends StatelessWidget{
  const SideDrawer({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          const DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.greenAccent,
            ),
            child: Text('Welcome!'),
          ),
          ListTile(
            title: const Text('Home'),
            onTap: () {
              Navigator.pop(context);
              Navigator.pushReplacementNamed(context, Routes.home);
            }
          ),
          ListTile(
            title: const Text('Settings'),
            onTap: () {
              Navigator.pop(context);
              Navigator.pushReplacementNamed(context, Routes.settings);
            }
          ),
          ListTile(
            title: const Text('LogOut'),
            onTap: () {
              Navigator.pop(context);
              Navigator.pushReplacementNamed(context, Routes.logout);
            }
          ),
        ],
      ),
    );
  }
}

2. 补充MaterialApp路由表配置 #

在main.dart的MaterialApp中新增routes参数，绑定路由与对应页面：

import 'package:adaptive_layout/widgets/candidate_form.dart';
import 'package:adaptive_layout/widgets/logout.dart';
import 'package:adaptive_layout/widgets/settings.dart';

// 其余import保持不变
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Views',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // 新增路由表
      routes: {
        Routes.home: (context) => const CandidateForm(),
        Routes.settings: (context) => const Settings(),
        Routes.logout: (context) => const LogOut(),
      },
      home: SafeArea(
        child: LayoutBuilder(
          builder: (context, constraints) {
            if(constraints.maxWidth < 600){
              return const MobilePage();
            }
            else if(constraints.maxWidth < 768){
              return const TabletPage();
            }
            else{
              return const DesktopPage();
            } 
          }
        ),
      ),
    );
  }
}

3. 确认目标页面的routeName声明 #

确保所有跳转目标页面都已定义对应的静态routeName常量，示例如下：

// CandidateForm页面示例
class CandidateForm extends StatelessWidget {
  static const String routeName = '/home';
  // 其余页面代码保持不变
}

// Settings页面示例
class Settings extends StatelessWidget {
  static const String routeName = '/settings';
  // 其余页面代码保持不变
}

// LogOut页面示例
class LogOut extends StatelessWidget {
  static const String routeName = '/logout';
  // 其余页面代码保持不变
}

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