如何制作像 Google 一样的 TextFormField？

Posted 2023-02-23

【中文标题】如何制作像 Google 一样的 TextFormField？

【英文标题】：How to make a TextFormField like Google?

【发布时间】：2020-04-09 21:06:57

【问题描述】：

我对在 Flutter 上注册 Google 帐户时实现 TextField 感兴趣。如何从所有三个都有一个 errorText 的日期开始制作类似的一系列 TextField，当他们单击“下一步”时，一次检查三个，如果没有输入一个，即使它们是正确的，一切都会变成红色。这就像三者之一。

【参考方案1】：

对于大纲文本字段，您可以使用

TextField(
  decoration: new InputDecoration(
      border: new OutlineInputBorder(),
      filled: true,
      hintText: "Type in your text",
   ),
)

对于验证，实现它的最佳方法是使用form with validation 和TextFormField 而不是TextField

示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    final appTitle = 'Form Validation Demo';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: Text(appTitle),
        ),
        body: MyCustomForm(),
      ),
    );
  


// Create a Form widget.
class MyCustomForm extends StatefulWidget 
  @override
  MyCustomFormState createState() 
    return MyCustomFormState();
  


// Create a corresponding State class.
// This class holds data related to the form.
class MyCustomFormState extends State<MyCustomForm> 
  // Create a global key that uniquely identifies the Form widget
  // and allows validation of the form.
  //
  // Note: This is a GlobalKey<FormState>,
  // not a GlobalKey<MyCustomFormState>.
  final _formKey = GlobalKey<FormState>();

  String _firstName;
  String _lastName;

  @override
  Widget build(BuildContext context) 
    // Build a Form widget using the _formKey created above.
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextFormField(
            validator: (value) 
              if (value.isEmpty) 
                return 'Please enter some text';
              
              return null;
            ,
            onSaved: (val) => _firstName = val,
          ),
          TextFormField(
            validator: (value) 
              if (value.isEmpty) 
                return 'Please enter some text';
              
              return null;
            ,
            onSaved: (val) => _lastName = val,
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: RaisedButton(
              onPressed: () 
                // Validate returns true if the form is valid, or false
                // otherwise.
                final form = _formKey.currentState;
                if (form.validate()) 
                  form.save();
                  // If the form is valid, display a Snackbar.
                  Scaffold.of(context).showSnackBar(SnackBar(
                      content: Text('The result: $_firstName, $_lastName')));
                
              ,
              child: Text('Submit'),
            ),
          ),
        ],
      ),
    );
  

【讨论】：

这很酷，伙计。谢谢。但这不是我需要的。如何在验证器之后立即从三个 textformfield 中获取一个文本？ （就像屏幕截图中的前三个字段一样，每个字段都有一个错误文本）另外，我如何在 errorText 中制作一个图标，就像在同一个屏幕截图中一样？

在这种情况下，您可能需要直接扩展FormField 并自己控制错误的可见性，请参阅TextFormField 的实现示例。但是没有开箱即用的小部件可以使用相同的样式按照您的意愿执行错误。我更新了我的示例以显示如何连接结果。

也许是男人。除了这个地方，我能接到你的回电吗？