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_OBJECT
Q_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);
/// 根据中间点,获取线绘制的Y
int getLineTopByCenterY(int centerY, TriangleLIne line);
/// 设置指示条的中心点Y
void 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