Flutter中如何在TextField的文本中间插入字符？

两种场景说明 #

1. 用户手动插入：TextField默认支持直接在光标位置输入字符，只要正确绑定TextEditingController，用户拖动光标到目标位置后直接输入即可，无需额外代码。
2. 程序自动插入：如果需要通过代码将字符插入到指定位置，可通过TextEditingController实现，具体步骤如下：

实现步骤与代码示例 #

1. 初始化TextEditingController

先给TextField绑定控制器，可初始设置默认文本：

final TextEditingController _controller = TextEditingController(text: 'I run faster than him.');

2. 编写插入逻辑

通过以下步骤完成自动插入：

• 获取当前文本，定位插入位置（这里以找到run的起始索引为例）
• 拼接新文本，同时设置插入后的光标位置（可选）
• 更新控制器的value属性，同步文本和光标状态

void insertTargetText() {
  String currentText = _controller.text;
  // 找到"run"的起始索引
  int insertPosition = currentText.indexOf('run');
  
  if (insertPosition != -1) {
    // 拼接新文本
    String newText = currentText.substring(0, insertPosition) + 'can ' + currentText.substring(insertPosition);
    // 更新控制器，光标定位到插入内容的末尾
    _controller.value = TextEditingValue(
      text: newText,
      selection: TextSelection.collapsed(offset: insertPosition + 4), // "can "长度为4
    );
  }
}

3. 完整页面示例

将逻辑整合到StatefulWidget中：

class TextFieldInsertDemo extends StatefulWidget {
  const TextFieldInsertDemo({super.key});

  @override
  State<TextFieldInsertDemo> createState() => _TextFieldInsertDemoState();
}

class _TextFieldInsertDemoState extends State<TextFieldInsertDemo> {
  final TextEditingController _controller = TextEditingController(text: 'I run faster than him.');

  void insertTargetText() {
    String currentText = _controller.text;
    int insertPosition = currentText.indexOf('run');
    
    if (insertPosition != -1) {
      String newText = '${currentText.substring(0, insertPosition)}can ${currentText.substring(insertPosition)}';
      _controller.value = TextEditingValue(
        text: newText,
        selection: TextSelection.collapsed(offset: insertPosition + 4),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('TextField插入示例')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _controller,
              onChanged: (value) {
                // 文本变化时的自定义处理
              },
              decoration: const InputDecoration(
                labelText: 'Enter your text',
              ),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: insertTargetText,
              child: const Text('在run前插入"can "'),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

关键说明 #

• 使用TextEditingController.value更新文本和光标，能确保两者状态一致，避免光标错位
• 若插入位置固定，可直接传入固定索引（比如示例中run的起始索引是2，也可直接写insertPosition = 2）
• 手动插入时，只要控制器绑定正确，用户拖动光标后输入的字符会自动插入到光标位置

内容的提问来源于stack exchange，提问作者Rosh