如何添加检查用户是不是在文本字段中输入了某些内容？

Posted 2023-02-23

【中文标题】如何添加检查用户是不是在文本字段中输入了某些内容？

【英文标题】：How to add check if user has typed something in a text field?如何添加检查用户是否在文本字段中输入了某些内容？

【发布时间】：2019-11-29 12:59:15

【问题描述】：

我有三个类，根据登录页面的类名分为三个文件； CustomTextField（设置了自定义文本字段样式）、FormCard（基本上是用于登录的表单，其中包括 CustomTextField）和 LogInPage（具有表单卡，以及用于登录和注册的按钮）。

登录页面构建方法调用FormCard()，FormCard构建方法调用CustomTextField()。按下登录按钮时如何检查用户是否将文本字段留空？

我阅读了 GlobalKey 文档，给出的示例是文本字段位于同一文件中的情况。是否可以使用 GlobalKey 来检查类在不同文件中的情况？

【参考方案1】：

自己尝试一下，看看是否有效。 如果您导入所有类，那么它们的行为就像单个文件一样。随着应用程序大小的增长，隔离只是为了维护和管理代码。 所以，IMO 它将同样工作。

【讨论】：

现在可以了！终于有时间尝试了。

是的，试试吧，让大家知道。如果有效，请标记答案

【参考方案2】：

我建议尽量避免在您的应用中使用GlobalKey，有关详细信息，请参阅this 问题。

现在要解决您的问题，您可以使用许多状态管理技术来解决此问题，我将举一个最简单的技术示例，虽然不是最好的方法，但会起作用。

首先您在登录屏幕中声明一个TextEditingController，然后您将向下传递这个控制器，直到您将它传递给CustomTextField()。 TextEditingController 将包含使用它的文本字段中的文本。详情见下方代码sn-p。

class LoginScreen extends StatefulWidget 
  @override
  _LoginScreenState createState() =>_LoginScreenState();


class _LoginScreenState extends State<LoginScreen> 
    TextEditingController controller;

    @override
    void initState() 
        controller = TextEditingController();
        super.initState();
    

    @override
    void dispose() 
        controller.dispose(); //prevents memory leak
    

    @override
    Widget build(BuildContext context) 
        // Here you can check if the TextField is empty or not
        if (controller.text == null || controller.text == "") 
             print("empty");
         else 
             print("not empty");
        
        return FormCard(controller: controller);



class FormCard extends StatelessWidget 
    final TextEditingController controller;
    FormCard(this.controller);

    @override
    Widget build(BuildContext context) 
        return CustomTextField(controller: controller);
    


/* CustomTextField is stateful because sometimes
 stateless widgets do not update textfields text when
 equipped with controllers
*/
class CustomTextField extends StatefulWidget 

   final TextEditingController controller;
   CustomTextField(this.controller);

  @override
  _CustomTextFieldState createState() =>_CustomTextFieldState();


class _CustomTextFieldState extends State<CustomTextField> 
    @override
    Widget build(BuildContext context) 
        return TextField(
            controller: controller,
        );
    

您需要将所有类放在同一个文件中，或者按照 mahi 的说明将它们全部导入。

这种技术在大型应用程序中会让人头疼，在 Flutter 中查找状态管理概念以找到更好的实现方式。

【参考方案3】：

我知道我对此有点晚了，但我想指出使用 Ali Amin 方法的问题。

看，如果用户不能使用空格来填充文本字段，他的回答将解决手头的整个问题。但是，如果用户只按空格键而不按其他字母，那么您的程序将相信他们确实在文本字段中填充了某些内容，即使从技术上讲他们并没有。

如果您想确保用户在文本字段中实际输入了某些内容，则修剪该字段的左右空格的整个字符串，并检查该新字符串是否为空。

例子：

    TextField(
   controller: MyTextEdittingController
  onChanged: (text) 
    if(MyTextEdittingController.text.trim() == ""
          console.log("I am empty");
      
      else
         console.log("I am filled");
     
  ,
),