Flutter中实现单页面多Tab间CustomClass数据共享及实时同步的方法

你的需求核心是让多个Tab页面共享同一份CustomClass数据，并且当输入Tab的数据更新时，其他展示Tab能实时同步。下面我给你提供几种不同复杂度的实现方案，你可以根据自己的场景选择：

方案1：父组件持状态+回调更新（最简单直接） #

这个方案不需要额外依赖，核心思路是在父组件ScreenWithTabs中维护CustomClass的实例，然后把这个实例和一个更新回调传递给子Tab组件。当InputTab中的数据变化时，通过回调通知父组件更新状态，从而触发所有子Tab的重建刷新。

步骤1：定义你的CustomClass（示例） #

class CustomClass {
  String name;
  CustomClass(this.name);
}

步骤2：修改父组件ScreenWithTabs #

class ScreenWithTabs extends StatefulWidget {
  @override
  _ScreenWithTabsState createState() => _ScreenWithTabsState();
}

class _ScreenWithTabsState extends State<ScreenWithTabs> {
  // 初始化CustomClass实例
  CustomClass customClass = CustomClass("");

  // 用于InputTab更新数据的回调函数
  void updateCustomClass(String newName) {
    setState(() {
      customClass.name = newName;
    });
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          bottom: const TabBar(tabs: [
            Tab(text: 'Input Tab'),
            Tab(text: 'Output Tab 1'),
            Tab(text: 'Output Tab 2'),
          ]),
        ),
        body: TabBarView(
          children: [
            // 传递CustomClass实例和更新回调
            InputTab(customClass: customClass, onUpdate: updateCustomClass),
            OutputTab1(customClass: customClass),
            OutputTab2(customClass: customClass),
          ],
        ),
      ),
    );
  }
}

步骤3：实现InputTab组件 #

class InputTab extends StatelessWidget {
  final CustomClass customClass;
  final Function(String) onUpdate;

  const InputTab({
    Key? key,
    required this.customClass,
    required this.onUpdate,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: TextField(
        // 初始化输入框内容为当前CustomClass的name
        controller: TextEditingController(text: customClass.name),
        // 输入变化时调用回调更新父组件状态
        onChanged: onUpdate,
        decoration: const InputDecoration(
          labelText: 'Enter Name',
          border: OutlineInputBorder(),
        ),
      ),
    );
  }
}

步骤4：实现OutputTab1和OutputTab2 #

class OutputTab1 extends StatelessWidget {
  final CustomClass customClass;

  const OutputTab1({Key? key, required this.customClass}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Output 1: ${customClass.name}'),
    );
  }
}

class OutputTab2 extends StatelessWidget {
  final CustomClass customClass;

  const OutputTab2({Key? key, required this.customClass}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Output 2: ${customClass.name.toUpperCase()}'),
    );
  }
}

方案2：ValueNotifier+ValueListenableBuilder（局部刷新，性能更好） #

如果你的数据会频繁更新，不想每次更新都重建整个Tab页面，可以用ValueNotifier来监听数据变化，只有需要展示数据的组件会局部刷新。

步骤1：修改父组件 #

class ScreenWithTabs extends StatefulWidget {
  @override
  _ScreenWithTabsState createState() => _ScreenWithTabsState();
}

class _ScreenWithTabsState extends State<ScreenWithTabs> {
  // 用ValueNotifier包裹CustomClass，用于监听数据变化
  final ValueNotifier<CustomClass> customClassNotifier = ValueNotifier(CustomClass(""));

  @override
  void dispose() {
    // 记得销毁ValueNotifier，避免内存泄漏
    customClassNotifier.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          bottom: const TabBar(tabs: [
            Tab(text: 'Input Tab'),
            Tab(text: 'Output Tab 1'),
            Tab(text: 'Output Tab 2'),
          ]),
        ),
        body: TabBarView(
          children: [
            InputTabWithNotifier(notifier: customClassNotifier),
            OutputTab1WithNotifier(notifier: customClassNotifier),
            OutputTab2WithNotifier(notifier: customClassNotifier),
          ],
        ),
      ),
    );
  }
}

步骤2：实现InputTabWithNotifier #

class InputTabWithNotifier extends StatelessWidget {
  final ValueNotifier<CustomClass> notifier;

  const InputTabWithNotifier({Key? key, required this.notifier}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: TextField(
        controller: TextEditingController(text: notifier.value.name),
        onChanged: (value) {
          // 更新ValueNotifier的值，触发监听者刷新
          notifier.value = CustomClass(value);
        },
        decoration: const InputDecoration(
          labelText: 'Enter Name',
          border: OutlineInputBorder(),
        ),
      ),
    );
  }
}

步骤3：实现OutputTab1WithNotifier #

class OutputTab1WithNotifier extends StatelessWidget {
  final ValueNotifier<CustomClass> notifier;

  const OutputTab1WithNotifier({Key? key, required this.notifier}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 使用ValueListenableBuilder监听数据变化，局部刷新
    return ValueListenableBuilder<CustomClass>(
      valueListenable: notifier,
      builder: (context, currentValue, child) {
        return Center(
          child: Text('Output 1: ${currentValue.name}'),
        );
      },
    );
  }
}

OutputTab2的实现和OutputTab1类似，只需要替换展示逻辑即可。

方案3：Provider状态管理（适合大型应用） #

如果你的应用比较复杂，多个页面都需要共享这份数据，推荐使用Provider这类状态管理库，它能让你更优雅地在组件树中共享状态，不需要手动传递数据和回调。

步骤1：添加依赖 #

在pubspec.yaml中添加provider依赖：

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.5

步骤2：创建ChangeNotifier类 #

class CustomClassProvider extends ChangeNotifier {
  String _name = "";

  String get name => _name;

  // 更新数据并通知所有监听者
  void updateName(String newName) {
    _name = newName;
    notifyListeners();
  }
}

步骤3：修改父组件提供Provider #

class ScreenWithTabs extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 在组件树中提供CustomClassProvider
    return ChangeNotifierProvider(
      create: (context) => CustomClassProvider(),
      child: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: const TabBar(tabs: [
              Tab(text: 'Input Tab'),
              Tab(text: 'Output Tab 1'),
              Tab(text: 'Output Tab 2'),
            ]),
          ),
          body: const TabBarView(
            children: [
              InputTabWithProvider(),
              OutputTab1WithProvider(),
              OutputTab2WithProvider(),
            ],
          ),
        ),
      ),
    );
  }
}

步骤4：实现InputTabWithProvider #

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

  @override
  Widget build(BuildContext context) {
    // 获取Provider实例，listen: false表示不需要监听变化（只写操作）
    final provider = Provider.of<CustomClassProvider>(context, listen: false);
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: TextField(
        onChanged: (value) {
          provider.updateName(value);
        },
        decoration: const InputDecoration(
          labelText: 'Enter Name',
          border: OutlineInputBorder(),
        ),
      ),
    );
  }
}

步骤5：实现OutputTab1WithProvider #

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

  @override
  Widget build(BuildContext context) {
    // 获取Provider实例，默认listen: true，监听数据变化自动刷新
    final name = Provider.of<CustomClassProvider>(context).name;
    return Center(
      child: Text('Output 1: $name'),
    );
  }
}

方案选择建议 #

• 方案1：适合小型项目或简单的Tab页面，实现成本最低，代码直观。
• 方案2：适合数据频繁更新的场景，能减少不必要的组件重建，提升性能。
• 方案3：适合中大型应用，当多个页面、多个组件都需要共享状态时，能让代码结构更清晰。

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