目录最终效果拆开讲讲输入框宽度跟着展开进度伸缩图标淡出后还挡着点击占位提示和输入框共用一个位置搜索图标的点击与焦点几个可以调的参数什么时候用小结完整代码工程下载本文介绍 QML 自定义的展开搜索组件。顶部工具栏平时只放一个搜索图标，点一下，输入框就在原地横向展开，右边那排图标暂时让开，同时出现「取消」；再点取消，输入框缩回去，图标回来，整个过程不另开新窗口。最终效果点搜索图标，输入框就在工具栏原位横向展开，右侧图标淡出让位、「取消」淡入；点取消收回，图标全部归位，全程不另开新窗口。拆开讲讲下面是逐段讲解，完整代码放在文章末尾的「完整代码」里。整条搜索条就靠一个展开进度状态驱动，一块一块说。输入框宽度跟着展开进度伸缩输入框是个TextInput，收起时不占宽度，展开时才拉满。宽度这么算：整条工具栏的宽，左边减掉搜索图标的占位，右边减掉「取消」的占位，剩下的可用宽度再乘以展开进度。展开进度为 0 时宽度是 0，输入框不可见也点不到；到 1 时占满中间这段。外面再和 0 取个较大值兜住，保证宽度不会算出负数，动画中段也不会抖。透明度绑到展开进度，让输入框和宽度同步淡入。光标可见性绑成「快完全展开且确实拿到焦点」才为真，避免收起过程中闪光标。按回车直接收起。// ── 输入框：宽度由 expand 派生，收起时为 0 ─