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