qt 之 QSlieder

参考链接
滑块移动到鼠标点击位置：
https://blog.csdn.net/qq_14945437/article/details/98730805

样式：
https://blog.csdn.net/haohaohaihuai/article/details/105214675
https://blog.csdn.net/qq_37603131/article/details/106323832

概述

QSlider是QT界面中的滑动条控件，继承于QAbstractSlider，常见应用于软件中的进度条或调节音量滑条。

构造函数

// 可以指定父函数
QSlider(Qt::Orientation orientation, QWidget *parent = nullptr);
QSlider(QWidget *parent = nullptr);

• QSlider::TickPosition

常量	值	描述
QSlider::NoTicks	0	不绘制任何刻度线
QSlider::TicksBothSides	3	在滑块的两侧绘制刻度线
QSlider::TicksAbove	1	在（水平）滑块上方绘制刻度线
QSlider::TicksBelow	2	在（水平）滑块下方绘制刻度线
QSlider::TicksLeft	TicksAbove	在（垂直）滑块左侧绘制刻度线
QSlider::TicksRight	TicksBelow	在（垂直）滑块右侧绘制刻度线

常用函数

// 设置最大值
void setMaximum(int)
// 设置最小值
void setMinimum(int)
// 获取当前滑块值
int value() const
// 打开或关闭滑块跟踪
void setTracking(bool enable)

• 如果启用跟踪(默认)，滑块在拖动滑块时发出valueChanged()信号。如果禁用跟踪，则滑块仅在用户释放滑块时才发出valueChanged()信号。

槽函数

// 设置滑块值
void setValue(int)

信号

// 当滑块的值发生了改变，发射此信号
void valueChanged(int) 
// 当用户按下滑块，发射此信号
void sliderPressed()
// 当用户拖动滑块，发射此信号，其传递的参数为当前滑动条所对应的数值
void sliderMoved(int) 
// 当用户释放滑块，发射此信号
void sliderReleased()

滑动条跟随鼠标移动

HPP

#ifndef HGSLIDER_H
#define HGSLIDER_H
#include <QSlider>
class HgSlider : public QSlider
{
    Q_OBJECT
public:
    HgSlider(QWidget * parent = nullptr);
    ~HgSlider();
signals:
    void hgSlider_signal(int mValue);
    void hgSlider_signal();

protected:
    void mousePressEvent(QMouseEvent *ev);
    void mouseReleaseEvent(QMouseEvent *ev);
};

#endif // HGSLIDER_H

CPP

#include "hgslider.h"
#include <QMouseEvent>

HgSlider::HgSlider(QWidget *parent):QSlider(parent){}
HgSlider::~HgSlider(){}

void HgSlider::mousePressEvent(QMouseEvent *ev)
{
    QSlider::mousePressEvent(ev);//调用父类的鼠标点击处理事件，这样可以不影响拖动的情况
    double pos = ev->pos().x() / (double)width();//获取按下时相对滑动条所在的比例
    double value = pos * (maximum() - minimum()) + minimum();//计算按下时的位置
    if(value > maximum())
    	value = maximum();
    else if(value < minimum())
    	value = minimum();
    int mValue = value + 0.5;//四舍五入
    setValue(mValue);
    emit hgSlider_signal();//发送输出信号
}
void HgSlider::mouseReleaseEvent(QMouseEvent *ev)
{
    QSlider::mouseReleaseEvent(ev);
    double pos = ev->pos().x() / (double)width();
    double value = pos * (maximum() - minimum()) + minimum();
    if(value > maximum())
    	value = maximum();
    else if(value < minimum())
    	value = minimum();
    int mValue = value + 0.5;
    setValue(mValue);
    emit hgSlider_signal(mValue);
}

qss 1

/*滑动条槽（整体）的美化*/
QSlider::groove:horizontal{
	height: 12px;
	left: 0px;
	right: 0px;
	border:0px solid #bbb;    			/*指定无边框*/
border-radius:6px;    					/*指定圆角*/
	background:rgba(0,0,0,50);
}
/*滑块的美化*/
QSlider::handle:horizontal{
	width:  50px;
	height: 50px;
	margin-top: -20px;
	margin-left: 0px;
	margin-bottom: -20px;
	margin-right: 0px;
	background: rgb(255,153,102);
	border: 1px solid rgb(255,153,102);
	border-image:url(:/res/images/setting_slider_handle.png); 
} /*已滑过的进度美化*/
QSlider::sub-page:horizontal{
background:rgba(80,166,234,1);
}

qss 2

QSlider::groove:horizontal {
    border: 0px solid #bbb;
}
QSlider::sub-page:horizontal {
    background: rgb(235,97,0);
    border-radius: 0px;
    margin-top:8px;
    margin-bottom:8px;
}
QSlider::add-page:horizontal {
    background: #bbb;
    border: 0px solid #777;
    border-radius: 2px;
    margin-top:8px;
    margin-bottom:8px;
}
QSlider::handle:horizontal {
    background: rgb(255,153,102);
    border: 1px solid rgb(255,153,102);
    border-radius: 7px;
    width: 14px;
    height:10px;
    margin-top:2px;
    margin-bottom:2px;
}

QSlider::sub-page:horizontal:disabled {
    background: #bbb;
    border-color: #999;
}
QSlider::add-page:horizontal:disabled {
    background: #eee;
    border-color: #999;
}
QSlider::handle:horizontal:hover {
    background: rgb(255,128,6);
    border: 1px solid rgba(102,102,102,102);
    border-radius: 7px;
}
QSlider::handle:horizontal:disabled {
    background: #eee;
    border: 1px solid #aaa;
    border-radius: 4px;
}

qss 3

QSlider::groove:horizontal {
        border: 0px solid #bbb;
  }

  QSlider::sub-page:horizontal {
        background: rgb(240, 217, 168);
        border-radius: 0px;
        margin-top: 8px;
        margin-bottom: 9px;
  }

  QSlider::add-page:horizontal {
        background: rgb(124, 123, 123);
        border: 0px solid #777;
        border-radius: 2px;
        margin-top: 8px;
        margin-bottom: 9px;
  }

  QSlider::handle:horizontal {
        background: rgb(255,255,255);
        border: 1px solid rgba(102,102,102,102);
        width: 8px;
        height: 8px;
        border-radius: 5px;
        margin-top: 2px;
        margin-bottom: 2px;
  }

  QSlider::handle:horizontal:hover {
        background: rgb(241, 241, 91);
        border: 1px solid rgba(102,102,102,102);
        border-radius: 5px;
  }

  QSlider::sub-page:horizontal:disabled {
        background: #bbb;
        border-color: #999;
  }

  QSlider::add-page:horizontal:disabled {
        background: #eee;
        border-color: #999;
  }

  QSlider::handle:horizontal:disabled {
        background: #eee;
        border: 1px solid #aaa;
        border-radius: 4px;
  }