时间戳

首页 > 解决方案 > Provider 中的监听器在 Flutter 中是如何工作的？

flutter - Provider 中的监听器在 Flutter 中是如何工作的？

问题描述

我正在使用 Provider 包来处理来自不同位置的数据。对于这个问题，我创建了一个示例项目，其中包含一个显示登录按钮的欢迎屏幕，单击后，它会重定向到登录屏幕，其中有登录文本字段，但现在，我放置了一个单击调用的按钮login 函数，并且该 login 函数通知侦听器。我还有一个注销功能和布尔值，用于跟踪登录状态。

这些函数和值驻留auth.provider.dart在 lib 文件夹的 providers 目录中的一个文件中。

import 'package:flutter/foundation.dart';

class Auth with ChangeNotifier {
  var _loggedIn = false;

  bool get loggedIn => _loggedIn;

  void loginUser() {
    _loggedIn = true;
    print('Logged in');
    notifyListeners();
  }

  void logout() {
    _loggedIn = false;
    print('Logged out');
    notifyListeners();
  }
}

我在 main.dart 中提供提供者并使用消费者：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider<Auth>(
      create: (_) => Auth(),
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: Consumer<Auth>(
          builder: (_, auth, __) {
            print('main.dart logged in: ${auth.loggedIn}');
            if(auth.loggedIn) return HomeScreen();
            return WelcomeScreen();
          },
        ),
        routes: {
          LoginScreen.routeName: (ctx) => LoginScreen(),
          HomeScreen.routeName: (ctx) => HomeScreen(),
        },
      ),
    );
  }
}

在上面的文件中，我只是检查是否loggedIn为真。如果不是，则显示欢迎屏幕，以便用户可以登录，但如果用户已登录，则直接显示主屏幕。还在 Consumer 的构建器中放置了一条打印语句，以便在收到有关身份验证数据的任何更改的通知时打印状态。这会在应用程序启动时运行一次，然后再也不运行。

登录界面没有太多内容，只有一个脚手架和一个调用登录功能的登录按钮。

RaisedButton(
    child: Text('Click to Login'),
    onPressed: () {
      Provider.of<Auth>(context, listen: false).loginUser();
    },
),

现在单击登录按钮时，它将loggedIn布尔值设置为 true 并通知应该是 Consumer 的侦听器，但 main.dart 中的 Consumer 永远不会被通知它。它不会触发更改，有一个条件是检查登录是否为真，然后显示主屏幕，但屏幕根本没有改变。必须手动使用Navigator才能移至主屏幕，并且在主屏幕上有一个注销按钮，该按钮简单地设置loggedIn为 false，一旦发生这种情况，它应该通知消费者，但它再次没有。

现在让我想到一个问题：Provider 中的侦听器是如何工作的？它什么时候通知监听器的变化？如果更改发生在上面的示例中超过一个级别，它是否不会通知， Consumer 位于 main.dart 并且更改发生在 2 个级别 down main.dart > WelcomeScreen > LoginScreen。如何让消费者main.dart知道它使用的基础数据已经改变？

如果您想快速开始使用上面的示例，这里是存储库链接。

标签： flutterdartflutter-provider

解决方案

我浏览了你的 github 代码。

使用 pushReplacementNamed 进入登录屏幕

最初->main.dart->welcomeScreen->(on-clicking-loginbtn)->LoginScreen

这里，

1）消费者没有在听（因为您最初的 main.dart 屏幕被登录页面取代，并且不存在于当前要收听的页面上）

2）没有导航器可以返回（因为页面被替换不在堆栈中）

使用 pushNamed 进入登录屏幕

最初->main.dart->welcomeScreen->(on-clicking-loginbtn)->LoginScreen

这里，

1）消费者正在听（因为您的初始 main.dart 屏幕没有被替换并且当前存在于页面上。但是您没有看到更改，因为您已经在堆栈中用登录屏幕覆盖了您的主初始页面）

2）有导航器可以返回主屏幕（现在您可以使用返回箭头返回查看更改）

结论如果页面被其他页面替换，页面将无法监听更改的 Provider Value。它应该在屏幕上听。

可以使用的图案

main.dart（主参数）

home: Consumer<Auth>(
          builder: (_, auth, __) {
            print('main.dart logged in: ${auth.loggedIn}');
            if(auth.loggedIn) return HomeScreen();
            return WelcomeScreen();
          },
        )

WelcomeScreen(登录代码)

 RaisedButton(
              child: Text('Login'),
              onPressed: () => Navigator.of(context).pushReplacementNamed(LoginScreen.routeName),
            )

LoginScreen（登录按钮）

RaisedButton(
          child: Text('Click to Login'),
          onPressed: () {
            Provider.of<Auth>(context, listen: false).loginUser();
            Navigator.of(context).pushReplacementNamed('/');
          },
        )

主屏幕（注销 btn）

RaisedButton(
          child: Text('Logout'),
         onPressed: () {
            Provider.of<Auth>(context, listen: false).logout();
            Navigator.of(context).pushReplacementNamed('/');
          }

推荐阅读