Flutter如何实现点击AppBar的图片标题跳转至首页

你当前的代码报错核心原因有两个：

• 把AppBar定义为全局final常量，无法获取路由操作依赖的BuildContext上下文
• title位的Logo组件没有绑定点击监听事件，无法响应点击操作

改造步骤 #

1. 废弃全局静态AppBar的写法，将其封装为可接收BuildContext参数的通用构建方法，保证路由操作能拿到有效上下文
2. 给Logo组件外层包裹手势监听组件，绑定跳转首页的路由逻辑
3. 补充centerTitle: false配置，适配安卓端默认title居中的规则，实现左侧展示Logo的商城类导航布局

改造后可复用AppBar代码 #

把你单独抽离的dart文件内容替换为如下代码：

import 'package:flutter/material.dart';

PreferredSizeWidget buildCommonAppBar(BuildContext context) {
  return AppBar(
    // 关闭title居中，让Logo默认靠左展示
    centerTitle: false,
    backgroundColor: Colors.black,
    actions: <Widget>[
      Padding(
        padding: const EdgeInsets.only(right: 35.0),
        child: GestureDetector(
          onTap: () {
            // 汉堡菜单点击逻辑，示例为打开端侧抽屉，可根据需求替换
            Scaffold.of(context).openEndDrawer();
          },
          child: const Icon(Icons.menu),
        ),
      ),
    ],
    title: GestureDetector(
      onTap: () {
        // 点击Logo返回首页，清空页面栈避免重复堆积首页实例
        Navigator.of(context).popUntil((route) => route.isFirst);
        // 如果你使用命名路由，也可以替换为对应命名路由跳转逻辑
        // Navigator.of(context).pushReplacementNamed('/home');
      },
      child: Image.asset(
        'images/logo.png',
        fit: BoxFit.scaleDown,
        height: 30,
        width: 200,
      ),
    ),
  );
}

调用方式 #

在任意页面的Scaffold中使用时，传入当前页面的buildContext即可，无需重复编写AppBar代码：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: buildCommonAppBar(context),
    // 其余页面组件
    body: const Center(
      child: Text('页面内容'),
    ),
  );
}

注意事项 #

• 若需要适配全局抽屉，记得在Scaffold外层配置endDrawer参数对应抽屉内容
• 不要在无上下文的全局静态位置直接调用路由相关方法，所有路由操作必须绑定有效页面BuildContext
• 如果你的首页不是路由栈初始页，把跳转逻辑替换为对应命名路由跳转即可

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