1、概述
源码放在文章末尾

该项目实现了一个带动画效果的三角形指示箭头，项目demo演示如下所示：

用法
interestingindicate.h interestingindicate.cpp 放到工程中，直接使用即可。

注意：建议绝对布局，手动指定 widget 的边界，上下（第一项top和最后一项bottom，不包括spacing），左边（全部项的最左边-指示条宽度）。

项目部分代码如下所示：

#ifndef INTERESTINGINDICATE_H
#define INTERESTINGINDICATE_H#include <QObject>
#include <QWidget>class InterestingIndicate : public QWidget
{Q_OBJECTQ_PROPERTY(int line1 READ getLine1 WRITE setLine1)Q_PROPERTY(int line2 READ getLine2 WRITE setLine2)Q_PROPERTY(int line3 READ getLine3 WRITE setLine3)
public:InterestingIndicate(QWidget *parent = nullptr);enum TriangleLIne{TL_Left,TL_TopRight,TL_BottomRight};/// 根据控件调整自己的位置void setTopAndBottom(QWidget* top, QWidget* bottom);/// 设置三角形边长的尺寸void setTriangleSize(int size);/// 设置绘制的颜色void setColor(QColor c);/// 设置总数量void setTotalCount(int count);/// 设置每两个项目之间的spacing（不包括上下两边外面的）void setItemSpacing(int spacing);/// 设置索引（不用动画）void setCurrentIndex(int index);/// 设置缩影（带动画的)void moveIndicate(int index);/// 当前指向的索引int currentIndicateIndex() const;protected:void paintEvent(QPaintEvent *) override;signals:public slots:private:/// 获取某一个index的中心点Y坐标int getCenterYByIndex(int index);/// 根据中间点，获取线绘制的Yint getLineTopByCenterY(int centerY, TriangleLIne line);/// 设置指示条的中心点Yvoid setCenterY(int y);private:int getLine1();void setLine1(int x);int getLine2();void setLine2(int x);int getLine3();void setLine3(int x);int line1 = 0;int line2 = 0;int line3 = 0;private:int triangleSize = 16;QColor lineColor = Qt::black;int totalCount = 0;int itemSpacing = 0;int currentIndex = -1;int currentY = -1;int aniPV = 0;
};#endif // INTERESTINGINDICATE_H

源码下载