flutter - 如何向 TextField 添加检查器和警告

Question

这是我要添加错误警告和资格检查器的代码

TextField(
  controller: emailController,
  decoration: InputDecoration(
    hintText: '[e-mail]',
    labelText: 'Email',
    // icon: Icon(Icons.mail),
    suffixIcon: emailController.text.isEmpty
        ? Container(width: 0)
        : IconButton(
            icon: Icon(Icons.close),
            onPressed: () => emailController.clear(),
          ),
    border: OutlineInputBorder(),
    focusColor: Colors.red
  ),
  keyboardType: TextInputType.emailAddress,
  textInputAction: TextInputAction.done,
  // autofocus: true,
),

---

如果该人没有插入@gmail.com 错误消息看起来如何使错误警告出现

标签： flutterdart

Answer 1

您可以在内部和内部使用Form()小部件TextFormField()TextFormField()

添加validator(val){ // you qualify checker }，然后你可以打电话

_key.currentState.validate()在按钮上单击以验证您的电子邮件。

class _MyWidgetState extends State<MyWidget> {
final GlobalKey<FormState> _key = GlobalKey(); 

var emailController = TextEditingController();

@override
Widget build(BuildContext context) {
return Container(
        height:150,
        child: Column(
          children:[
            Form(
                key: _key,
                child:TextFormField(
                  controller: emailController,
                  decoration: InputDecoration(
                      hintText: '[e-mail]',
                      labelText: 'Email',
                      // icon: Icon(Icons.mail),
                      suffixIcon: emailController.text.isEmpty
                          ? Container(width: 0)
                          : IconButton(
                        icon: Icon(Icons.close),
                        onPressed: () => emailController.clear(),
                      ),
                      border: OutlineInputBorder(),
                      focusColor: Colors.red
                  ),
                  keyboardType: TextInputType.emailAddress,
                  textInputAction: TextInputAction.done,
                  // autofocus: true,
                  onFieldSubmitted: (val){
                    _key.currentState!.validate();
                  },
                  validator: (val){
                    if(!val!.contains("@")){
                      return "invalid email";
                    }
                    return null;
                  },
                )
            ),
            ElevatedButton(onPressed: () {
              _key.currentState.validate();
            }, child: Text("Check"),)
          ],
        ),
      );
     }
    }