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,
),
],
),
),
),
);
}
}
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,
),
),
),
),
);
}
}
上面的代码创建了一个带有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,
),
),
),
),
);
}
}
输出 :