基于Pinput输入值条件启用Verify按钮的实现方案

要实现只有当Pinput输入的OTP与指定值匹配时，Verify按钮才可用，否则保持禁用的效果，你需要调整当前代码的两处关键逻辑：

修改方案 #

1. 实时监听OTP输入变化，同步更新验证状态并刷新UI
2. 根据验证状态直接控制按钮的禁用/启用状态

修改后的完整代码 #

class OTPForm extends StatefulWidget {
  final Function toggleForm;

  OTPForm(this.toggleForm);

  @override
  State<OTPForm> createState() => _OTPFormState();
}

class _OTPFormState extends State<OTPForm> {
  bool isOTPValid = false;
  // 指定正确的OTP值
  final String correctOTP = '1155';

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [              
          Pinput(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            length: 4,
            defaultPinTheme: defaultPinTheme,
            focusedPinTheme: defaultPinTheme.copyWith(
              decoration: defaultPinTheme.decoration!.copyWith(
                border: Border.all(color: primaryColor),
              ),
            ),
            errorPinTheme: defaultPinTheme.copyBorderWith(
              border: Border.all(color: dangerColor),
            ),
            validator: (value) {
              return value == correctOTP ? null : 'Pin is incorrect';
            },
            hapticFeedbackType: HapticFeedbackType.lightImpact,
            onCompleted: (pin) {
              debugPrint('onCompleted: $pin');
              if (isOTPValid) {
                widget.toggleForm();
              }
            },
            onChanged: (value) {
              debugPrint('onChanged: $value');
              // 每次输入变化时更新验证状态并刷新UI
              setState(() {
                isOTPValid = value == correctOTP;
              });
            },
            autofocus: true,
          ),
          const SizedBox(height: mdVerticalSpacing),              
          Container(
            height: buttonHeight,
            width: double.infinity,
            child: PrimaryButton(
              text: 'Verify',
              // 根据验证状态设置按钮点击回调：无效时设为null，按钮自动禁用
              onPressed: isOTPValid ? () {
                widget.toggleForm();
              } : null,
              // 如果你的PrimaryButton支持enabled属性，也可以加上
              // enabled: isOTPValid,
            ),
          ),
        ],
      ),
    );
  }
}

关键修改说明 #

• 实时更新验证状态：把OTP验证逻辑移到onChanged回调中，每次输入字符变化时都通过setState更新isOTPValid，确保按钮状态能实时响应输入变化。
• 直接控制按钮状态：Flutter中按钮的onPressed设为null时会自动进入禁用状态，所以我们根据isOTPValid的值动态赋值：验证通过时传点击回调，不通过时传null。
• 保持错误提示逻辑：保留validator回调用于显示输入错误的提示文本，和onChanged的验证逻辑保持一致，确保错误提示和按钮状态同步。

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