如何在Flutter TextField中为新行自动添加编号？

要实现用户按下回车换行时自动添加编号，核心是监听回车事件，根据当前文本的行数生成对应编号并插入新行开头，以下是具体实现方案：

核心思路 #

通过TextField的onKey回调监听回车键，触发时计算下一个编号，将编号插入新行，并调整光标位置到末尾。

修改后的完整代码 #

SingleChildScrollView(
  child: Column(
    children: [
      const Text(
        'Instructions:',
        style: TextStyle(color: primaryColor),
      ),
      Container(
        margin: EdgeInsets.all(14),
        padding: EdgeInsets.all(5),
        decoration: BoxDecoration(color: mobileSearchColor),
        child: TextField(
          style: TextStyle(height: 2),
          controller: _textAreaController,
          keyboardType: TextInputType.multiline,
          maxLines: 10,
          onKey: (event) {
            if (event.logicalKey == LogicalKeyboardKey.enter) {
              final currentText = _textAreaController.text;
              final lines = currentText.split('\n');
              
              // 计算下一个编号
              int nextNum;
              if (lines.isEmpty) {
                nextNum = 1;
              } else {
                final lastLine = lines.last.trim();
                // 处理最后一行是空行的情况
                if (lastLine.isEmpty) {
                  nextNum = lines.length;
                } else {
                  nextNum = lines.length + 1;
                }
              }
              
              // 插入换行和编号
              _textAreaController.text = '$currentText\n$nextNum. ';
              // 将光标定位到文本末尾
              _textAreaController.selection = TextSelection.fromPosition(
                TextPosition(offset: _textAreaController.text.length),
              );
              return KeyEventResult.handled;
            }
            return KeyEventResult.ignored;
          },
          decoration: const InputDecoration(
            contentPadding: EdgeInsets.only(bottom: 5),
            hintText: '1.\n2.\n3.\n4.\n5.\n',
            focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(width: 1, color: primaryColor),
            ),
          ),
        ),
      ),
    ],
  ),
)

关键逻辑说明 #

1. 监听回车事件：通过onKey捕获回车键，覆盖系统默认的单纯换行行为
2. 编号计算：拆分当前文本为行，根据最后一行是否为空判断下一个编号的数值
3. 文本更新与光标调整：插入带编号的新行后，将光标移到文本末尾，保证用户可以继续输入

如果需要处理更复杂的场景（比如删除行后自动重新编号、手动修改编号后的同步调整），可以进一步扩展文本分析逻辑，比如用正则匹配已有的编号并重新排序，但上述代码已能满足基础的自动编号需求。

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