企业官网建设流程全解析

本文介绍 QML 自定义的展开搜索组件。顶部工具栏平时只放一个搜索图标，点一下，输入框就在原地横向展开，右边那排图标暂时让开，同时出现「取消」；再点取消，输入框缩回去，图标回来，整个过程不另开新窗口。

最终效果

点搜索图标，输入框就在工具栏原位横向展开，右侧图标淡出让位、「取消」淡入；点取消收回，图标全部归位，全程不另开新窗口。

拆开讲讲

下面是逐段讲解，完整代码放在文章末尾的「完整代码」里。整条搜索条就靠一个展开进度状态驱动，一块一块说。

输入框宽度跟着展开进度伸缩

输入框是个TextInput，收起时不占宽度，展开时才拉满。宽度这么算：整条工具栏的宽，左边减掉搜索图标的占位，右边减掉「取消」的占位，剩下的可用宽度再乘以展开进度。

展开进度为 0 时宽度是 0，输入框不可见也点不到；到 1 时占满中间这段。外面再和 0 取个较大值兜住，保证宽度不会算出负数，动画中段也不会抖。

透明度绑到展开进度，让输入框和宽度同步淡入。光标可见性绑成「快完全展开且确实拿到焦点」才为真，避免收起过程中闪光标。按回车直接收起。

// ── 输入框：宽度由 expand 派生，收起时为 0 ─