Flutter中Cubit实现注册时按钮重复点击无响应问题求助

核心问题分析 #

1. 缺少加载状态反馈：注册请求发起时未触发UserSignupLoading状态，导致UI无法感知请求正在进行，用户点击按钮后无视觉反馈，误以为功能失效。
2. 未限制重复点击：按钮未根据当前状态设置禁用，可能导致重复发起请求，或在错误状态下点击无响应。

代码修改方案 #

1. 更新UserSignupCubit，添加加载状态触发

修改user_signup_cubit.dart中的signupUser方法，在发起请求前先触发加载状态：

import 'package:ach_mobile/main.dart';
import 'package:bloc/bloc.dart';
import 'package:equatable/equatable.dart';

part 'user_signup_state.dart';

class UserSignupCubit extends Cubit<UserSignupState> {
  UserSignupCubit() : super(UserSignupInitial());

  Future<void> signupUser({required String email, required String password}) async {
    try {
      // 发起请求前触发加载状态
      emit(UserSignupLoading());
      final response = await supabaseInitialization.auth.signUp(email: email, password: password);
      if (response.user == null) {
        throw Exception('Pressure... no user.');
      }
      emit(UserSignupSuccess());
    } catch (e) {
      // 传递实际错误信息，方便调试
      emit(UserSignupFailed(error: e.toString()));
    }
  }
}

2. 更新注册页面，根据状态禁用按钮

修改user_signup.dart中的ElevatedButton，根据当前状态决定是否可点击：

// ... 其他代码保持不变
ElevatedButton(
  onPressed: state is UserSignupLoading 
      ? null // 加载状态下禁用按钮
      : () {
          final email = emailController.text;
          final password = passwordController.text;
          context.read<UserSignupCubit>().signupUser(
                email: email,
                password: password,
              );
        },
  child: const Text('Register'),
),
// ... 其他代码保持不变

3. 补充成功状态的导航逻辑（可选）

在BlocConsumer的listener中添加成功后的页面跳转：

listener: (context, state) {
  if (state is UserSignupSuccess) {
    // 替换为你的首页路由
    Navigator.pushReplacementNamed(context, '/home');
  } else if (state is UserSignupFailed) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('Registration failed: ${state.error}'),
      ),
    );
  }
},

修改后的效果 #

• 点击注册按钮后立即显示加载动画，防止重复点击
• 错误状态下再次点击按钮会正常触发请求，同时加载状态会给用户明确反馈
• 成功注册后自动跳转到首页

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