Flutter：Bloc状态切换时如何重用Widget子树状态？

这个问题我遇到过，核心原因是你用GlobalKey的思路没抓住Flutter状态管理的关键点——当Widget被完全从树中移除时，它的State会被销毁，哪怕你用了GlobalKey也救不回来。让我给你拆解问题，再给两个可行的解决方案：

为什么你的GlobalKey方案没生效？ #

当状态从NotAuthenticated切换到Authenticating时，AppOnboarding会被从Widget树中移除，此时Flutter会调用它的State.dispose()方法，所有输入状态都会被清除。之后切回NotAuthenticated，哪怕你传了同一个GlobalKey，因为之前的State已经被销毁，Flutter会创建一个全新的AppOnboardingState实例，所以输入信息还是会丢失。

GlobalKey的作用是在Widget不被移除出树的前提下，比如在树内移动位置、父Widget重建但该Widget的key不变时，保留状态。但一旦Widget被完全移除，它就无能为力了。

解决方案1：让Widget始终留在树中，控制显示/隐藏 #

既然移除会导致状态丢失，那我们就把AppOnboarding、AppMain这些页面都留在Widget树里，用Visibility组件根据状态控制它们的显示，同时开启maintainState: true来保留不可见时的状态：

BlocBuilder<AuthBloc, AuthState>(
  builder: (context, state) {
    return Stack(
      children: [
        // 未认证状态页面，始终保留状态
        Visibility(
          visible: state is NotAuthenticated,
          maintainState: true,
          child: AppOnboarding(),
        ),
        // 加载状态页面，不需要保留状态
        Visibility(
          visible: state is Authenticating,
          child: AppLoading(),
        ),
        // 已认证状态页面，始终保留状态
        Visibility(
          visible: state is Authenticated,
          maintainState: true,
          child: AppMain(),
        ),
      ],
    );
  },
)

这个方案的优点是简单直接，不需要修改现有页面的状态逻辑，适合状态比较轻量的场景。

解决方案2：将页面状态提升到外部（Bloc/Provider） #

如果你的页面状态比较复杂，或者需要在其他地方复用这些状态，更好的做法是把输入信息这类状态从AppOnboarding的State中抽离出来，用一个独立的Bloc（或Cubit）来管理：

1. 先创建一个管理登录输入的Cubit：

class OnboardingCubit extends Cubit<OnboardingState> {
  OnboardingCubit() : super(OnboardingState(email: '', password: ''));

  // 更新邮箱
  void updateEmail(String newEmail) {
    emit(state.copyWith(email: newEmail));
  }

  // 更新密码
  void updatePassword(String newPassword) {
    emit(state.copyWith(password: newPassword));
  }
}

// 定义状态类
class OnboardingState {
  final String email;
  final String password;

  OnboardingState({required this.email, required this.password});

  OnboardingState copyWith({String? email, String? password}) {
    return OnboardingState(
      email: email ?? this.email,
      password: password ?? this.password,
    );
  }
}

2. 在父Widget中提供这个Cubit：

BlocProvider(
  create: (context) => OnboardingCubit(),
  child: BlocBuilder<AuthBloc, AuthState>(
    builder: (context, state) {
      if (state is Authenticating) {
        return AppLoading();
      } else if (state is NotAuthenticated) {
        return AppOnboarding();
      } else if (state is Authenticated) {
        return AppMain();
      } else {
        return const SizedBox.shrink();
      }
    },
  ),
)

3. 修改AppOnboarding，从Cubit中读取和更新状态：

class AppOnboarding extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final onboardingCubit = BlocProvider.of<OnboardingCubit>(context);
    return BlocBuilder<OnboardingCubit, OnboardingState>(
      builder: (context, state) {
        return Column(
          children: [
            TextField(
              decoration: const InputDecoration(labelText: '邮箱'),
              onChanged: onboardingCubit.updateEmail,
              controller: TextEditingController(text: state.email)
                ..selection = TextSelection.fromPosition(
                  TextPosition(offset: state.email.length),
                ),
            ),
            TextField(
              decoration: const InputDecoration(labelText: '密码'),
              obscureText: true,
              onChanged: onboardingCubit.updatePassword,
              controller: TextEditingController(text: state.password)
                ..selection = TextSelection.fromPosition(
                  TextPosition(offset: state.password.length),
                ),
            ),
            // 登录按钮，触发AuthBloc的登录事件
            ElevatedButton(
              onPressed: () {
                context.read<AuthBloc>().add(
                      LoginEvent(email: state.email, password: state.password),
                    );
              },
              child: const Text('登录'),
            ),
          ],
        );
      },
    );
  }
}

这个方案的优点是状态和UI分离，即使AppOnboarding被重建，也能从Cubit中恢复之前的输入内容，适合复杂状态场景，也符合Bloc的状态管理最佳实践。

内容的提问来源于stack exchange，提问作者Lucas Aschenbach