FlutterBlocBuilder的構建器只在最初被呼叫，對狀態變化沒有反應

我最近剛開始使用Flutter。BLoC確實有一個陡峭的學習曲線。

從標題可以看出，BlocBuilder的邏輯只在應用程式啟動時被正確執行一次。然而，在那之后，UI并沒有在狀態變化時被重建。盡管所有的事件都被發射出去了，而且狀態也發生了變化。

請提前感謝任何幫助！

這是我的一個案例。

這是我的'main.dart':

import 'package:co_flutter/auth/authentication_bloc.dart'/span>。
import 'package:co_flutter/auth/authentication_event.dart'。
import 'package:co_flutter/auth/authentication_state.dart';
import 'package:co_flutter/auth/login/login_bloc.dart';
import 'package:co_flutter/auth/signup/signup_page.dart'。
import 'package:co_flutter/loading_indicator.dart';
import 'package:co_flutter/splash_page.dart';
import 'package:co_flutter/user_repository.dart'。

import 'package:flutter/material.dart';
import 'package:bloc/bloc.dart';
import 'package:flutter_bloc/flutter_bloc.dart'。

import 'auth/login/login_page.dart'。

class SimpleBlocObserver extends BlocObserver{
  @override
  void onCreate(BlocBase bloc) {
    super.onCreate（bloc）。
    print('onCreate -- ${bloc.runtimeType}')。
  }

  @override; }
  void onEvent(Bloc bloc, Object?  event) {
    super.onEvent(bloc, event)。
    print('onEvent -- ${bloc.runtimeType}, $event'/span>)。
  }

  @override; }
  void onTransition(Bloc bloc, Transition transition) {
    super.onTransition(Bloc, transition)。
    print('onTransition -- ${bloc.runtimeType}, $transition'/span>) 。
  }

  @override; }
  void onChange(BlocBase bloc, Change change) {
    super.onChange(Bloc, change)。
    print('onChange -- ${bloc.runtimeType}, $change'/span>)。
  }

  @override; }
  void one rror(BlocBase bloc, Object error, stackTrace stackTrace) {
    print('onError -- ${bloc.runtimeType}, $error') 。
    super.onError（bloc, error, stackTrace）。
  }

  @override 
  void onClose(BlocBase bloc) {
    super.onClose（bloc）。
    print('onClose -- ${bloc.runtimeType}')。
  }
}

void main() {
  Bloc.observer = SimpleBlocObserver（）。
  runApp(MyApp(
    userRepository: UserRepository(),
  ));
}

class MyApp extends StatefulWidget{
  final UserRepository userRepository。

  MyApp({Key? key, required this.userRepository}) : super(key: 關鍵)。

  @override
  State<MyApp> createState() => _MyAppState()。
}

class _MyAppState extends State< MyApp> {
  late AuthenticationBloc authenticationBloc;
  UserRepository get userRepository => widget.userRepository;

  @override
  void initState() {
    authenticationBloc = AuthenticationBloc(userRepository: userRepository)。
    authenticationBloc.add(AppStarted())。
    super.initState()。
  }

  @override
  void dispose() {
    authenticationBloc.close()。
    super.dispose()。
  }

  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      提供者。[
        BlocProvider<AuthenticationBloc>(
          創建。(BuildContext context) => authenticationBloc,
        ),
        BlocProvider<LoginBloc>(
          創建。(BuildContext context) => LoginBloc(
              userRepository: userRepository,
              authenticationBloc: authenticationBloc)。
        ),
      ],
      孩子。MaterialApp(
        標題。'My App'。
        主題。ThemeData(
          primarySwatch: Colors.indigo,
        ),
        首頁。BlocBuilder<AuthenticationBloc, AuthenticationState>(
          builder: (BuildContext context, AuthenticationState state) {
            if (state  is AuthenticationUninitialized) {
              return SplashPage();
            }
            if (state  is AuthenticationAuthenticated) {
              return Dashboard(
                標題。'Dashboard'。
              );
            }
            if (state is AuthenticationUnauthenticated) {
              return LoginPage(
                userRepository: userRepository,
              );
            }
            if (state  is AuthenticationLoading) {
              return LoadingIndicator（）。
            }
            // else {
            // return Text('Error');
            // }
            return BlocBuilder<LoginBloc, LoginState> (
              構建者。(context, state) {
                if (state is LoginToSignup) {
                  return SignUpPage();
                } else[/span
                  return SizedBox.shrink()。
              },
            );
          },
        ),
      ),
    );
  }
}

class Dashboard extends StatelessWidget{
  final String title;

  const Dashboard({Key? key, required this.title}) : super(key: 關鍵)。

  @override
  Widget build(BuildContext context) {
    final AuthenticationBloc authenticationBloc =
        BlocProvider.of<AuthenticationBloc>（context）。

    return Scaffold(
      appBar: AppBar(
        標題。Text('Dashboard'),
      ),
      body: 容器(
        孩子。中心(
          child: ElevatedButton(
            child: Text('logout')。
            onPressed: () {
              authenticationBloc.add(LoggedOut())。
            },
          ),
        ),
      ),
    );
  }
}

authentication_bloc

import 'dart:async'/span>;

import 'package:co_flutter/auth/authentication_event.dart'。
import 'package:co_flutter/auth/authentication_state.dart';
import 'package:bloc/bloc.dart';
import './user_repository.dart';

class AuthenticationBloc
    extends Bloc<AuthenticationEvent, AuthenticationState> {
  UserRepository userRepository。

  AuthenticationBloc({required this.userRepository})
      : super(AuthenticationUninitialized() ) {
    userRepository = UserRepository();
  }

  @override(AuthenticationUninitialized())
  Stream<AuthenticationState> mapEventToState(
    AuthenticationEvent事件。
  ) async* {
    if (event is AppStarted) {
      final bool hasToken = await userRepository.hasToken() 。

      if (hasToken) {
        yield AuthenticationAuthenticated（）。
      } else {
        yield AuthenticationUnauthenticated（）。
      }
    }

    if（事件is LoggedIn） {
      yield AuthenticationLoading（）。
      await userRepository.persistToken（event.token, event.userId）。
      yield AuthenticationAuthenticated（）。
    }

    if (event  is LoggedOut) {
      yield AuthenticationLoading（）。
      await userRepository.deleteToken();
      yield AuthenticationUnauthenticated（）。
    }
  }

authentication_event

import 'package:equatable/equatable.dart';

抽象 class AuthenticationEvent extends Equatable {
  @override
  List<Object> get props => [];
}

class AppStarted extends AuthenticationEvent{
  @override
  String toString() => 'AppStarted'/span>;
}

class LoggedIn extends AuthenticationEvent{
  final String token。
  final String userId。

  LoggedIn({required this.token, required this.userId}) 。

  @override
  String toString() => 'LoggedIn { token: $token}'。
}

class LoggedOut extends AuthenticationEvent{
  @override
  String toString() => 'LoggedOut'/span>。
}

authentication_state

import 'package:equatable/equatable.dart'/span>。

abstract class AuthenticationState extends Equatable {
  const AuthenticationState（）。
}

class AuthenticationUninitialized extends AuthenticationState{
  @override
  List<Object> get props => [];
}

class AuthenticationLoading extends AuthenticationState{
  @override
  List<Object> get props => [];
}

class AuthenticationAuthenticated extends AuthenticationState{
  @override
  List<Object> get props => [];
}

class AuthenticationUnauthenticated extends AuthenticationState{
  @override
  List<Object> get props => [];
}

uj5u.com熱心網友回復：

問題出在這里。你已經創建了一個區塊：

authenticationBloc = AuthenticationBloc(userRepository: userRepository)。

而在這里，你正試圖再次創建它。

為了解決這個問題，請替換以下內容。

為了解決這個問題，請替換這段代碼：

用這個：

BlocProvider<AuthenticationBloc>.value(
          value: authenticationBloc,
        ),

將Bloc傳入Bloc生成器

當你在dispose函式中使用了Bloc authenticationBloc后，不要忘記處置它。

標籤：

上一篇：如何從另一個類中訪問一個函式-Flutter

下一篇：如何使用父型別系結程式，使型別系結的多型指標指向一個擴展型別？