Flutter自定义AppBar跨页面复用后返回功能失效，该如何正确编写代码？

问题核心原因 #

• 你的VideoAppBar当前定义了完整的Scaffold结构，而不是单独的AppBar组件，你试图把整个带Scaffold的组件塞到另一个Scaffold的title属性里，结构完全错位
• 你代码里的WillPopScope返回了Future(()=>false)，直接拦截了系统返回手势，也会导致返回失效

正确的可复用AppBar实现 #

AppBar本质是实现了PreferredSizeWidget接口的组件，我们直接按这个规范定义通用组件，同时预留可配置参数适配不同页面需求：

import 'package:flutter/material.dart';

class VideoAppBar extends PreferredSizeWidget {
  // 可配置参数，预留默认值降低复用成本
  final String title;
  final TextStyle? titleStyle;
  final Color? backgroundColor;
  final Widget? leading;
  final List<Widget>? actions;
  final bool centerTitle;
  final VoidCallback? onBackTap; // 自定义返回点击事件，不传则默认执行页面返回

  const VideoAppBar({
    super.key,
    required this.title,
    this.titleStyle,
    this.backgroundColor = Colors.white,
    this.leading,
    this.actions,
    this.centerTitle = true,
    this.onBackTap,
  });

  // 与系统默认AppBar高度保持一致
  @override
  Size get preferredSize => const Size.fromHeight(kToolbarHeight);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      backgroundColor: backgroundColor,
      elevation: 0,
      centerTitle: centerTitle,
      title: Text(
        title,
        style: titleStyle ?? const TextStyle(
          color: Colors.black,
          fontSize: 20,
        ),
      ),
      leading: leading ?? IconButton(
        onPressed: onBackTap ?? () => Navigator.pop(context),
        color: Colors.black,
        iconSize: 25,
        icon: const Icon(Icons.arrow_back),
      ),
      actions: actions ?? [
        IconButton(
          icon: const Icon(Icons.bookmark_outline),
          iconSize: 25,
          color: Colors.black,
          onPressed: () {
            print('GD');
          }
        ),
      ],
    );
  }
}

调用方法 #

直接在各页面的Scaffold的appBar属性传入即可，不需要额外套AppBar组件：

// 业务页面示例代码
Scaffold(
  appBar: VideoAppBar(title: '当前页面标题'),
  body: const Center(child: Text('页面内容')),
)

常见自定义场景示例 #

• 自定义标题样式：VideoAppBar(title: '测试页面', titleStyle: TextStyle(color: Colors.red, fontSize: 22))
• 自定义返回逻辑：VideoAppBar(title: '特殊页面', onBackTap: () { /* 自定义返回处理逻辑 */ })
• 替换右侧操作按钮：VideoAppBar(title: '分享页面', actions: [IconButton(onPressed: (){}, icon: Icon(Icons.share))])

注意：如果需要拦截页面返回逻辑，请在对应业务页面的Scaffold外层加WillPopScope处理，不要把页面级的拦截逻辑写到通用AppBar组件里。

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