flutter如何实现格式化cursor插件

在Flutter中如何实现一个能够格式化文本的光标插件？比如在输入电话号码或金额时，光标能自动按照特定格式跳转位置。目前尝试过TextEditingController和InputFormatter，但无法完美控制光标的定位。有没有成熟的插件或更好的实现方案？需要支持动态格式切换和光标位置智能调整。

2 回复

使用TextEditingController监听文本变化，结合TextSelection控制光标位置。可在onChanged中通过正则表达式匹配输入内容，动态调整光标到指定位置。

更多关于flutter如何实现格式化cursor插件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现格式化光标插件，可以通过自定义TextInputFormatter和TextEditingController来管理文本格式和光标位置。以下是实现步骤和示例代码：

1. 创建自定义格式化器

继承TextInputFormatter，重写formatEditUpdate方法，处理文本格式和光标位置。

class CursorFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(
    TextEditingValue oldValue,
    TextEditingValue newValue,
  ) {
    // 示例：每4位数字加一个空格（如银行卡号）
    String formattedText = _formatText(newValue.text);
    
    // 计算光标位置偏移
    int offset = _calculateCursorOffset(oldValue, newValue, formattedText);
    
    return TextEditingValue(
      text: formattedText,
      selection: TextSelection.collapsed(offset: offset),
    );
  }

  String _formatText(String text) {
    // 移除所有非数字字符
    String digits = text.replaceAll(RegExp(r'[^\d]'), '');
    // 每4位插入一个空格
    List<String> chunks = [];
    for (int i = 0; i < digits.length; i += 4) {
      chunks.add(digits.substring(i, i + 4 > digits.length ? digits.length : i + 4));
    }
    return chunks.join(' ');
  }

  int _calculateCursorOffset(TextEditingValue oldValue, TextEditingValue newValue, String formattedText) {
    int oldOffset = oldValue.selection.extentOffset;
    int newOffset = newValue.selection.extentOffset;
    
    // 简单逻辑：根据字符增减调整光标
    if (newValue.text.length > oldValue.text.length) {
      // 输入字符时，光标移动到格式化后对应位置
      return newOffset + (formattedText.length - newValue.text.length);
    } else {
      // 删除字符时保持相对位置
      return newOffset.clamp(0, formattedText.length);
    }
  }
}

2. 在TextField中使用

将自定义格式化器应用到TextField的inputFormatters属性：

TextField(
  controller: _controller,
  inputFormatters: [CursorFormatter()],
  keyboardType: TextInputType.number,
)

3. 高级优化

  • 精确光标控制：通过比较新旧文本差异，精确计算光标应处位置。
  • 正则表达式：根据需求调整_formatText中的正则规则（如日期、电话等格式）。
  • 性能优化：避免在格式化过程中进行复杂计算，确保输入流畅性。

注意事项

  • 格式化可能影响用户输入体验，需测试各种边界情况（如连续删除、粘贴操作）。
  • 复杂格式（如动态掩码）可能需要结合TextEditingController监听实时调整。

通过以上方法，即可实现基础的光标感知文本格式化功能。根据具体需求调整格式化逻辑即可适配不同场景。

回到顶部