flutter 有人知道我在pin_code_fields包中做错了什么吗?

68de4m5k  于 2023-03-19  发布在  Flutter
关注(0)|答案(1)|浏览(94)

-----关闭,用另一个 Package 重新制作-----
我正在使用pin_code_fields包来创建一个很好的代码输入界面。但是,当验证开始工作时,我得到了一个奇怪的错误边界,它不应该是这样的。
引脚代码文本字段代码:

SizedBox(
        width: 222.w,
        child: PinCodeTextField(
          length: 4,
          controller: notifier.codeController,
          appContext: context,
          autovalidateMode: AutovalidateMode.onUserInteraction,
          onChanged: (value) {},
          enableActiveFill: true,
          useExternalAutoFillGroup: true,
          animationDuration: const Duration(milliseconds: 300),
          animationType: AnimationType.fade,
          autoFocus: true,
          cursorColor:
              Theme.of(context).extension<MyThemeExtension>()!.black,
          keyboardType: TextInputType.number,
          validator: (value) {
            if (value!.length < 4) {
              return localizations.thisFieldIsRequired;
            }
            if (int.tryParse(value!) == null) {
              return localizations.unavaiableCharacters;
            }else {
              return null;
            }
          },
          pinTheme: PinTheme(
            borderRadius: BorderRadius.circular(8.r),
            selectedColor:
                Theme.of(context).extension<MyThemeExtension>()!.greenInfo,
            activeFillColor:
                Theme.of(context).extension<MyThemeExtension>()!.white,
            activeColor:
                Theme.of(context).extension<MyThemeExtension>()!.greenInfo,
            selectedFillColor:
                Theme.of(context).extension<MyThemeExtension>()!.white,
            inactiveFillColor:
                Theme.of(context).extension<MyThemeExtension>()!.white,
            inactiveColor:
                Theme.of(context).extension<MyThemeExtension>()!.grey2,
            // errorBorderColor:
            //     Theme.of(context).extension<MyThemeExtension>()!.redDiscount,
            shape: PinCodeFieldShape.box,
            borderWidth: 1.r,
            fieldHeight: 48.r,
            fieldWidth: 48.r,
          ),
        ),
      ),

That's how it looks like
我尝试过更改不同的参数,如enableActiveFill和PinTheme...

a8jjtwal

a8jjtwal1#

检查以下代码使用ExternalAutoFillGroup资本注解:)

SizedBox(
            width: 222.w,
            child: PinCodeTextField(
              length: 4,
              controller: notifier.codeController,
              appContext: context,
              autovalidateMode: AutovalidateMode.onUserInteraction,
              onChanged: (value) {},
              enableActiveFill: true,
              useExternalAutoFillGroup: true, //TRY BY SET FALSE HERE
              animationDuration: const Duration(milliseconds: 300),
              animationType: AnimationType.fade,
              autoFocus: true,
              cursorColor:
                  Theme.of(context).extension<MyThemeExtension>()!.black,
              keyboardType: TextInputType.number,
              validator: (value) {
                if (value!.length < 4) {
                  return localizations.thisFieldIsRequired;
                }
                if (int.tryParse(value!) == null) {
                  return localizations.unavaiableCharacters;
                }else {
                  return null;
                }
              },
              pinTheme: PinTheme(
                borderRadius: BorderRadius.circular(8.r),
                selectedColor:
                    Theme.of(context).extension<MyThemeExtension>()!.greenInfo,
                activeFillColor:
                    Theme.of(context).extension<MyThemeExtension>()!.white,
                activeColor:
                    Theme.of(context).extension<MyThemeExtension>()!.greenInfo,
                selectedFillColor:
                    Theme.of(context).extension<MyThemeExtension>()!.white,
                inactiveFillColor:
                    Theme.of(context).extension<MyThemeExtension>()!.white,
                inactiveColor:
                    Theme.of(context).extension<MyThemeExtension>()!.grey2,
                // errorBorderColor:
                //     Theme.of(context).extension<MyThemeExtension>()!.redDiscount,
                shape: PinCodeFieldShape.box,
                borderWidth: 1.r,
                fieldHeight: 48.r,
                fieldWidth: 48.r,
              ),
            ),
          ),

相关问题