如何修改Flutter AppBar返回按钮功能，实现点击跳转首页？

默认的BackButton只会执行Navigator.pop返回上一页，要实现点击跳首页，你需要自定义AppBar的leading组件，替换成可点击的自定义按钮：

修改后的代码示例 #

appBar: AppBar(
  backgroundColor: Colors.transparent,
  elevation: 0,
  leading: GestureDetector(
    onTap: () {
      // 方式1：用命名路由跳转（需提前配置路由表）
      Navigator.pushReplacementNamed(context, '/home');
      
      // 方式2：直接跳转首页组件，同时清除所有之前的路由栈（更彻底）
      // Navigator.pushAndRemoveUntil(
      //   context,
      //   MaterialPageRoute(builder: (context) => HomePage()), // 替换成你的首页组件
      //   (route) => false, // 清除所有之前的页面
      // );
    },
    child: const Icon(
      Icons.arrow_back, // 和默认返回按钮图标一致
      color: Color(0xFFFD879A), // 保持原有的颜色
    ),
  ),
),

关键说明 #

• 用GestureDetector包裹图标，实现自定义点击事件，替代默认BackButton的固定逻辑
• 如果你的项目用了命名路由，用pushReplacementNamed会替换当前页面，避免用户返回时回到当前页
• 如果需要彻底清除路由栈（比如从多级页面直接回首页，不想让用户再返回之前的页面），用pushAndRemoveUntil更合适，(route) => false表示移除所有之前的路由

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