8

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

根据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.
4

4 回答 4

7

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

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

因此，在大多数教程中，您将看到 StreamBuilder 是在无状态小部件的 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

于 2019-11-10T20:04:04.287 回答
3

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

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

于 2019-07-01T15:38:44.510 回答
1

在 AppHomePage StatelessWidget 中将您的 StreamBuilder 包装在 Scaffold 小部件下，然后在调用 Navigator Pop 或 Push 时不会触发它。

于 2021-05-03T12:03:53.327 回答
0

I faced the same issue in my HomeScreen which is a StatefulWidget and it was fixed after adding 'const' keyword.

Scaffold(
      bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          fixedColor: Colors.black,
          currentIndex: _selectedIndex,
          selectedFontSize: 10.0,
          unselectedFontSize: 10.0,
          onTap: (i) => setState(() {
                _selectedIndex = i;
              }),
          items: const [
            BottomNavigationBarItem(
                icon: Icon(Icons.home_outlined),
                activeIcon: Icon(Icons.home),
                label: 'Home'),
            BottomNavigationBarItem(
                icon: Icon(Icons.explore_outlined),
                activeIcon: Icon(Icons.explore),
                label: 'Explore')
  ]),
      body: Stack(
        children: _screens.asMap().map((i, screen) => MapEntry(i, Offstage(
          offstage: _selectedIndex !=i,
          child: screen,
        ))).values.toList(),
      ),
      drawer: CustomDrawer(),
    );

final _screens = [
       const HomeScreen(),
       Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white,
          elevation: 0,
          leading: IconButton(
            iconSize: 30,
            color: Colors.black,
             icon: const Icon(Icons.close),
            onPressed: () => _navigateTo(0),
           ),),
        body: const Center(
          child: Text('Explore'),
        ),
      ),
于 2022-02-13T16:00:22.347 回答