Flutter如何实现带数学运算符的输入键盘，类似Venmo的交互效果？

DevOps 小满

2026-10-1

Flutter实现带数学运算符自定义键盘的方案

官方keyboardType不支持自定义运算符按键，也没有内置对应键盘类型，需要手动实现自定义键盘替代系统键盘，具体实现步骤如下：

步骤1：禁用系统键盘弹出

给目标TextField配置两个参数，保留光标同时阻止系统键盘唤起：

TextField(
  controller: _inputController,
  readOnly: true, // 禁止系统键盘弹出
  showCursor: true, // 保留输入光标
  // 其他配置...
)

步骤2：实现自定义键盘UI
参考Venmo的键盘布局，用GridView或者行列组合实现数字、运算符、删除、确认等按键，参考效果如下：

每个按键绑定点击事件，触发对应输入逻辑。

步骤3：实现输入控制逻辑

通过TextEditingController操控输入框的内容和光标位置：

插入字符逻辑（数字、运算符、小数点等按键）

void _insertContent(String insertStr) {
  final text = _inputController.text;
  final selection = _inputController.selection;
  // 替换选中区域内容/在光标位置插入内容
  final newText = text.replaceRange(selection.start, selection.end, insertStr);
  _inputController.value = TextEditingValue(
    text: newText,
    selection: TextSelection.collapsed(offset: selection.start + insertStr.length),
  );
}

删除字符逻辑

void _deleteChar() {
  final text = _inputController.text;
  final selection = _inputController.selection;
  if (selection.start <= 0) return;
  // 删除光标前一个字符/删除选中内容
  final newText = text.replaceRange(selection.start - 1, selection.end, '');
  _inputController.value = TextEditingValue(
    text: newText,
    selection: TextSelection.collapsed(offset: selection.start - 1),
  );
}

步骤4：页面布局整合
将自定义键盘放在页面底部，可以用Scaffold的bottomNavigationBar属性挂载，监听输入框的焦点状态控制键盘的显隐即可。
可选简化方案
若不想手动实现全量逻辑，可以使用第三方包flutter_custom_keyboard，直接配置按键布局和回调即可快速完成开发。