在flutter中寫入時如何隱藏文本欄位中的錯誤訊息和錯誤邊框

我正在嘗試在文本欄位上添加驗證，我希望當我將任何文本欄位留空時，它將其邊框顏色更改為紅色并顯示一條錯誤訊息，因此，當我在其中寫入一些內容時，它應該隱藏邊框錯誤和訊息，其中正在發生但不是以有效的方式，這就是我正在做的事情。

我創建了自定義文本欄位

Widget textformfieldCustom(context,keyboardType,width,icon, controller,errortext,onchanged, hintText, labelText) {
  return Container(
    width: width,
    
    child:TextFormField(
    keyboardType:keyboardType,
    decoration: InputDecoration(
      contentPadding:EdgeInsets.symmetric(vertical: 20.0, horizontal: 10.0),
        errorText:errortext,
        labelText: labelText,
        labelStyle:  GoogleFonts.montserrat(color: HexColor("#6e6b7b")),
        hintStyle: GoogleFonts.montserrat(),
        hintText: hintText,
         prefixIcon: icon,
         focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)),borderSide: BorderSide(color: HexColor("#6610f2"))),
        border: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(10.0))),
        errorBorder: OutlineInputBorder(
             borderRadius: BorderRadius.all(Radius.circular(10.0)),
            borderSide: BorderSide(color: Colors.red, width: 1))),
    onSaved: (String? value) {
      // This optional block of code can be used to run
      // code when the user saves the form.
    },
    onChanged:onchanged,
    controller: controller,
  ));
}

并像這樣稱呼它

bool _validatetex = false;
textformfieldCustom(
                      context, 
                      TextInputType.number,
                      MediaQuery.of(context).size.width * 0.9,
                      Icon(Icons.email,color: iconColor,),
                      phoneNoController,
                      _validatetex ? 'This is the required field' : null,
                       (value) {
                        setState(() {
                          phoneNoController.text.isEmpty ? _validatetex = true : _validatetex = false;
                        });
                      },
                      'Enter your phone number',
                      'Phone number'
                    ),

我正在使用一個bool型別變數errortext并改變它的狀態onchanged，所以我想以有效的方式做到這一點，比如我有 10 個文本欄位，所以我必須初始化 10 個 bool 變數，所以這不是一個好方法。請幫助如何以有效的方式實作這一目標。

uj5u.com熱心網友回復：

您可以validator在“TextField”中使用該屬性

validator: (value) {
    if (value == null || value.isEmpty) {
      return 'This is the required field';
    }
    return null;
  },

然后你的代碼，

Widget textformfieldCustom(context,keyboardType,width,icon, controller,errortext,onchanged, hintText, labelText) {
  return Container(
    width: width,
    
    child:TextFormField(
    keyboardType:keyboardType,
    decoration: InputDecoration(
      contentPadding:EdgeInsets.symmetric(vertical: 20.0, horizontal: 10.0),
        labelText: labelText,
        labelStyle:  GoogleFonts.montserrat(color: HexColor("#6e6b7b")),
        hintStyle: GoogleFonts.montserrat(),
        hintText: hintText,
         prefixIcon: icon,
         focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)),borderSide: BorderSide(color: HexColor("#6610f2"))),
        border: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(10.0))),
        errorBorder: OutlineInputBorder(
             borderRadius: BorderRadius.all(Radius.circular(10.0)),
            borderSide: BorderSide(color: Colors.red, width: 1))),
    onSaved: (String? value) {
      // This optional block of code can be used to run
      // code when the user saves the form.
    },
    onChanged: onchanged,
    controller: controller,
    // Validator
    validator: (value) {
      if (value == null || value.isEmpty) {
        return 'This is the required field';
      }
      return null;
    },
  ));
}

uj5u.com熱心網友回復：

我從本教程中得到了答案。

標籤：扑 验证 文本域

上一篇：將全域值系結到ValidationErrors中

下一篇：使用Do-While回圈驗證無法正常作業