效果图:
功能说明:该控件主要是通过鼠标左键点击后上下移动的同时,数字跟随滚动,鼠标松开时则选中中间的数字。(因不会录制动图,功能就简单文字说明了0.0)。
设计思路:设计该控件思路主要分三部分,第一是先标定两条临界线;第二时绘制4个数字显示的rect区域,图中只显示三个,还有一个则是绘制在显示区域外,根据鼠标是上划还是下划来确定初始的显示位置是在上方还是在下方;第三是重载鼠标事件,然后根据鼠标的移动来进行滚动绘制。
第一步和第二步主要代码逻辑如下:
void TimeSelectWidget::paintEvent(QPaintEvent *event)
{
QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing);
// 绘制背景
painter.save();
painter.setBrush(QColor(0, 0, 0, 100));
painter.drawRoundedRect(rect(), 5, 5);
painter.restore();
// 鼠标上划,Y轴值固定每次移动减2,然后在判读每一个处于最顶端(Y坐标为0)的矩形Y坐标是否小于
// 0,当小于零时处于最下方显示区域外的第4个矩形显示区域开始向上移动,以此形成循环滚动的视觉
// 效果
if(!m_curValueFlag)
{
if(m_firstY <= 0)
{
if(!m_pressFlag)
{
if(m_firstY <= -height() / 3 / 2)
{
m_firstY = height();
m_secendY = 0;
m_thridY = height() / 3;
m_fourY = height() / 3 * 2;
m_firstValue = m_fourValue + 1;
if(m_firstValue > m_maxValue)
{
m_firstValue = 0;
}
painterNum(&painter, m_secendY, m_thridY, m_fourY, m_firstY,
m_secendValue, m_thridValue, m_fourValue, m_firstValue);
}
else
{
m_firstY = 0;
m_secendY = height() / 3;
m_thridY = height() / 3 * 2;
m_fourY = height();
painterNum(&painter, m_firstY, m_secendY, m_thridY, m_fourY,
m_firstValue, m_secendValue, m_thridValue, m_fourValue);
}
}
else
{
painterNum(&painter, m_firstY, m_secendY, m_thridY, m_fourY,
m_firstValue, m_secendValue, m_thridValue, m_fourValue);
}
}
if(m_secendY <= 0)
{
if(!m_pressFlag)
{
if(m_secendY <= -height() / 3 / 2)
{
m_firstY = height() / 3 * 2;
m_secendY = height();
m_thridY = 0;
m_fourY = height() / 3;
m_secendValue = m_firstValue + 1;
if(m_secendValue > m_maxValue)
{
m_secendValue = 0;
}
painterNum(&painter, m_thridY, m_fourY, m_firstY, m_secendY,
m_thridValue, m_fourValue, m_firstValue, m_secendValue);
}
else
{
m_firstY = height();
m_secendY = 0;
m_thridY = height() / 3;
m_fourY = height() / 3 * 2;
painterNum(&painter, m_secendY, m_thridY, m_fourY, m_firstY,
m_secendValu