Flutter中Provider状态在页面跳转后为什么会重置？

百里苗苗提问于 2026-02-16 03:57:58 阅读 51

移动

我在用Provider管理登录状态时遇到问题，登录成功后把用户信息存到ChangeNotifier里，但跳转到新页面后数据又变空了。

之前在Vue用类似写法没问题，比如这个组件：


<template>
  <div>
    <button @click="login">登录</button>
    <p>用户名：{{ user.name }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {}
    };
  },
  methods: {
    login() {
      this.user = { name: 'test' };
    }
  }
};
</script>

现在Flutter用Provider实现时，把用户数据存在MyModel里，登录成功后调用了notifyListeners()，但跳转到第二个页面后user就变null了。是不是Provider的context没传对？或者页面重建导致状态丢失？

Flutter 状态管理

我来解答赞 7 收藏

反馈

2 条解答

小维通 Lv1

最简单的办法是确保你在顶层正确初始化了Provider。你可能是每次跳转页面时都重新创建了Provider实例，导致状态重置。

在你的main.dart里，用 ChangeNotifierProvider 包裹整个应用，像这样：

void main() {

  runApp(

    ChangeNotifierProvider(

      create: (_) => MyModel(),

      child: MyApp(),

    ),

  );

}

然后在登录成功后，直接修改 MyModel 里的数据，别再页面里单独创建新的Provider实例。Flutter的context传错了确实会导致这个问题，但通常是你Provider的位置放错了。

2026-02-17 16:05

江梅 ☘︎ Lv1

你这个问题是因为Provider的作用域不对，每次页面跳转都会重新创建新的Provider实例，导致状态丢失。把ChangeNotifierProvider放在MaterialApp的上层，保证全局唯一。

比如这样写：

void main() {

  runApp(

    ChangeNotifierProvider(

      create: (_) => MyModel(),

      child: const MyApp(),

    ),

  );

}



class MyApp extends StatelessWidget {

  const MyApp({Key? key}) : super(key: key);



  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      home: LoginPage(),

      routes: {

        '/home': (context) => HomePage(),

      },

    );

  }

}

另外别忘了在新页面用Provider.of(context)获取状态，别乱用context，不然又会创建新的实例。

2026-02-16 08:03