Flutter文本输入优化插件perfect_text_field的使用

Perfect TextField

PerfectTextField 是一个为 Flutter 提供的多功能且可定制化的文本字段包。它基于 TextFormField 构建，并集成了自动完成和自定义文本控制器等附加功能，适用于高级文本编辑场景。

特性

PerfectTextField

• 自定义文本控制器：集成 PerfectTextController 以增强对文本编辑和状态管理的控制。
• 自动完成功能：支持通过 PerfectAutoCompleteTextField 实现自动完成。
• 灵活的文本输入：允许通过如 cursorColor 和 cursorRadius 等参数进行定制，以更好地集成到用户界面中。
• 事件处理：对外部点击的自定义事件处理，使表单更具互动性。
• 样式选项：提供了丰富的样式选项，包括默认和可定制的文本样式和装饰。

PerfectTextController

• 自定义文本控制器：使用 PerfectTextController 来增强对文本编辑、焦点管理和状态更新的控制，支持通过 get 进行响应式编程。
• 响应式状态管理：利用 Rx 变量来响应地管理和观察文本字段的内容和焦点状态的变化。
• 高级焦点控制：提供如 selectAll、unfocus 和 requestFocus 等方法，可以程序化地控制焦点和文本选择。
• 自动完成功能：无缝集成到 PerfectTextField 中。
• 事件处理：增强了对文本和焦点变化的事件处理能力，以及外部点击的自定义动作。

PerfectRawAutocomplete

• 可定制的选项：完全可定制的自动完成选项，可以根据应用需求进行样式和处理方式的调整。
• 响应式用户输入处理：根据用户输入动态生成建议。
• 键盘导航：支持通过键盘操作在建议之间导航。
• 选择回调：提供处理建议选择的回调。
• 高级文本处理：与自定义的 PerfectTextController 集成，以获得更精细的文本输入和焦点管理控制。

DecimalNumberFormatter

• 值约束：允许设置输入的最小值和最大值。
• 小数精度：控制允许的小数点后的数字位数。
• 智能校正：如果输入超过最大小数长度，可选地替换最后一位数字，确保连续输入而无需手动删除字符。
• 灵活的输入处理：防止不希望的输入，如前导零和不正确的十进制点位置。

开始使用

要使用此包，请在 pubspec.yaml 文件中添加 perfect_text_field 作为依赖项。

dependencies:
  flutter:
    sdk: flutter
  perfect_text_field: 1.0.0

PerfectTextField 使用

以下是如何在 Flutter 应用程序中使用 PerfectTextField 的简单示例：

import 'package:flutter/material.dart';
import 'package:perfect_text_field/perfect_text_field.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Perfect TextField Example')),
        body: Center(
          child: PerfectTextField(
            controller: PerfectTextController(
              onTextChange: (text) {
                print("Text changed: $text");
              },
              onFocusChange: (hasFocus) {
                print("Field has focus: $hasFocus");
              },
            ),
            inputFormatters: [
              DecimalNumberFormatter(
                min: 1.0,
                max: 100.0,
                decimalLength: 2,
              )
            ],
            keyboardType: TextInputType.numberWithOptions(decimal: true),
          ),
        ),
      ),
    );
  }
}

PerfectRawAutocomplete 使用

以下是 PerfectRawAutocomplete 的使用示例：

import 'package:flutter/material.dart';
import 'package:perfect_raw_autocomplete/perfect_raw_autocomplete.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Perfect Raw Autocomplete Example')),
        body: PerfectRawAutocomplete<String>(
          optionsBuilder: (TextEditingValue textEditingValue) {
            // 假设你的逻辑来生成自动完成建议
            return ['Apple', 'Banana', 'Cherry'].where((String option) {
              return option.contains(textEditingValue.text.toLowerCase());
            });
          },
          fieldViewBuilder: (BuildContext context, PerfectTextController textController, VoidCallback onFieldSubmitted) {
            return TextFormField(
              controller: textController.textController,
              onFieldSubmitted: (String value) => onFieldSubmitted(),
            );
          },
          optionsViewBuilder: (BuildContext context, PerfectAutocompleteOnSelected<String> onSelected, Iterable<String> options, void Function(Size?) onSizeChange) {
            return Material(
              elevation: 4.0,
              child: ListView(
                children: options.map((String option) {
                  return GestureDetector(
                    onTap: () {
                      onSelected(option);
                    },
                    child: ListTile(
                      title: Text(option),
                    ),
                  );
                }).toList(),
              ),
            );
          },
          onSelected: (String selection) {
            print('You just selected $selection');
          },
        ),
      ),
    );
  }
}