目录拆开讲讲位置由索引算回弹为什么不用普通动画文字状态由索引派生几个可以调的参数什么时候用小结完整代码工程下载本文介绍 QML 自定义的弹性指示器组件。如图所示：底部指示条跟随选中标签弹性滑动，滑过去时带轻微的弹性效果。拆开讲讲下面是逐段讲解，完整代码放在文章末尾的「完整代码」里。整个指示器就三块，一块一块说。位置由索引算每个标签宽度按总宽均分。模型正好是 4 个，写死除以 4 是最省事的做法；这里有个必须记住的限制——以后要改标签数量，改 model 的同时必须把这个除数同步改掉，否则指示条落点会错位。指示条没有自己量标签宽度，位置完全由索引推导：前半段把指示条定位到第 index 段的起点，后半段把指示条在该段里居中。宽度由索引算出、不是实时量标签，所以标签文字长短变化也不会影响指示条落点。// 标签等宽：总宽除以 4（以后改标签数量，除数要同步改） Repeater { model: ["推荐", "热门", "关注", "我的"] Rectangle { width: tabRow.width / 4 } } // 指示条位置由索引推导：先定位到第 index 段起点，再在段内居中 Rectangle { property int targetIndex: tabRow.currentIndex prop
