如何在flutter中更改onChanged(更改字符)的TextField边框颜色?

2vuwiymt  于 2023-01-14  发布在  Flutter
关注(0)|答案(1)|浏览(162)
    • 在根据电子邮件或电话验证更改字符时,我需要更改文本域边框颜色。**

例如:
1.当键入不完整的电子邮件时,边框颜色设置为红色,完成键入电子邮件后,边框颜色设置为白色。
1.当文本字段字符长度小于10时,在正在进行的打字过程中设置边框的红色,当字符长度大于10时,设置边框的白色。

    • 简短词汇**:使用Getx、Bloc、Provider等更改字符时更改边框颜色...
qnzebej0

qnzebej01#

我已经尝试它正常的方式,但已尝试使用BLOC状态管理this视频上你管在我的项目中,请参考此视频对你很有帮助

电子邮件验证功能

emailValidation(emailValue) {
    return RegExp(
      r'^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$',
    ).hasMatch(emailValue);
  }
您的使用文本表单字段的小部件:
TextFormField(
  autovalidateMode: AutovalidateMode.onUserInteraction,
  validator: (value) => value!.isEmpty
      ? 'Field Not Empty'
      : !emailValidation(value)
          ? 'Enter Valid Email Address'
          : null,
  decoration: const InputDecoration(
    border: OutlineInputBorder(),
    hintText: 'Enter Email Address',
    labelText: 'Email',
  ),
),

变量声明

final text = TextEditingController();
bool validate = false;

处理方法:

void dispose() {
    text.dispose();
    super.dispose();
  }
您使用文本字段的小部件:
TextField(
          onChanged: (value) {
            setState(() {
              text.text.isEmpty || !emailValidation(text.text)
                  ? validate = true
                  : validate = false;
            });
          },
          controller: text,
          decoration: InputDecoration(
            border: const OutlineInputBorder(),
            labelText: 'Enter Email Address',
            errorText: validate ? 'Enter Valid Email' : null,
          ),
        ),

相关问题