📜  在Flutter清除 TextField

📅  最后修改于: 2021-09-23 06:28:35             🧑  作者: Mango

TextFieldTextFormField是获取用户输入的两个最常见的小部件。它们可以用于制作表单、登录页面等。为了使它们的实现有效和准确,我们需要添加某些功能。在本文中,我们将学习如何清除某些操作的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,
              ),
            ],
          ),
        ),
      ),
    );
  }
}


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,
            ),
          ),
        ),
      ),
    );
  }
}


上面的代码创建了一个带有RaisedButtonTextField 每当您在 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,
            ),
          ),
        ),
      ),
    );
  }
}

输出 :