在Flutter清除TextField

TextField和TextFormField是从用户那里获取输入的两个最常见的小部件。它们可以用于制作表格，登录页面等。为了使它们的实施有效而准确，我们需要添加某些功能。在本文中，我们将学习如何在某些操作上清除TextField 。

您的应用程序中可能存在某些情况，您可能需要清除文本字段。假设您正在创建一个表单，提交后将您重定向到新页面，如果现在返回，则输入的文本仍将存在，这并不表示UI良好。因此，在这种情况下，将要求您在提交后清除TextField 。

使用按钮清除TextField：

第1步：创建一个新项目并启动main。dart文件。清除现有代码。

第2步：导入材料。dart文件

import 'package:flutter/material.dart';

步骤3：创建将调用runApp()方法的主方法，并将类的名称传递给此方法。

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

步骤4：创建扩展无状态小部件的根类MyApp()并将TextField小部件添加为子级。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
        appBar: AppBar(
        title: Text('GeeksforGeeks'),
        backgroundColor: Colors.green,
        ),
        body: Center(
          child: TextField()
        )
      )
    );
  }
}      

步骤5：创建一个类型为TextEditingController()的最终变量。此变量用于访问TextField的各种属性和方法。

final fieldText = TextEditingController();

步骤6：创建一个函数clearText()。您可以据此命名。在此函数添加fieldText.clear();

如上所述， TextEditingController()具有各种属性。其中之一是clear()，我们将使用它来清除TextField 。

void clearText() {
    fieldText.clear();
  }

步骤7：创建一个按钮，并将其链接到我们在上一步中创建的clearText()方法。现在，只要您按一下此按钮， TextField就会被清除。

代码 ：

Dart

import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  final fieldText = TextEditingController();
  
  void clearText() {
    fieldText.clear();
  }
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
        title: Text('GeeksforGeeks'),
        backgroundColor: Colors.green,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                width: 250,
                child: TextField(
                  decoration: InputDecoration(
                    hintText: 'Enter Something',
                    focusColor: Colors.green,
                  ),
                  controller: fieldText,
                ),
              ),
              SizedBox(height: 15,),
              RaisedButton(
                onPressed: clearText,
                color: Colors.green,
                child: Text('Clear'),
                textColor: Colors.white,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

上面的代码创建一个带有RaisedButton的TextField 。每当您在TextField中输入内容并按下按钮时，TextField都会被清除。以下是上述实现的输出。

输出 ：

确实有必要添加此功能，因为如果将新屏幕推到包含表单的屏幕上方，然后又返回到表单，则值仍然存在。

使用清除图标清除TextField

另外，如果您想在文本字段本身中添加一个清晰的图标，那么我们也会看到它。

下面是上述情况的图像：

在这种情况下，几乎所有步骤都将与上述步骤相似，唯一的区别是将添加清除图标而不是“升高按钮”。

TextField(
   decoration: InputDecoration(
      hintText: 'Enter Something',
      focusColor: Colors.green,
      suffixIcon: IconButton(     // Icon to 
         icon: Icon(Icons.clear), // clear text
         onPressed: clearText,
    ),
  ),
   controller: fieldText,
),

在上述代码中，有一个TextField并在其后添加了suffixIcon作为装饰。 clearText方法与以上代码中使用的方法相同。

完整的代码：

Dart

import 'package:flutter/material.dart';
  
void main() => runApp(MyApp());
  
class MyApp extends StatelessWidget {
  final fieldText = TextEditingController();
  
  void clearText() {
    fieldText.clear();
  }
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.green,
        ),
        body: Center(
          child: Container(
            width: 250,
            child: TextField(
              decoration: InputDecoration(
                hintText: 'Enter Something',
                focusColor: Colors.green,
                suffixIcon: IconButton(
                  icon: Icon(Icons.clear),
                  onPressed: clearText,
                ),
              ),
              controller: fieldText,
            ),
          ),
        ),
      ),
    );
  }
}

输出 ：