页面关闭时重建ChangeNotifier实例的疑问与实现方案

问题描述 #

我做了一个展示ChangeNotifier数据的页面，点击返回按钮关闭页面后再次进入，Text组件里显示的ChangeNotifier数据还是之前的旧值。想请教两个问题：

• ChangeNotifier是单例吗？
• 能不能通过工厂模式实现每次进入页面都创建新的实例？

相关代码 #

登录页面代码 #

@override
Widget build(BuildContext context) {
  loginNotifier = context.watch<LoginNotifier>();

  return Scaffold(
    resizeToAvoidBottomInset: false,
    appBar: AppBar(
      scrolledUnderElevation: 0.0,
      backgroundColor: Colors.transparent,
      actions: [],
      elevation: 0,
    ),
    body: LayoutBuilder(builder: (context, constraint) {
      return SingleChildScrollView(
        child: ConstrainedBox(
          constraints: BoxConstraints(minHeight: constraint.maxHeight),
          child: Padding(
            padding: const EdgeInsets.all(24.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      TextField(
                        decoration: InputDecoration(
                          border: const OutlineInputBorder(),
                          labelText:
                              AppLocalizations.of(context)!.login_enter_email,
                        ),
                        controller: emailController,
                      ),
                      const SizedBox(
                        height: 24,
                      ),
                      Text(loginNotifier?.currentCountry?.localizedName ?? "") // 每次进入都保留上次的值
                    ]),
              ],
            ),
          ),
        ),
      );
    }),
  );
}

App入口代码 #

@override
Widget build(BuildContext context) {
  return MultiProvider(
    providers: [
      ChangeNotifierProvider(create: (context) => LoginNotifier()),
    ],
    child: MaterialApp(
      title: 'App',
      theme: ThemeData(
          primarySwatch: Colors.blue,
          scaffoldBackgroundColor: Color(0xFFF7FCFC),
          useMaterial3: true,
          textTheme: kTextTheme),
      home: const HomePage(),
      localizationsDelegates: const [
        AppLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: AppLocalizations.supportedLocales,
    ),
  );
}

问题解答 #

1. ChangeNotifier本身不是单例 #

你遇到的问题和ChangeNotifier的单例属性无关，核心原因是你把Provider放在了全局作用域。你的ChangeNotifierProvider包裹了整个MaterialApp，这意味着整个App生命周期内只会创建一次LoginNotifier实例，不管你打开、关闭多少次登录页面，都是复用同一个实例，所以数据会保留。

2. 实现每次进入页面创建新实例的方法 #

不需要依赖工厂模式（当然也可以用，但并非必要），核心是缩小Provider的作用域，让它只绑定登录页面的生命周期。

方法一：导航时包裹登录页面

当从首页跳转到登录页时，用ChangeNotifierProvider包裹登录页面，这样每次跳转都会触发create回调生成新实例：

// HomePage中的跳转逻辑示例
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => ChangeNotifierProvider(
      create: (context) => LoginNotifier(),
      child: LoginPage(), // 你的登录页面组件
    ),
  ),
);

同时记得移除原来MultiProvider中的LoginNotifier配置，避免全局实例和页面实例冲突。

方法二：在登录页面内部创建Provider

如果登录页面是独立路由，也可以在页面的build方法里用ChangeNotifierProvider包裹内容，确保每次页面重建（包括重新进入）都生成新实例：

// 修改登录页面的build方法
@override
Widget build(BuildContext context) {
  return ChangeNotifierProvider(
    create: (context) => LoginNotifier(),
    builder: (context, child) {
      final loginNotifier = context.watch<LoginNotifier>();
      return Scaffold(
        // 原有页面内容...
        body: ...
      );
    },
  );
}

关于工厂模式的补充 #

如果一定要用工厂模式实现LoginNotifier的实例创建，只需在类中定义工厂构造函数，然后在Provider的create回调中调用即可：

class LoginNotifier extends ChangeNotifier {
  // 私有构造函数，限制实例创建路径
  LoginNotifier._();

  // 工厂构造函数，自定义实例初始化逻辑
  factory LoginNotifier() {
    final instance = LoginNotifier._();
    // 可以在这里添加默认值初始化等逻辑
    return instance;
  }

  // 你的数据属性和方法...
}

然后在Provider中调用：

ChangeNotifierProvider(create: (context) => LoginNotifier()),

但要注意：工厂模式只是改变实例的创建方式，若不调整Provider的作用域，全局Provider仍会复用同一个实例。

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