探索Flutter：输入部件的奥秘
发表时间: 2024-01-26 14:46
上一节介绍了文本部件，用于显示文本。但是在我们进行日常软件开发过程中，经常是需要获取用户键入的内容，比如用户名、密码、性别、喜好等等。
Flutter 提供了丰富的部件来处理用户输入，本节将主要介绍以下几个常用部件TextField、Form、CheckBox、Radio、Switch、Slider。
TextField
TextField 不仅允许用户输入文本，而且提供了多种配置选项，使得开发者能够轻松适应各种输入场景。
1.1 构造方法
TextField( controller: _textController, decoration: InputDecoration( labelText: 'Enter your text', hintText: 'Type something...', prefixIcon: Icon(Icons.text_fields), suffixIcon: Icon(Icons.clear), border: OutlineInputBorder(), ), keyboardType: TextInputType.text, textInputAction: TextInputAction.done, onChanged: (text) { // Handle text changes }, onSubmitted: (text) { // Handle text submission }, maxLength: 50, maxLines: 1, obscureText: false, autocorrect: true, enableSuggestions: true, autofocus: false, readOnly: false, style: TextStyle(fontSize: 16.0, color: Colors.black),)关键属性和参数：
- controller: 使用 TextEditingController 对象来控制输入框的内容，允许读取或修改文本。
- decoration: 通过 InputDecoration 对象设置输入框的外观，包括标签、提示文本、边框等。
- keyboardType: 设置键盘的类型，例如 TextInputType.text、TextInputType.emailAddress 等。
- textInputAction: 设置键盘上的操作按钮，例如 TextInputAction.done、TextInputAction.next 等。
- onChanged: 每次文本发生变化时调用的回调函数。
- onSubmitted: 用户点击键盘上的提交按钮时调用的回调函数。
- maxLength: 限制输入的最大字符数。
- maxLines: 设置文本框的最大行数。
- obscureText: 是否隐藏输入的文本，通常用于密码输入。
- autocorrect: 是否启用自动纠正。
- enableSuggestions: 是否启用文本输入框中的建议。
- autofocus: 是否自动获取焦点。
- readOnly: 是否是只读文本框。
- style: 设置文本的样式，如字体大小、颜色等。
1.2 基本使用
首先，让我们看一下 TextField 的最基本用法。以下是一个简单的 TextField 示例：
TextField( decoration: InputDecoration( labelText: 'Enter your text', ),)在这个例子中，我们创建了一个基本的文本输入框，用于用户输入文本。decoration 属性允许我们定义输入框的外观，包括标签（labelText）等。
1.3 控制输入内容
使用 TextField 时，通常我们需要读取或修改输入框中的文本。为了实现这一点，我们可以使用 TextEditingController。
TextEditingController _textController = TextEditingController();TextField( controller: _textController, decoration: InputDecoration( labelText: 'Enter your text', ),)通过将 _textController 传递给 controller 属性，我们现在能够在需要时读取或修改文本。
1.4 样式
TextField 提供了丰富的外观定制选项。通过 InputDecoration 属性，我们可以设置标签、提示文本、边框等。
TextField( decoration: InputDecoration( labelText: 'Username', hintText: 'Enter your username', prefixIcon: Icon(Icons.person), suffixIcon: Icon(Icons.clear), border: OutlineInputBorder(), ),)在这个例子中，我们添加了前缀图标（prefixIcon）和后缀图标（suffixIcon），同时使用 OutlineInputBorder 设置了输入框的边框。
1.5 输入类型
TextField 通过keyboardType属性来指定所使用的键盘类型，根据输入的内容类型选择合适的键盘。以下是一些 keyboardType 的示例代码：
//文本类型TextField( keyboardType: TextInputType.text, decoration: InputDecoration( labelText: 'Enter your text', ),)//数字类型//显示一个数字键盘，只允许输入数字TextField( keyboardType: TextInputType.number, decoration: InputDecoration( labelText: 'Enter a number', ),)//可见密码//用于输入密码时可以看到实际的字符TextField( keyboardType: TextInputType.visiblePassword, decoration: InputDecoration( labelText: 'Enter your password', ),)1.6 键盘操作按钮
TextField通过textInputAction 属性用于设置在键盘上显示的操作按钮。它可以用来指示用户完成当前输入框后的操作。以下是一些使用 textInputAction 的示例代码：
//下一步//当用户点击键盘上的“下一步”按钮时，会触发 onSubmitted 回调，并将焦点移动到下一个输入框TextField( textInputAction: TextInputAction.next, decoration: InputDecoration( labelText: 'Username', ), onSubmitted: (text) { // Handle username submission // Move focus to the next input field FocusScope.of(context).nextFocus(); },)// 完成//当用户点击键盘上的“完成”按钮时，会触发 onSubmitted 回调，执行密码的提交操作TextField( textInputAction: TextInputAction.done, decoration: InputDecoration( labelText: 'Password', ), obscureText: true, onSubmitted: (text) { // Handle password submission // Perform any final actions },)//搜索TextField( textInputAction: TextInputAction.search, decoration: InputDecoration( labelText: 'Search', ), onSubmitted: (text) { // Handle search submission // Perform search operation },)//发送TextField( textInputAction: TextInputAction.send, decoration: InputDecoration( labelText: 'Message', ), onSubmitted: (text) { // Handle message submission // Send the message },)Form
用于组织和验证表单字段的重要小部件。它提供了一种结构化的方式来处理用户输入，并允许轻松执行表单验证。
下面的代码将创建一个简单的表单，其中包含一个文本输入框和一个提交按钮。在这个例子中，我们使用 TextFormField 来接收用户的文本输入。
class MyForm extends StatefulWidget { @override _MyFormState createState() => _MyFormState();}class _MyFormState extends State<MyForm> { final _formKey = GlobalKey<FormState>(); final _textController = TextEditingController(); @override Widget build(BuildContext context) { return Form( key: _formKey, child: Padding( padding: const EdgeInsets.all(16.0), child: Column( children: [ TextFormField( controller: _textController, decoration: InputDecoration( labelText: 'Enter your text', ), validator: (value) { if (value == null || value.isEmpty) { return 'Please enter some text'; } return null; }, ), SizedBox(height: 16.0), ElevatedButton( onPressed: () { if (_formKey.currentState!.validate()) { // Form is valid, perform action String enteredText = _textController.text; print('Entered text: $enteredText'); } }, child: Text('Submit'), ), ], ), ), ); }}关键代码解析：
- 使用 TextFormField 来创建文本输入框，通过 controller 属性与 _textController 进行关联。
- validator 回调函数用于在提交表单时验证输入内容。
- 在提交按钮的 onPressed 回调中，我们检查表单的验证状态，如果通过验证，则执行相应的操作。
CheckBox
在 Flutter 中，Checkbox 是用于创建复选框（Checkbox）的部件，用户可以通过点击复选框来选择或取消选择。
3.1 构造函数
Checkbox({ Key? key, bool value = false, required ValueChanged<bool?>? onChanged, Color? activeColor, Color? checkColor, MaterialTapTargetSize? materialTapTargetSize, VisualDensity? visualDensity, bool autofocus = false,})主要的参数说明：
- key: 用于小部件的标识符，通常用于在小部件树中唯一标识小部件。
- value: 复选框的当前状态，即是否选中。默认为 false。
- onChanged: 当用户点击复选框时调用的回调函数。该回调函数接受一个布尔值参数，表示新的状态。
- activeColor: 设置选中状态下复选框的颜色。
- checkColor: 设置选中状态下勾选的颜色。
- materialTapTargetSize: 控制响应区域的大小。
- visualDensity: 控制布局的紧凑性。
- autofocus: 是否自动获取焦点。
3.2 基本使用
Checkbox( value: true, onChanged: (value) { // Handle checkbox state change }, activeColor: Colors.blue, checkColor: Colors.white,)在这个示例中，Checkbox 被创建为已选中状态，当用户点击时，onChanged 回调函数将被调用，并传递新的状态。选中状态下，复选框的颜色为蓝色，勾选的颜色为白色。
Radio
在 Flutter 中，Radio 是用于创建单选框的小部件，用户可以从一组选项中选择一个。
4.1 构造函数
Radio<T>({ Key? key, required T value, required T groupValue, required ValueChanged<T?> onChanged, Color? activeColor, FocusNode? focusNode, MaterialTapTargetSize? materialTapTargetSize, Color? fillColor, bool toggleable = false, bool autofocus = false,})主要参数说明：
- key: 用于小部件的标识符，通常用于在小部件树中唯一标识小部件。
- value: 用于设置或获取单选框的值，即该单选框代表的选项。
- groupValue: 当前组中所有单选框共享的值，用于确定哪个单选框被选中。
- onChanged: 当用户点击单选框时调用的回调函数。该回调函数接受一个泛型参数，表示新的状态。
- activeColor: 设置选中状态下单选框的颜色。
- focusNode: 用于控制焦点的对象，通常用于处理键盘事件。
- materialTapTargetSize: 控制响应区域的大小。
- fillColor: 选中状态下单选框的填充颜色。
- toggleable: 如果为 true，则单选框在点击时将切换其选中状态；如果为 false，则单选框只能通过 groupValue 和 onChanged 控制。
- autofocus: 是否自动获取焦点。
4.2 基本使用
Radio<String>( value: 'Option 1', groupValue: selectedValue, onChanged: (value) { setState(() { selectedValue = value!; }); }, activeColor: Colors.blue,)在这个示例中，Radio 被创建为表示字符串类型的单选框，通过 value 和 groupValue 来控制选中状态，通过 onChanged 来处理状态的变化。选中状态下，单选框的颜色为蓝色。
Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Radio( value: 'Option 1', groupValue: selectedValue, onChanged: (value) { setState(() { selectedValue = value.toString(); }); }, ), Radio( value: 'Option 2', groupValue: selectedValue, onChanged: (value) { setState(() { selectedValue = value.toString(); }); }, ), Radio( value: 'Option 3', groupValue: selectedValue, onChanged: (value) { setState(() { selectedValue = value.toString(); }); }, ), ], );在这个示例中，Column包含了三个单选框，通过 selectedValue 状态来控制哪一个单选框被选中。
Switch
Switch部件的构造函数提供了一些参数，用于配置开关的外观和行为。
5.1 构造函数
Switch({ Key? key, required bool value, required ValueChanged<bool?> onChanged, Color? activeColor, Color? activeTrackColor, Color? inactiveThumbColor, Color? inactiveTrackColor, ImageProvider? activeThumbImage, ImageErrorListener? onActiveThumbImageError, ImageProvider? inactiveThumbImage, ImageErrorListener? onInactiveThumbImageError, MaterialTapTargetSize? materialTapTargetSize, DragStartBehavior dragStartBehavior = DragStartBehavior.start, Color? focusColor, Color? hoverColor, Color? splashColor, FocusNode? focusNode, bool autofocus = false, MouseCursor? mouseCursor,})主要参数说明：
- key: 用于小部件的标识符，通常用于在小部件树中唯一标识小部件。
- value: 用于设置或获取开关的当前状态，即是否开启。
- onChanged: 当用户切换开关时调用的回调函数。该回调函数接受一个布尔值参数，表示新的状态。
- activeColor: 设置开启状态下开关的颜色。
- activeTrackColor: 设置开启状态下开关的轨道颜色。
- inactiveThumbColor: 设置关闭状态下开关的滑块颜色。
- inactiveTrackColor: 设置关闭状态下开关的轨道颜色。
- activeThumbImage: 设置开启状态下开关的自定义滑块图像。
- onActiveThumbImageError: 在加载开启状态下开关的自定义滑块图像时发生错误时的回调函数。
- inactiveThumbImage: 设置关闭状态下开关的自定义滑块图像。
- onInactiveThumbImageError: 在加载关闭状态下开关的自定义滑块图像时发生错误时的回调函数。
- materialTapTargetSize: 控制响应区域的大小。
- dragStartBehavior: 拖动开始的行为。
- focusColor: 获取焦点时的颜色。
- hoverColor: 鼠标悬停时的颜色。
- splashColor: 点击时的颜色。
- focusNode: 用于控制焦点的对象，通常用于处理键盘事件。
- autofocus: 是否自动获取焦点。
- mouseCursor: 鼠标光标的样式。
5.2 基本使用
Switch( value: true, onChanged: (value) { // Handle switch state change }, activeColor: Colors.blue,)在这个示例中，Switch 被创建为已开启状态，当用户点击开关时，onChanged 回调函数将被调用，并传递新的状态。开启状态下，开关的颜色为蓝色。
Slider
Slider部件是用于在一个范围内选择值的滑块。
6.1 构造函数
Slider({ Key? key, required double value, required double min, required double max, ValueChanged<double>? onChanged, ValueChanged<double>? onChangeStart, ValueChanged<double>? onChangeEnd, SliderThumbShape? thumb, SliderTickMarkShape? tickMark, SliderTrackShape? track, bool? activeColor, bool? inactiveColor, int? divisions, bool autofocus = false, FocusNode? focusNode, double label, double? semanticFormatterCallback, bool isDiscrete = false, MouseCursor? mouseCursor, ShowValueIndicator? showValueIndicator, OverlayShape? overlayShape, double? trackHeight, bool? primary, Color? overlayColor, Color? valueIndicatorColor, TextStyle? valueIndicatorTextStyle, BoxConstraints? valueIndicatorMaxSize, bool? readOnly,})常用参数的说明：
- value: 当前滑块的值，必须在 min 和 max 范围内。
- min: 滑块的最小值。
- max: 滑块的最大值。
- onChanged: 当用户滑动滑块时的回调函数，传递当前滑块的值。
- onChangedStart: 当用户开始滑动滑块时的回调函数，传递开始滑动时的值。
- onChangedEnd: 当用户停止滑动滑块时的回调函数，传递停止滑动时的值。
- thumb: 定义滑块的形状。
- tickMark: 定义刻度的形状。
- track: 定义轨道的形状。
- divisions: 如果不为 null，则滑块轨道将被分为指定的部分，并显示相应的刻度标记。
- label: 指定的标签，显示在滑块旁边，表示当前值。
- isDiscrete: 如果为 true，则滑块将是离散的，显示刻度标记和标签。
- showValueIndicator: 控制是否显示值指示器。
- overlayShape: 定义滑块上方的形状。
- trackHeight: 滑块轨道的高度。
- primary: 如果为 true，则滑块将是主要的焦点。
- overlayColor: 滑块上方的颜色。
- valueIndicatorColor: 值指示器的颜色。
- valueIndicatorTextStyle: 值指示器文本的样式。
- valueIndicatorMaxSize: 值指示器的最大大小。
- readOnly: 如果为 true，则滑块将是只读的。
6.2 基本使用
Slider( value: _sliderValue, min: 0.0, max: 100.0, onChanged: (value) { setState(() { _sliderValue = value; }); }, ),这段代码创建了一个滑块，允许用户在0到100的范围内选择一个值。当用户滑动滑块时，onChanged 回调函数被调用，更新 _sliderValue，并且界面会刷新以显示新的值。
小结
TextField（文本输入框）:
- 用于接收单行文本输入，如用户名、搜索等。
- 支持装饰样式和各种输入限制，如输入验证等。
Form（表单）:
- 用于收集和验证用户输入的一组相关数据。
- 包含多个输入字段，可通过 Form 进行整体验证。
Checkbox（复选框）:
- 允许用户从多个选项中选择多个。
- 适用于需要用户进行多选的场景，如选择多个兴趣爱好等。
Radio（单选框）:
- 允许用户从多个选项中选择一个。
- 适用于需要用户进行单选的场景，如性别、状态等。
Switch（开关）:
- 用于切换开关状态，表示启用或禁用某项功能。
- 适用于需要用户进行开关操作的场景，如启用/禁用通知。
Slider（滑块）:
- 用于在一个范围内选择值。
- 适用于需要用户在一个连续的范围内选择数值的场景，如音量调节、亮度调节等。
这些输入组件可以根据应用程序的需求进行组合和使用，帮助构建交互丰富的用户界面。选择正确的组件取决于您的应用场景，以提供用户良好的输入和选择体验。
鲁公网安备37020202000738号