如何在Flutter的PageView中通过Provider管理多页面TextEditingControllers

问题背景 #

开发技术人员注册的Flutter应用时，长表单通过PageView拆分为多页，每页包含独立TextField（含必填/可选项）和TextEditingController。使用Provider做状态管理，核心需求：

1. 每次进入RegistrationPage时创建全新控制器，确保表单初始状态干净；
2. 离开RegistrationPage时正确销毁控制器，避免出现“已销毁控制器被使用”的异常。

当前使用静态控制器导致页面销毁后复用控制器时触发异常，需重构实现方案。

最佳实现方案 #

1. 创建表单状态管理类 #

定义继承自ChangeNotifier的状态类，统一管理所有表单控制器的创建与销毁：

import 'package:flutter/material.dart';

class RegistrationFormProvider extends ChangeNotifier {
  late TextEditingController page1Controller1;
  late TextEditingController page1Controller2;
  late TextEditingController page2Controller1;
  late TextEditingController page2Controller2;

  // 构造函数初始化所有控制器
  RegistrationFormProvider() {
    _initControllers();
  }

  void _initControllers() {
    page1Controller1 = TextEditingController();
    page1Controller2 = TextEditingController();
    page2Controller1 = TextEditingController();
    page2Controller2 = TextEditingController();
  }

  // 销毁所有控制器，避免内存泄漏
  @override
  void dispose() {
    page1Controller1.dispose();
    page1Controller2.dispose();
    page2Controller1.dispose();
    page2Controller2.dispose();
    super.dispose();
  }

  // 可选：重置表单状态（页面内重新初始化时调用）
  void resetForm() {
    // 先销毁旧控制器
    page1Controller1.dispose();
    page1Controller2.dispose();
    page2Controller1.dispose();
    page2Controller2.dispose();
    // 重新初始化
    _initControllers();
    notifyListeners();
  }
}

2. 修改RegistrationPage注入Provider #

用ChangeNotifierProvider包裹RegistrationPage内容，确保每次进入页面创建全新状态实例，页面销毁时自动触发dispose：

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

class RegistrationPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      // 每次进入页面创建新的状态实例
      create: (_) => RegistrationFormProvider(),
      child: Scaffold(
        appBar: AppBar(title: const Text('Technician Registration')),
        body: Column(
          children: [
            const Expanded(
              child: PageView(
                children: [
                  Page1(),
                  Page2(),
                ],
              ),
            ),
            ElevatedButton(
              onPressed: () {
                // 获取状态实例（listen: false 避免不必要的UI重建）
                final formProvider = Provider.of<RegistrationFormProvider>(context, listen: false);
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context) => AnotherPage(
                      // 建议传递文本值而非控制器本身，避免控制器销毁后报错
                      value1: formProvider.page1Controller1.text,
                      value2: formProvider.page1Controller2.text,
                      value3: formProvider.page2Controller1.text,
                      value4: formProvider.page2Controller2.text,
                    ),
                  ),
                );
              },
              child: const Text('Go to Another Page'),
            ),
          ],
        ),
      ),
    );
  }
}

3. 修改子页面获取控制器 #

移除子页面的静态控制器，通过Provider从上下文中获取状态实例：

Page1修改后：

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

class Page1 extends StatelessWidget {
  const Page1({super.key});

  @override
  Widget build(BuildContext context) {
    final formProvider = Provider.of<RegistrationFormProvider>(context);
    return Column(
      children: [
        TextField(controller: formProvider.page1Controller1),
        TextField(controller: formProvider.page1Controller2),
      ],
    );
  }
}

Page2修改后：

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

class Page2 extends StatelessWidget {
  const Page2({super.key});

  @override
  Widget build(BuildContext context) {
    final formProvider = Provider.of<RegistrationFormProvider>(context);
    return Column(
      children: [
        TextField(controller: formProvider.page2Controller1),
        TextField(controller: formProvider.page2Controller2),
      ],
    );
  }
}

方案优势 #

• 生命周期对齐：RegistrationPage创建时自动初始化控制器，页面销毁时自动销毁控制器，完全匹配页面生命周期；
• 状态隔离：每次进入页面都是全新的状态实例，不会出现旧数据残留；
• 避免异常：彻底移除静态控制器，从根源上解决“已销毁控制器被使用”的问题；
• 可扩展性：状态类中可轻松添加表单验证、数据提交等逻辑，统一管理表单状态。

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