dart 基于选项值有条件启用“验证”按钮

waxmsbnn  于 2023-10-13  发布在  其他
关注(0)|答案(1)|浏览(92)

“我需要解决以下问题:仅当pinput的值与指定值匹配时才启用“验证”按钮;否则,保持禁用按钮。我们如何才能做到这一点?“
期望:在其他条件下禁用按钮,我们怎么做?在isOTP有效假禁用“验证”按钮。

我正在使用包pinput为OTP,这是我的代码:

class OTPForm extends StatefulWidget {
  final Function toggleForm;

  OTPForm(this.toggleForm);

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

class _OTPFormState extends State<OTPForm> {
  bool isOTPValid = false;
  @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 == '1155' ? null : 'Pin is incorrect';
              isOTPValid = value == '1155';
              return isOTPValid ? null : 'Pin is incorrect';
            },
            hapticFeedbackType: HapticFeedbackType.lightImpact,
            onCompleted: (pin) {
              debugPrint('onCompleted: $pin');
              // widget.toggleForm();
            },
            onChanged: (value) {
              debugPrint('onChanged: $value');
            },
            autofocus: true,
          ),
          const SizedBox(height: mdVerticalSpacing),              
          Container(
            height: buttonHeight,
            width: double.infinity,
            child: PrimaryButton(
              text: 'Verify',
              onPressed: () {
                if (isOTPValid) {
                  widget.toggleForm();
                }
              },
            ),
          ),
        ],
      ),
    );
  }
}
sczxawaw

sczxawaw1#

如果您没有使用任何类似bloc的软件包,最简单的方法是调用setState来设置isOTPValid值。由于PrimaryButton需要onPressed参数,您可以通过AbsorbPointer告诉用户按钮的状态,例如:

class _OTPFormState extends State<OTPForm> {
  bool isOTPValid = false;
  @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 == '1155' ? null : 'Pin is incorrect';
              setState(() {  //  <---------------
                 isOTPValid = value == '1155';                    
              });
              return isOTPValid ? null : 'Pin is incorrect';
            },
            hapticFeedbackType: HapticFeedbackType.lightImpact,
            onCompleted: (pin) {
              debugPrint('onCompleted: $pin');
              // widget.toggleForm();
            },
            onChanged: (value) {
              debugPrint('onChanged: $value');
            },
            autofocus: true,
          ),
          const SizedBox(height: mdVerticalSpacing),              
          Container(
            height: buttonHeight,
            width: double.infinity,
            child: AbsorbPointer(
              absorbing: !isOTPValid, //  <----------
              child: PrimaryButton(
              text: 'Verify',
              onPressed: () {  
                  widget.toggleForm();
              },
             ),
           ),
          ),
        ],
      ),
    );
  }
}

相关问题