Flutter：如何仅重建导航栈中的顶部页面

• 全局变量fixedWidgetSize、app_content_height被路由栈内所有CustomAppBar实例共享，任意页面触发setState时，所有依赖这两个变量的组件都会强制重建，栈底页面计算出的尺寸值会覆盖顶层页面的计算结果，直接引发布局错乱。
• 尺寸获取逻辑没有和组件实例绑定，加上Flutter路由栈内的非顶层页面默认会保活、不会被销毁，只要共享状态发生变更，栈内所有页面会同步重建。之前尝试将尺寸逻辑放在initState中不生效的核心原因是：非顶层页面的initState仅在页面首次入栈时执行一次，顶层页面触发的状态变更根本不会触发栈底页面的initState回调，自然无法得到正确的尺寸值。

1. 彻底移除全局尺寸变量，做实例级状态隔离 #

直接删除全局定义的fixedWidgetSize、app_content_height，每个CustomAppBar实例自己持有专属的尺寸状态，从根源上切断跨页面状态污染的路径：

class CustomAppBar extends StatefulWidget {
  final List<Widget> children;
  final Widget? childrenFixed;
  // 保留你原有的其他入参，比如标题、抽屉开关等
  const CustomAppBar({
    super.key,
    required this.children,
    this.childrenFixed,
    /* 其余原有参数 */
  });

  @override
  State<CustomAppBar> createState() => _CustomAppBarState();
}

class _CustomAppBarState extends State<CustomAppBar> {
  // 每个CustomAppBar实例私有持有尺寸状态，不与其他页面共享
  final ValueNotifier<Size> _fixedWidgetSize = ValueNotifier(Size.zero);
  late final double _statusBarHeight;
  late final double _baseAppBarHeight;

  @override
  void initState() {
    super.initState();
    _statusBarHeight = MediaQuery.of(context).padding.top;
    _baseAppBarHeight = kToolbarHeight;
  }

  @override
  void dispose() {
    _fixedWidgetSize.dispose();
    super.dispose();
  }

  // 后续布局逻辑...
}

2. 尺寸计算逻辑绑定当前组件实例 #

原有WidgetSize的尺寸回调只更新当前实例的_fixedWidgetSize，内容区高度直接在当前实例的build阶段实时计算，不需要做全局存储：

// 固定头部组件外层包裹WidgetSize
WidgetSize(
  onChange: (Size newSize) {
    // 仅当尺寸变化、组件当前已挂载时更新当前实例的状态，不影响其他页面
    if (mounted && _fixedWidgetSize.value != newSize) {
      _fixedWidgetSize.value = newSize;
    }
  },
  child: widget.childrenFixed ?? const SizedBox.shrink(),
)

// 内容区高度直接基于当前实例的参数计算
final double contentAreaHeight = MediaQuery.of(context).size.height
    - _statusBarHeight
    - _baseAppBarHeight
    - _fixedWidgetSize.value.height;

3. 收敛setState的重建范围 #

在AllVerifiedUsers页面实现搜索功能时，不要将搜索输入状态放在页面根节点，避免触发整个页面（包括外层CustomAppBar）的全量重建：

• 将搜索列表模块抽离为独立的StatefulWidget，搜索输入、列表数据更新的逻辑全部放在这个独立组件内部，setState只会触发列表本身的重建，不会影响外层CustomAppBar
• 如果使用Provider、Bloc等全局状态管理，给CustomAppBar和搜索列表设置独立的状态订阅范围，搜索输入的状态变化不要通知到CustomAppBar组件

4. （可选加固）给路由页面设置独立存储Key #

给每个路由页面配置唯一的PageStorageKey，保证每个页面的状态存储完全独立，避免状态复用导致的异常：

// 跳转AllVerifiedUsers页面时传入唯一Key
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => const AllVerifiedUsers(
      key: PageStorageKey('all_verified_users_route'),
    ),
  ),
);

修复完成后，可以在每个CustomAppBar的build方法中添加打印日志，搜索框输入触发列表更新时，只有当前顶层的AllVerifiedUsers页面相关组件会执行重建，栈底其他页面的build方法不会被触发，每个页面的固定栏高度、内容区高度都是独立计算的，不会出现布局错乱问题。

通用布局组件开发规范：所有和单页面实例绑定的布局状态、尺寸参数、临时业务值，都应该由组件实例自身持有，禁止使用全局变量存储这类实例相关的状态，从设计层面避免跨页面状态污染。

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