Flutter 从两个不同类控制计数器并在公共AppBar同步显示的问题

问题根因 #

• AppBar计数器报错：你自定义的Counter组件build方法返回了Scaffold（页面顶层布局容器），但AppBar的actions属性仅接受可直接嵌入工具栏的小型Widget，嵌套层级冲突导致布局异常。
• 跨组件/页面无法触发计数：计数器状态_counter和增量方法_incrementCounter是CounterState的私有成员，外部类没有访问权限；同时每次页面跳转时Counter组件会重新初始化，私有状态会被重置，无法跨页面共享。

修复思路 #

采用Flutter自带的ValueNotifier实现全局状态共享，无需引入第三方依赖，对新手友好：

1. 全局定义可监听的计数器对象，所有页面和组件都可以直接访问修改
2. 简化Counter组件，仅做计数展示，通过监听ValueNotifier自动更新UI
3. 两个页面的按钮直接修改全局计数器的值即可触发全局更新

完整可运行修复代码 #

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

// 全局可监听计数器，跨页面共享状态
final ValueNotifier<int> counter = ValueNotifier(1);

class TestClass1 extends StatefulWidget {
  @override
  TestClass1State createState() => TestClass1State();
}

class TestClass2 extends StatefulWidget {
  @override
  TestClass2State createState() => TestClass2State();
}

class Counter extends StatelessWidget {
  const Counter({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 监听计数器变化自动更新UI
    return ValueListenableBuilder<int>(
      valueListenable: counter,
      builder: (context, value, child) {
        return Padding(
          padding: const EdgeInsets.only(right: 16),
          child: Center(
            child: Text(
              '$value',
              style: Theme.of(context).textTheme.headline4?.copyWith(color: Colors.white),
            ),
          ),
        );
      },
    );
  }
}

class AppBarShared extends StatelessWidget implements PreferredSizeWidget {
  final Color backgroundColor = Colors.red;
  final Text title;
  final AppBar appBar;
  final List<Widget> widgets;

  const AppBarShared({required this.title, required this.appBar, required this.widgets});

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: title,
      backgroundColor: backgroundColor,
      actions: const <Widget>[Counter()],
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(appBar.preferredSize.height);
}

class TestClass1State extends State<TestClass1> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBarShared(
        title: const Text('title'),
        appBar: AppBar(),
        widgets: [widget],
      ),
      body: Container(
        child: Stack(
          children: [
            IconButton(
                iconSize: 40,
                onPressed: () {
                  // 直接修改全局计数器值即可触发更新
                  counter.value++;
                },
                icon:const Icon(Icons.arrow_upward, color:Colors.amber)
            ),
            button1(),
          ],
        ),
      ),
    );
  }

  Container button1() {
    return Container(
      child: Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          IconButton(
              iconSize: 40,
              onPressed: () => Navigator.pushReplacement(
                context,
                PageRouteBuilder(
                  pageBuilder: (context, animation1, animation2) => TestClass2(),
                  transitionDuration: Duration.zero,
                ),
              ),
              icon:const Icon(Icons.arrow_upward, color:Colors.amber)
          )
        ],
      ),
    );
  }
}

class TestClass2State extends State<TestClass2> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBarShared(
        title: const Text('title 2'),
        appBar: AppBar(),
        widgets: [widget],
      ),
      body: Container(
        child: Stack(
          children: [
            IconButton(
                iconSize: 40,
                onPressed: () {
                  // 直接修改全局计数器值即可触发更新
                  counter.value++;
                },
                icon:const Icon(Icons.arrow_upward, color:Colors.amber)
            ),
            button2(),
          ],
        ),
      ),
    );
  }

  Container button2() {
    return Container(
      child: Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          IconButton(
              iconSize: 40,
              onPressed: () => Navigator.pushReplacement(
                context,
                PageRouteBuilder(
                  pageBuilder: (context, animation1, animation2) => TestClass1(),
                  transitionDuration: Duration.zero,
                ),
              ),
              icon: const Icon(Icons.arrow_upward, color: Colors.amber)
          )
        ],
      ),
    );
  }
}

关键修改说明 #

• 新增全局ValueNotifier<int> counter：状态存储在全局内存中，页面跳转不会重置，所有组件都可以直接访问
• 重构Counter组件为无状态组件：通过ValueListenableBuilder监听计数器变化，不需要自己维护状态，同时移除了错误嵌套的Scaffold，仅返回纯文本展示组件适配AppBar的actions要求
• 两个页面的增量按钮直接修改counter.value：修改后全局所有监听该计数器的组件都会自动更新UI，不需要跨组件传递方法

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