目录前言用 Flow 混排胶囊与输入框示例一 话题输入框用单个属性统管#与@模式将销毁 Delegate 的操作提到外层函数胶囊宽度展开入场动画示例二 标签输入框回车或逗号提交与超限提示用 Timer 延迟删除以完整播放退场动画为 Layout.preferredHeight 添加平滑过渡工程下载前言在社交动态或笔记编辑界面中，经常需要将用户输入的特定词条转化为胶囊标签，例如添加话题、提及好友或者为文章打标签。生成后的每个胶囊都可以单独删除，当输入框为空时按退格键也能依次删掉前面的胶囊。本文实现两个这类输入组件。第一个是话题输入框，输入#弹出话题列表，输入@弹出好友列表，选中后生成对应配色的胶囊标签，空输入时支持退格删除。第二个是标签输入框，按回车或输入逗号即可生成标签，超出数量上限时计数器会抖动提示，删除标签时后面的标签会自动平滑左移补位。用 Flow 混排胶囊与输入框这两个控件的编辑区结构相同，都是在Flow流式布局里把Repeater生成的胶囊和实际用于打字的TextField混排在一起。Rectangle { id: editor // 外框，高度跟着里面的 Flow 走