如何在Flutter自定义AppBar的onPressed中跳转至登录页面？

嘿，我来帮你解决这个页面跳转的问题！要实现点击登录图标跳转到登录页面，我们需要用到Flutter的Navigator组件，针对你自定义的AppBar，有两种常用的方案，我都给你详细拆解一下：

方案一：直接在自定义AppBar中实现跳转（需处理Context） #

因为你是直接继承AppBar，如果直接在构造函数的IconButton里使用context会报错——此时组件还未完成构建，拿不到有效的BuildContext。我们可以用Builder组件包裹IconButton，它会提供当前子树的有效Context，这样就能正常调用Navigator了。

修改后的完整代码：

class MyApplicationBar extends AppBar { 
  MyApplicationBar({Key? key, Widget? title}) : super(
    key: key, 
    title: title, 
    actions: <Widget>[ 
      // 用Builder包裹获取有效Context
      Builder(
        builder: (context) => IconButton( 
          icon: const Icon(Icons.lock), 
          tooltip: 'Login', 
          onPressed: () { 
            // 跳转到登录页面，请确保你已创建LoginPage组件
            Navigator.of(context).push(
              MaterialPageRoute(builder: (context) => const LoginPage()),
            );
          }, 
        ),
      ),
      IconButton( 
        icon: const Icon(Icons.supervised_user_circle), 
        tooltip: 'Accounts', 
        onPressed: () { }, 
      ), 
    ]); 
}

方案二：通过回调让父页面处理跳转（更灵活，推荐） #

这种方式更符合组件解耦的设计原则——自定义AppBar只负责展示UI，跳转逻辑完全交给使用它的父页面来处理。后续如果需要修改跳转逻辑（比如改成弹出登录弹窗），不用改动AppBar的代码，扩展性更强。

第一步：修改自定义AppBar的构造函数，添加回调参数 #

class MyApplicationBar extends AppBar {
  // 定义登录按钮点击的回调函数
  final VoidCallback? onLoginPressed;

  MyApplicationBar({Key? key, Widget? title, this.onLoginPressed}) : super(
    key: key,
    title: title,
    actions: <Widget>[
      IconButton(
        icon: const Icon(Icons.lock),
        tooltip: 'Login',
        // 触发父页面传递的回调
        onPressed: onLoginPressed,
      ),
      IconButton(
        icon: const Icon(Icons.supervised_user_circle),
        tooltip: 'Accounts',
        onPressed: () {},
      ),
    ]);
}

第二步：在使用AppBar的父页面中实现跳转逻辑 #

比如在首页使用时：

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyApplicationBar(
        title: const Text('首页'),
        onLoginPressed: () {
          // 执行页面跳转
          Navigator.of(context).push(
            MaterialPageRoute(builder: (context) => const LoginPage()),
          );
        },
      ),
      body: const Center(child: Text('首页内容区域')),
    );
  }
}

⚠️ 注意：请确保你已经创建了LoginPage这个页面组件，否则代码会出现未定义的错误哦！

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