Flutter Bloc重复推送SignIn页面时Cubit Model状态未重置问题

你遇到的问题根源在于Bloc实例的复用——当你从SignUp页面再次推送SignIn页面时，使用的是同一个Bloc实例，之前修改的signInPasswordVisibility状态会被保留，并没有自动重置为初始值，这不属于flutter_bloc的实现问题，而是状态生命周期的处理逻辑缺失。以下是两种可行的解决办法：

方法一：为每个SignIn页面创建独立的Bloc实例 #

如果SignIn页面不需要和其他页面共享Bloc状态，直接在页面内部通过BlocProvider创建新的Bloc实例，这样每次打开SignIn页面都会初始化全新的状态：

class SignInPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      // 每次进入页面都创建新的SignInBloc实例
      create: (context) => SignInBloc(),
      child: Scaffold(
        // 页面布局和逻辑
        body: BlocBuilder<SignInBloc, SignInState>(
          builder: (context, state) {
            return TextField(
              obscureText: !state.signInPasswordVisibility,
              suffixIcon: IconButton(
                icon: Icon(
                  state.signInPasswordVisibility ? Icons.visibility : Icons.visibility_off,
                ),
                onPressed: () {
                  context.read<SignInBloc>().add(TogglePasswordVisibility());
                },
              ),
            );
          },
        ),
      ),
    );
  }
}

方法二：页面初始化时手动重置状态 #

如果需要和其他页面共享Bloc实例（比如上层已提供Bloc），可以在SignIn页面初始化时发送重置事件，强制将状态恢复为初始值：

1. 首先在Bloc中添加重置事件：

// 定义事件
abstract class SignInEvent {}
class TogglePasswordVisibility extends SignInEvent {}
// 新增重置状态事件
class ResetSignInState extends SignInEvent {}

// 定义状态
class SignInState {
  final bool signInPasswordVisibility;
  SignInState({this.signInPasswordVisibility = false});

  SignInState copyWith({bool? signInPasswordVisibility}) {
    return SignInState(
      signInPasswordVisibility: signInPasswordVisibility ?? this.signInPasswordVisibility,
    );
  }
}

// Bloc逻辑处理
class SignInBloc extends Bloc<SignInEvent, SignInState> {
  SignInBloc() : super(SignInState()) {
    on<TogglePasswordVisibility>((event, emit) {
      emit(state.copyWith(signInPasswordVisibility: !state.signInPasswordVisibility));
    });
    // 处理重置事件，恢复初始状态
    on<ResetSignInState>((event, emit) {
      emit(SignInState());
    });
  }
}

2. 在SignIn页面的initState中触发重置事件：

class SignInPage extends StatefulWidget {
  @override
  _SignInPageState createState() => _SignInPageState();
}

class _SignInPageState extends State<SignInPage> {
  @override
  void initState() {
    super.initState();
    // 页面初始化时发送重置事件
    context.read<SignInBloc>().add(ResetSignInState());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 页面布局
      body: BlocBuilder<SignInBloc, SignInState>(
        builder: (context, state) {
          // 构建UI
        },
      ),
    );
  }
}

注意事项 #

• 如果之前是通过BlocProvider.value传递Bloc实例给SignIn页面，这种方式会复用上层的Bloc，状态不会自动重置，需要改用上述两种方法之一。
• 选择哪种方式取决于你的业务场景：不需要状态共享选方法一，需要共享状态选方法二。

内容的提问来源于stack exchange，提问作者Mani murugan