企业官网建设流程全解析

本文介绍 QML 自定义的胶囊选择器组件。日/周/月切换这种小控件，几个选项里选一个，很多 app 都有，如图所示：

拆开讲讲

下面是逐段讲解，完整代码放在文章末尾的「完整代码」里。整个选择器就四块，一块一块说。

胶囊外形与宽度均分

外层和滑块都用「圆角等于高度一半」的圆角矩形，保证两端是半圆。滑块宽度按总宽减去左右留白后除以选项数均分。这里有个使用限制——以后增减选项，改选项列表的同时必须把这个除数同步改掉，否则滑块宽度和落点会错位。

// 外层和滑块都用「圆角 = 高度一半」，两端自然成半圆 Rectangle { radius: height / 2 // 滑块宽度：总宽减左右留白后除以选项数均分 Rectangle { width: (pillSelector.width - 6) / 3 height: pillSelector.height - 6 radius: height / 2 } }

滑块位置由索引算出

滑块位置这么算：开头那个偏移是左内边距，滑块自己的宽等于每段宽，乘以索引就跳到第几段。点选项时选中索引变了，目标位置重算