如何在Flutter的TextField中添加Chip组件？

核心思路 #

要实现类似邮箱输入框的Chip效果，核心是将TextField输入区域与Chip组件结合，让两者同行渲染，同时处理输入、添加、删除及编辑逻辑。

具体实现方案（以Flutter为例） #

• 自定义组件结构：用Wrap包裹Chip列表和TextField，让Chip与输入文本自动适配排列，输入内容满足触发条件（回车、逗号）时转为Chip。
• 输入触发逻辑：监听TextField的onSubmitted或onChanged事件，用户输入分隔符（回车、中英文逗号）时，将当前文本转为Chip并清空输入框。
• Chip删除功能：给每个Chip绑定删除回调，点击删除图标直接移除对应标签。
• Chip编辑功能：点击Chip将内容回填到TextField，修改完成后重新添加为新的Chip。

示例代码片段

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

  @override
  State<ChipTextField> createState() => _ChipTextFieldState();
}

class _ChipTextFieldState extends State<ChipTextField> {
  final List<String> _tags = [];
  final TextEditingController _controller = TextEditingController();

  void _addTag(String tag) {
    final trimmedTag = tag.trim();
    if (trimmedTag.isNotEmpty && !_tags.contains(trimmedTag)) {
      setState(() {
        _tags.add(trimmedTag);
      });
      _controller.clear();
    }
  }

  void _removeTag(String tag) {
    setState(() {
      _tags.remove(tag);
    });
  }

  void _editTag(String tag) {
    _removeTag(tag);
    _controller.text = tag;
  }

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 8.0,
      runSpacing: 8.0,
      children: [
        ..._tags.map((tag) => Chip(
              label: Text(tag),
              onDeleted: () => _removeTag(tag),
              onPressed: () => _editTag(tag),
            )),
        SizedBox(
          width: 160,
          child: TextField(
            controller: _controller,
            decoration: const InputDecoration(
              hintText: '输入标签...',
              border: OutlineInputBorder(),
            ),
            onSubmitted: _addTag,
            onChanged: (value) {
              if (value.endsWith(',') || value.endsWith('，')) {
                _addTag(value.substring(0, value.length - 1));
              }
            },
          ),
        ),
      ],
    );
  }
}

关键细节说明 #

• Wrap组件可自动换行，避免Chip数量过多时超出屏幕范围。
• 通过TextEditingController实现输入框内容的清空与回填，保证编辑流程顺畅。
• Chip的点击、删除操作直接绑定业务逻辑，交互直观易懂。

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