一、输入框 TextField
Flutter的输入框是常见的用户界面组件之一，用于接收用户的文本输入。Flutter提供了TextField组件来创建输入框，并提供了许多属性来定制输入框的外观和行为。本文将详细介绍Flutter的输入框，并解释常用属性的作用，提供具体代码示例，并讨论自定义输入框样式和日常开发中需要注意的事项。
一.1、 属性列表
下面是一些常用的TextField属性以及它们的说明：
controller：控制输入框的文本内容，可以通过TextEditingController进行管理。decoration：输入框的装饰，可以定义输入框的边框、背景、提示文本等样式。obscureText：是否将输入内容隐藏，常用于密码输入框。enabled：输入框是否可编辑。maxLength：允许输入的最大字符数。textInputAction：键盘操作按钮的类型，例如完成、继续等。keyboardType：键盘的类型，如文本、数字、URL等。onChanged：文本变化时的回调函数。onSubmitted：用户提交输入时的回调函数。focusNode：用于控制输入框的焦点获取和失去。autofocus：是否自动获取焦点。style：输入框文本的样式，如字体大小、颜色等。
每一个属性，我们说清楚
a. controller
controller属性用于控制输入框的文本内容，可以通过TextEditingController进行管理。使用TextEditingController可以获取、设置和监听输入框的文本内容。以下是示例代码：
TextEditingController _textController = TextEditingController();
TextField(
controller: _textController,
);
在这个示例中，我们创建了一个TextEditingController对象并将其分配给输入框的controller属性。您可以通过_textController.text来获取或设置输入框中的文本内容。
b. decoration
decoration属性用于定义输入框的装饰，包括边框、背景、提示文本等样式。它使用InputDecoration类来配置输入框的外观。以下是一个示例：
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
filled: true,
fillColor: Colors.grey[200],
hintText: 'Enter your name',
hintStyle: TextStyle(color: Colors.grey),
prefixIcon: Icon(Icons.person),
),
);
在这个示例中，我们使用InputDecoration来定义输入框的装饰。我们设置了边框样式、背景颜色、提示文本和前缀图标。
c. obscureText
obscureText属性用于指定输入框的文本是否应该被隐藏，常用于密码输入框。当设置为true时，输入的文本将以圆点或其他隐藏字符显示。以下是一个示例：
TextField(
obscureText: true,
);
在这个示例中，我们创建了一个密码输入框，将obscureText设置为true，以隐藏输入的密码文本。
d. enabled
enabled属性用于指定输入框是否可编辑。当设置为false时，输入框将变为只读状态，用户无法编辑其中的文本。以下是一个示例：
TextField(
enabled: false,
);
在这个示例中，我们创建了一个只读的输入框，将enabled设置为false，禁止用户编辑文本。
e. maxLength
maxLength属性用于限制输入框可输入的最大字符数。设置此属性后，用户将无法输入超过指定字符数的文本。以下是一个示例：
TextField(
maxLength: 10,
);
在这个示例中，我们创建了一个最大长度为10的输入框，用户无法输入超过10个字符的文本。
f. textInputAction
textInputAction属性用于指定键盘操作按钮的类型，例如完成、继续等。它们用于控制键盘上右下角按钮的标签和功能。以下是一个示例：
TextField(
textInputAction: TextInputAction.done,
);
在这个示例中，我们将键盘操作按钮的类型设置为”完成”，用户在键盘上点击”完成”按钮后，会触发onSubmitted回调函数。
g. keyboardType
keyboardType属性用于指定键盘的类型，例如文本、数字、URL等。根据需要选择适合的键盘类型，以提供更好的用户体验。以下是一个示例：
TextField(
keyboardType: TextInputType.emailAddress,
);
在这个示例中，我们将键盘类型设置为电子邮件地址类型，以便用户输入邮箱地址。
h. onChanged和onSubmitted
onChanged和onSubmitted属性用于定义输入框文本变化和提交输入的回调函数。onChanged在输入框文本发生变化时被调用，而onSubmitted在用户提交输入时被调用。以下是示例代码：
TextField(
onChanged: (value) {
// 处理文本变化
},
onSubmitted: (value) {
// 处理提交输入
},
);
在这个示例中，我们定义了两个回调函数来处理输入框的文本变化和提交输入。
i. style
style属性用于定义输入框文本的样式，如字体大小、颜色等。以下是一个示例：
TextField(
style: TextStyle(
fontSize: 16.0,
color: Colors.black,
),
);
在这个示例中，我们定义了输入框文本的样式，包括字体大小和颜色。
这些属性是使用Flutter输入框时常用的一些属性，它们可以帮助您定制和控制输入框的外观和行为。根据您的需求，灵活运用这些属性可以创建出符合设计要求的输入框。
给我看你的代码啊宝
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: CustomTextFieldPage(),
));
}
class CustomTextFieldPage extends StatefulWidget {
@override
_CustomTextFieldPageState createState() => _CustomTextFieldPageState();
}
class _CustomTextFieldPageState extends State<CustomTextFieldPage> {
// 创建焦点节点对象
FocusNode _nameFocusNode = FocusNode();
FocusNode _passwordFocusNode = FocusNode();
// 记录焦点状态
bool _nameHasFocus = false;
bool _passwordHasFocus = false;
@override
void initState() {
super.initState();
// 监听焦点变化
_nameFocusNode.addListener(_handleNameFocusChange);
_passwordFocusNode.addListener(_handlePasswordFocusChange);
}
@override
void dispose() {
// 移除焦点监听
_nameFocusNode.removeListener(_handleNameFocusChange);
_passwordFocusNode.removeListener(_handlePasswordFocusChange);
_nameFocusNode.dispose();
_passwordFocusNode.dispose();
super.dispose();
}
void _handleNameFocusChange() {
// 处理姓名输入框焦点变化
setState(() {
_nameHasFocus = _nameFocusNode.hasFocus;
});
}
void _handlePasswordFocusChange() {
// 处理密码输入框焦点变化
setState(() {
_passwordHasFocus = _passwordFocusNode.hasFocus;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('自定义输入框'),
),
body: Center(
child: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'请输入您的姓名',
style: TextStyle(fontSize: 18.0),
),
SizedBox(height: 16.0),
TextField(
focusNode: _nameFocusNode,
decoration: InputDecoration(
filled: true,
fillColor: _nameHasFocus ? Colors.lightBlue[100] : Colors.grey[200],
border: OutlineInputBorder(),
hintText: '请输入姓名',
hintStyle: TextStyle(color: Colors.grey),
prefixIcon: Icon(Icons.person),
),
),
SizedBox(height: 16.0),
TextField(
focusNode: _passwordFocusNode,
obscureText: true,
decoration: InputDecoration(
filled: true,
fillColor: _passwordHasFocus ? Colors.lightBlue[100] : Colors.grey[200],
border: OutlineInputBorder(),
hintText: '请输入密码',
hintStyle: TextStyle(color: Colors.grey),
prefixIcon: Icon(Icons.lock),
),
),
],
),
),
),
);
}
}
运行效果
哇偶，好啦。
这段代码的功能是展示一个包含两个自定义样式输入框的页面，并在输入框获得焦点和失去焦点时改变其样式。
在这段代码中，我们使用了 FocusNode 来监听输入框的焦点状态。FocusNode 是一个用于管理焦点的类，在输入框获得或失去焦点时会触发相应的回调函数。
具体来说，代码中的 _nameFocusNode 和 _passwordFocusNode 是两个 FocusNode 实例，分别用于管理姓名输入框和密码输入框的焦点。
通过在 initState() 方法中为每个 FocusNode 添加监听器（addListener），我们能够在焦点状态发生变化时得到通知。具体来说，我们为 _nameFocusNode 添加了 _handleNameFocusChange 回调函数，为 _passwordFocusNode 添加了 _handlePasswordFocusChange 回调函数。
当输入框获得焦点时，_handleNameFocusChange 或 _handlePasswordFocusChange 回调函数会被触发。在这些回调函数中，我们使用 setState() 方法来更新对应的 _nameHasFocus 和 _passwordHasFocus 变量，以记录焦点的状态。
在 build() 方法中，我们根据 _nameHasFocus 和 _passwordHasFocus 变量的值来决定输入框的背景颜色。当输入框获得焦点时，背景颜色设置为浅蓝色（Colors.lightBlue[100]），当输入框失去焦点时，背景颜色设置为灰色（Colors.grey[200]）。
通过这种方式，我们能够根据输入框的焦点状态动态地改变其样式，提供更直观的用户反馈。当用户点击输入框时，输入框会获得焦点，背景颜色变为浅蓝色；当用户点击其他区域时，输入框失去焦点，背景颜色恢复为灰色。
二、表单 Form
输入框当然输入东西，绝大多数情况，就是为了提交啊
既然要提交，那就涉及到表单了
在web的世界，表单的概念强烈一些。原生安卓倒是几乎不存在。但是Flutter，给安排了。
Flutter表单：如何优雅地解决用户输入问题
在应用开发的过程中，接收和处理用户输入通常是一项关键任务，它涉及到数据验证，错误处理，用户体验等方面。在用户输入的流程中，开发者可能会遇到以下几种问题：
- 数据验证：你可能需要确保用户输入的数据符合特定的规则，例如，输入的电子邮件地址是否有效，密码是否足够复杂，输入的日期是否在允许的范围内等。
- 错误处理：如果输入的数据无效，你需要某种方式通知用户并指导他们提供有效的数据。
- 状态管理：在输入的过程中，你需要跟踪用户的输入状态，并可能需要根据这些状态更新UI。
这就是Flutter表单进入的地方。它提供了一种有效的方式来处理和验证用户输入，同时还提供了一种方式来通知用户任何错误，同时跟踪和响应用户的输入状态。让我们看一个例子来说明如何在Flutter中使用表单。
使用Flutter表单
Form是一个容器型的Flutter Widget，它直接继承自StatefulWidget。Form通常用于包含一系列的FormField，它们可以是TextFormField或者自定义的FormField。Form主要用于验证和保存包含的FormField的状态。
Form的参数
Form的主要参数有：
key：Form的GlobalKey，它是可选的，但通常在需要对表单进行验证或保存时使用。child：Typically，它是一个Column或ListView，其中包含一组FormField。autovalidateMode：这个属性决定了表单的自动验证模式。它有三个可选值：AutovalidateMode.disabled（禁用自动验证），AutovalidateMode.always（总是自动验证），和AutovalidateMode.onUserInteraction（当用户交互时自动验证）。onWillPop：这是一个返回Future<bool>的函数，它在用户尝试离开包含表单的页面时被调用。如果这个函数返回false，那么用户将不能离开页面。onChanged：这个函数在表单中的任何FormField的内容发生变化时被调用。
上代码例子
// 引入所需要的包
import 'package:flutter/material.dart';
// 程序主入口
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// 该widget是应用的根
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Form Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Form 示例'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
// 存储标题字符串
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// 为Form创建一个全局的Key，用于识别我们的Form，以便于后续的验证操作
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
// 使用Form构建表单
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Form(
key: _formKey,
// autovalidateMode设定为AutovalidateMode.onUserInteraction，也就是说当用户交互时自动进行表单校验
autovalidateMode: AutovalidateMode.onUserInteraction,
child: Padding(
padding: EdgeInsets.all(20.0),
child: Column(
children: <Widget>[
// 添加一个TextFormField，它是一个带有验证逻辑的文本输入字段
TextFormField(
decoration: InputDecoration(labelText: '请输入内容'),
validator: (value) {
if (value == null || value.isEmpty) {
// 如果用户没有输入任何内容，那么返回的错误提示
return '请输入内容';
}
return null; // 如果一切正常，返回null
},
),
ElevatedButton(
onPressed: () {
// 使用_formKey.currentState?.validate()来触发表单的校验方法
// 检查 currentState 是否为 null，如果不为 null 则调用 validate()
if (_formKey.currentState?.validate() ?? false) {
// 如果所有的表单项的校验都返回null，那么当前表单项所有数据都是合法的，可以进行后续操作
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text('输入内容有效')));
}
},
child: Text('提交'),
),
],
),
),
),
);
}
}
.
在这份代码中，Flutter的表单（Form）及其相关的组件帮助解决了以下几个问题：
- 用户输入验证：在开发应用时，我们经常需要收集用户的输入信息，如用户名、电子邮件、密码等。这时，我们需要确保用户提供的数据是有效的。例如，用户名不能是空的，电子邮件需要符合特定的格式等。Flutter的
Form及其相关的组件提供了方便的验证机制。在代码中，我们为TextFormField设置了validator回调，这个回调能检查用户输入是否为空，并相应地提供错误信息。 - 自动化的错误反馈：当用户输入无效数据时，我们需要及时反馈给用户。在Flutter的表单中，当
validate函数返回非null字符串时，这个字符串会自动显示在与之关联的TextFormField下方，作为错误提示。这使得错误反馈自动化，并简化了UI的更新。 - 组织和管理多个输入字段：在一个表单中，我们可能会有多个输入字段。使用
Form可以方便地管理这些字段。在代码中，我们只需要调用_formKey.currentState?.validate()，就可以触发所有TextFormField的验证操作。 - 用户交互管理：通过
autovalidateMode属性，我们可以控制验证操作的触发时机。在代码中，我们设置autovalidateMode为AutovalidateMode.onUserInteraction，这意味着每当用户与TextFormField交互时（如输入、选择等），都会自动触发验证操作。
总的来说，Flutter的Form及其相关的组件帮助我们简化了用户输入的收集、验证、管理和错误反馈等操作。
何时使用Flutter表单
一般来说，每当你需要收集用户输入的时候，你都可以使用Flutter表单。这包括但不限于以下情况：
- 用户注册和登录页面
- 个人信息更新页面
- 任何需要用户填写和提交信息的场景
使用Flutter表单时需要注意什么
虽然Flutter表单是一个强大的工具，但在使用过程中仍然需要注意一些事项：
- 有效的错误消息：错误消息应该足够清晰，让用户知道他们的输入为什么不符合规则，并且知道他们如何修改。
- 保护用户输入：对于敏感信息，如密码和支付信息，你应该使用适当的安全措施来保护用户数据的安全性，如使用
obscureText属性来隐藏密码输入。 - 适应键盘类型：根据用户输入的数据类型，你可能需要适应不同的键盘类型，如数字键盘或电子邮件键盘，可以通过设置
keyboardType属性来实现。 - 响应性：在用户填写表单时，你的应用应该给出响应，比如当用户完成一项输入或者提交表单时，应用可以通过进度指示器、弹出消息或页面跳转等方式，给出反馈。
总的来说，Flutter表单是一个强大且灵活的工具，它能够帮助开发者优雅地处理用户输入问题。使用Flutter表单，开发者可以更专注于创建更好的用户体验，而不必担心用户输入的处理和验证问题。
