Flutter Stream Builder 在 Navigator Pop 或 Push 被调用时触发

Question

我在应用程序的主页/根页面中有一个流构建器。每当我在别处进行页面导航时，就会触发此流构建器，这与流本身无关。

根据here和here，我的理解是，当在导航器中弹出/推送页面时，它会触发应用程序的重建，因此流构建器会重新连接并触发。然而，这似乎效率低下，那么有没有办法防止流构建器在弹出/推送页面时触发？

此外，根据日志，当我推送页面时，页面首先被构建并显示，然后流构建器被触发。然而，流构建器的小部件/页面根本不显示，即使日志/调试器清楚地显示流构建器的小部件已返回。它去了哪里？它在 Flutter 框架中是如何工作的？

下面是完整的代码和日志。该代码使用 Firebase 身份验证作为流构建器。

代码：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AppHomePage(),
    );
  }
}

class AppHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final FirebaseAuth auth = FirebaseAuth.instance;
    return StreamBuilder<FirebaseUser>(
      stream: auth.onAuthStateChanged,
      builder: (_, AsyncSnapshot<FirebaseUser> snapshot) {
        if (snapshot.connectionState == ConnectionState.active) {
          final FirebaseUser user = snapshot.data;
          if (user == null) {
            debugPrint("User is NULL.");
            return SignInPage();
          } else {
            debugPrint("User exists.");
            return MainPage();
          }
        } else {
          debugPrint("In waiting state.");
          return Scaffold(
            body: Center(
              child: CircularProgressIndicator(),
            ),
          );
        }
      },
    );
  }
}

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    debugPrint("Building main page.");
    return Scaffold(
      body: Center(
        child: Text("Welcome to our app!"),
      ),
    );
  }
}

class SignInPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    debugPrint("Building sign-in page.");
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            FlatButton(
              color: Colors.blue,
              child: Text('Sign In as Anonymous'),
              onPressed: () {
                debugPrint("Anonymous");
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => MainPage()),
                );
              },
            ),
            FlatButton(
              color: Colors.red,
              child: Text('Sign In with Google'),
              onPressed: () => debugPrint("Google"),
            ),
          ],
        ),
      ),
    );
  }
}

日志，其中第 4 行表示按下按钮执行 navigator.pop()：

I/flutter (22339): In waiting state.
I/flutter (22339): User is NULL.
I/flutter (22339): Building sign-in page.
I/flutter (22339): Anonymous
I/flutter (22339): Building main page.
I/flutter (22339): User is NULL.
I/flutter (22339): Building sign-in page.

Answer 1

我可以确认每次我们在我们的应用程序中导航时都会调用 StreamBuilder 中的 build 方法，这效率不高，因为它应该取消其侦听器，创建一个新的侦听器并重建整个小部件。

如果您的应用程序侦听身份验证状态以便在身份验证状态更改时显示适当的屏幕（加载/登录/主页），您可能会遇到该问题

所以在大多数教程中，你会看到 StreamBuilder 是在 Stateless 小部件的 build 方法中创建的。这不是一个有效的解决方案。

而是使用有状态小部件并收听您在initState()或didChangeDependencies()方法中的身份验证更改。

我们的情况的不同之处在于，initState()如果您使用 Provider（上下文尚未准备好提供服务），您将在获取 Auth 服务时遇到问题。如果您不使用 Provider，您可以在initState(). 但我强烈建议使用 Provider 来分离您的服务和页面。换句话说，使用 MVVM 模式使您的代码具有可扩展性和可维护性。

class LandingScreen extends StatefulWidget {
  @override
  _LandingScreenState createState() => _LandingScreenState();
}

class _LandingScreenState extends State<LandingScreen> {
  @override
  Widget build(BuildContext context) {
      return SplashView();
  }

  @override
  void didChangeDependencies() {
      //we don't have to close or unsubscribe SB
        Provider.of<AuthService>(context, listen: false).streamAuthServiceState().listen((state){
          switch (state) {
            case AuthServiceState.Starting:
            print("starting");
              break;
            case AuthServiceState.SignedIn:
              Navigator.pushReplacementNamed(context, Routes.HOME);
              break;
            case AuthServiceState.SignedOut:
              Navigator.pushReplacementNamed(context, Routes.LOGIN);
              break;
            default:
              Navigator.pushReplacementNamed(context, Routes.LOGIN);
          }
        });

    super.didChangeDependencies();
  }
}

如果您将直接使用 Firebase 流 - 将我的流替换为 FirebaseAuth.instance.onAuthStateChanged

Answer 2

我花了几个小时弄清楚如何解决这个问题。事实证明AppHomePage需要扩展StatefulWidget而不是StatelessWidget.

不知道为什么，但它有效。