组件效果图：

应用场景： 

用于滑动解锁相关场景，Qt的控件鼠标监听机制对于嵌入式设备GUI可触摸屏依旧可用。

实现方式：

主要是通过继承QSlider以及搭配使用QStyleOptionSlider来实现效果。

注意细则：

QStyleOptionSlider是用于定制空白区域是否可移动滑块，根据需求可舍弃。

组件代码：

PS：代码效果也就是如图所示的效果，至于样式或者其他事件机制，切换逻辑就根据自己需求扩展。

#ifndef QSLIDERCOMPONENT_H
#define QSLIDERCOMPONENT_H

#include <QObject>
#include <QWidget>
#include <QSlider>

class QSliderComponent : public QSlider
{
    Q_OBJECT
public:
    explicit QSliderComponent(QWidget *parent = nullptr);

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

#endif // QSLIDERCOMPONENT_H

#include "qslidercomponent.h"
#include <QStyleOptionSlider>
#include <QMouseEvent>
#include <QDebug>

QSliderComponent::QSliderComponent(QWidget *parent) : QSlider(parent)
{

}

void QSliderComponent::mousePressEvent(QMouseEvent *ev)
{
    QStyleOptionSlider *QSOslider = new QStyleOptionSlider();
    this->initStyleOption(QSOslider);
    auto pressedControl = this->style()->hitTestComplexControl(QStyle::CC_Slider, QSOslider, ev->pos(), this);
    if(pressedControl == QStyle::SC_SliderGroove)
    {
        ev->accept();
    }
    else
        QSlider::mousePressEvent(ev);
}

使用示例：

    sliderControl = new QSliderComponent(this);
    sliderControl->resize(250, 42);
    sliderControl->move(35, 172);
    sliderControl->setRange(0, 100);
    sliderControl->setOrientation(Qt::Horizontal);
    sliderControl->setStyleSheet("QSlider::groove:horizontal{ height:30px; border: 1px solid grey; border-radius: 5px;}"
                                 "QSlider::handle:horizontal{ width:50px; background-color: blue; border-radius: 5px;}");
                                // "QSlider::handle:horizontal{ width:50px; border-image:url(:/page/unlock_screen_arrow.png)}");

    sliderControl->show();


    # 具体的逻辑添加，滑块释放以及是否达到指定某个值，进而处理某些业务
    connect(sliderControl, &QSliderComponent::sliderReleased, [=](){
        if(sliderControl->value() != 100)
            sliderControl->setValue(0);
//        else
//            emit unlockScreen();
    });