Flutter技术问题：如何实现支持光标导航且可嵌入Chip的TextField

这个需求我之前也帮人梳理过，确实市面上现成的Chip输入组件大多只支持在末尾添加Chip，要实现光标自由导航、还能在Chip中间插入文本，得从数据结构到渲染逻辑搭一套核心机制，我给你拆解下关键思路和实现步骤：

本质上这是富文本输入的特殊场景——我们不能把输入内容当成纯文本处理，得拆成「普通文本段」和「Chip段」的混合集合，再基于这个集合处理光标定位、编辑、渲染的全流程。

1. 先搞定数据结构 #

用数组来维护输入内容的分段，每个元素标记类型和内容，比如：

// 示例结构：文本+Chip+文本的混合内容
const contentSegments = [
  { type: 'text', value: '今天要去买' },
  { type: 'chip', value: '牛奶', id: 'chip-001' },
  { type: 'text', value: '和' },
  { type: 'chip', value: '面包', id: 'chip-002' },
  { type: 'text', value: '，别忘了' }
];

不管光标在哪个位置，我们都能通过这个数组定位到对应的分段，进行插入、删除、修改操作。

2. 光标位置的映射是关键 #

原生输入框的光标只认纯文本字符数，但我们的内容混了Chip，所以必须做光标位置的双向转换：

• 把原生光标位置（纯文本偏移量）转换成「分段数组的索引 + 分段内偏移量」
• 反过来，当我们修改分段数组后，也要能把目标位置转换成原生光标能识别的偏移量

举个例子：把每个Chip算成1个虚拟字符，上面的示例总长度就是 5 + 1 + 1 + 1 + 4 = 12。如果原生光标在第6位，就对应第一个Chip的位置；在第7位，就对应后面的「和」文本段的开头。

3. 自定义渲染容器，别用原生TextField #

原生TextField没法混合渲染Chip和文本，得用contenteditable的容器（比如React/Vue里的自定义div），然后把分段数组渲染成：

• 普通文本段：直接渲染成文本节点
• Chip段：渲染成带样式的Chip组件，设置contenteditable="false"（避免用户编辑Chip内部），同时加tabindex确保光标能通过键盘导航到Chip前后

4. 编辑逻辑的边界处理 #

（1）文本输入与Chip转换 #

当用户输入时，先找到光标所在的分段：

• 如果在text分段里，直接修改该分段的value
• 触发转换规则（比如输入逗号、空格，或者手动点击转换按钮）时，把当前text分段中符合规则的部分拆成新的Chip分段和剩余的text分段

（2）光标导航 #

• 键盘左右键：当光标在Chip的前/后时，要正确跳转到相邻的分段（比如光标在Chip左边，按右键要跳到Chip右边的文本段）
• 点击Chip旁边的空白：要计算对应的光标位置，定位到正确的分段偏移量

（3）删除操作 #

• 退格键：如果光标在text分段开头，且前一个分段是Chip，直接删除前一个Chip
• 删除键：如果光标在text分段末尾，且后一个分段是Chip，直接删除后一个Chip
• 选中Chip后按删除：直接移除该Chip分段

5. 简化版示例代码（React） #

给你贴个核心逻辑的简化实现，方便你参考：

import { useState, useRef } from 'react';

function ChipTextField() {
  const [segments, setSegments] = useState([{ type: 'text', value: '' }]);
  const inputRef = useRef(null);

  // 核心：把原生光标位置映射到分段数组
  const getCursorSegment = () => {
    const selection = window.getSelection();
    if (!selection.rangeCount) return null;
    const range = selection.getRangeAt(0);
    let totalOffset = 0;
    for (let i = 0; i < segments.length; i++) {
      const seg = segments[i];
      const length = seg.type === 'chip' ? 1 : seg.value.length;
      if (totalOffset + length > range.startOffset) {
        return {
          segmentIndex: i,
          offset: seg.type === 'chip' ? 0 : range.startOffset - totalOffset
        };
      }
      totalOffset += length;
    }
    return { segmentIndex: segments.length - 1, offset: segments.at(-1).value.length };
  };

  // 处理输入事件
  const handleInput = (e) => {
    const cursorInfo = getCursorSegment();
    if (!cursorInfo) return;
    const { segmentIndex, offset } = cursorInfo;
    const newSegments = [...segments];
    const currentSeg = newSegments[segmentIndex];
    
    // 仅处理文本分段的输入
    if (currentSeg.type === 'text') {
      const inputText = e.data || '';
      currentSeg.value = currentSeg.value.slice(0, offset) + inputText + currentSeg.value.slice(offset);
      setSegments(newSegments);
    }
  };

  // 输入逗号时自动转Chip
  const handleKeyDown = (e) => {
    if (e.key === ',') {
      e.preventDefault();
      const cursorInfo = getCursorSegment();
      if (!cursorInfo) return;
      const { segmentIndex, offset } = cursorInfo;
      const currentSeg = segments[segmentIndex];
      
      if (currentSeg.type === 'text') {
        const chipValue = currentSeg.value.slice(0, offset).trim();
        const remainingText = currentSeg.value.slice(offset);
        if (!chipValue) return;
        
        // 替换当前分段为剩余文本+新Chip
        const newSegments = [...segments];
        newSegments.splice(segmentIndex, 1,
          { type: 'text', value: remainingText },
          { type: 'chip', value: chipValue, id: `chip-${Date.now()}` }
        );
        setSegments(newSegments);
        
        // 光标定位到剩余文本开头
        setTimeout(() => {
          const range = document.createRange();
          const textNode = inputRef.current.childNodes[segmentIndex * 2]; // 假设每个分段对应一个节点
          range.setStart(textNode, 0);
          range.setEnd(textNode, 0);
          const selection = window.getSelection();
          selection.removeAllRanges();
          selection.addRange(range);
        }, 0);
      }
    }
  };

  return (
    <div
      ref={inputRef}
      contentEditable
      className="chip-input"
      style={{
        border: '1px solid #ccc',
        padding: '8px',
        borderRadius: '4px',
        minHeight: '40px'
      }}
      onInput={handleInput}
      onKeyDown={handleKeyDown}
    >
      {segments.map((seg, idx) => {
        if (seg.type === 'chip') {
          return (
            <span
              key={seg.id}
              style={{
                display: 'inline-block',
                background: '#e0e0e0',
                padding: '4px 8px',
                borderRadius: '16px',
                margin: '0 4px',
                cursor: 'pointer'
              }}
              contentEditable={false}
            >
              {seg.value}
              <button
                onClick={() => setSegments(segments.filter(s => s.id !== seg.id))}
                style={{ marginLeft: '4px', border: 'none', background: 'transparent', cursor: 'pointer' }}
              >×</button>
            </span>
          );
        } else {
          return <span key={`text-${idx}`}>{seg.value}</span>;
        }
      })}
    </div>
  );
}

6. 额外注意事项 #

• 跨浏览器兼容：contenteditable在不同浏览器的行为有差异，比如光标定位、选中逻辑，需要做适配
• 复制粘贴：要监听粘贴事件，把粘贴的文本按规则转换成Chip或文本段
• 样式对齐：要让Chip和文本保持一致的行高、垂直对齐，看起来像一个连续的输入框

内容的提问来源于stack exchange，提问作者Jérôme Gachon