在Flutter清除 TextField

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

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

使用按钮清除 TextField ：

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

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

import 'package:flutter/material.dart';

第 3 步：创建将调用 runApp() 方法的 main 方法并将您的类的名称传递给此方法。

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

第 4 步：创建扩展 Stateless Widget 的根类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,
            ),
          ),
        ),
      ),
    );
  }
}

输出 ：