如何在 flutter 的 onChanged（更改字符）處更改 TextField 邊框顏色？

Question

我需要在更改基於 email 或電話驗證的字符時更改文本字段邊框顏色。

例如：

1. 當鍵入不完整的 email 時邊框顏色設置為紅色，完成鍵入 email 后邊框顏色設置為白色。

2. 當正在輸入的文本文件字符長度小於 10 時設置邊框的紅色，當字符長度為 10 時設置白色。

快速單詞：使用 Getx、Bloc、Provider 等更改字符時更改邊框顏色...

Answer 1

我已經以正常方式嘗試了，但是已經嘗試使用BLOC State 在我的項目中的 You Tube 上管理這個視頻，請參考這個視頻，它對你很有幫助

電子郵件驗證 function

  emailValidation(emailValue) {
    return RegExp(
      r'^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$',
    ).hasMatch(emailValue);
  }

您的小部件使用 TextFormField：

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 的小部件：

 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,
          ),
        ),