介绍了文本部件，用于显示文本。但是在我们进行日常软件开发过程中，经常是需要获取用户键入的内容，比如用户名、密码、性别、喜好等等。
Flutter 提供了丰富的部件来处理用户输入，本节将主要介绍以下几个常用部件TextField、Form、CheckBox、Radio、switch、Slider。
TextFieldTextField 不仅允许用户输入文本，而且提供了多种配置选项，使得开发者能够轻松适应各种输入场景。
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 回调中，我们检查表单的验证状态，如果通过验证，则执行相应的操作。
在 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 状态来控制哪一个单选框被选中。
SwitchSwitch部件的构造函数提供了一些参数，用于配置开关的外观和行为。
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 回调函数将被调用，并传递新的状态。开启状态下，开关的颜色为蓝色。
SliderSlider部件是用于在一个范围内选择值的滑块。
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（滑块）:
- 用于在一个范围内选择值。
- 适用于需要用户在一个连续的范围内选择数值的场景，如音量调节、亮度调节等。
这些输入组件可以根据应用程序的需求进行组合和使用，帮助构建交互丰富的用户界面。选择正确的组件取决于您的应用场景，以提供用户良好的输入和选择体验。
