网站首页 > 技术文章正文

Flutter——输入部件（flutter cupertinotextfield）

hmc789 2024-11-17 11:21:41 技术文章 2 ℃

上一节介绍了文本部件，用于显示文本。但是在我们进行日常软件开发过程中，经常是需要获取用户键入的内容，比如用户名、密码、性别、喜好等等。

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（滑块）:

用于在一个范围内选择值。
适用于需要用户在一个连续的范围内选择数值的场景，如音量调节、亮度调节等。

这些输入组件可以根据应用程序的需求进行组合和使用，帮助构建交互丰富的用户界面。选择正确的组件取决于您的应用场景，以提供用户良好的输入和选择体验。

上一篇： HTML表单number和range高级元素的使用
下一篇： HTML5新增常用标签及浏览器版本兼容性问题解决

网站首页 > 技术文章 正文