Qt具有重叠子窗口小部件的自定义窗口小部件

Question

我正在尝试在Qt5中创建一个自定义小部件，它有点像QProgressBar，但有3个滑块和用户可移动:(稍微破解的JS实现：codepen，gist）

我遇到的问题是如何做到这一点。我的尝试未能正确渲染窗口小部件的所有部分（使其难以选择和移动它的不同部分）或无法正确使用VBoxLayout（不扩展以适应水平空间）

我的最新尝试（你应该能够从构造函数中获得一般性的想法，没有其他的实现）

UTrackSlider::UTrackSlider(QWidget *parent) : QWidget(parent)
{
    this->setSizePolicy(QSizePolicy::MinimumExpanding, QSizePolicy::Minimum);

    // CIRCLE_HEIGHT = 10
    // BACKGROUND_HEIGHT = 30

    /// @todo css should be in global stylesheet
    background = new QLabel(this);
    background->setMinimumHeight(this->BACKGROUND_HEIGHT);
    background->setStyleSheet("QLabel{ border: 1px solid gray; background-color:white; border-radius:2px}");
    background->setAttribute(Qt::WA_DeleteOnClose);

    cue = new QLabel(this);
    cue->setFixedSize(QSize(this->CIRCLE_HEIGHT, this->CIRCLE_HEIGHT));
    cue->setStyleSheet("QLabel:hover{ border: 2px solid #d9534f; border-radius:5px}");
    cue->setAttribute(Qt::WA_DeleteOnClose);

    duration = new QLabel(this);
    duration->setFixedSize(3, this->BACKGROUND_HEIGHT);
    duration->setStyleSheet("QLabel{border: 3px solid #2376bb} QLabel:hover{border: 5px solid #2376bb}");
    duration->setAttribute(Qt::WA_DeleteOnClose);

    intro = new QLabel(this);
    intro->setFixedSize(QSize(this->CIRCLE_HEIGHT, this->CIRCLE_HEIGHT));
    intro->setStyleSheet("QLabel:hover{ border: 2px solid #5bc85c; border-radius:5px}");
    intro->setAttribute(Qt::WA_DeleteOnClose);

    QGridLayout *mainLayout = new QGridLayout(this);
    mainLayout->addWidget(cue, 5, 0);
    mainLayout->addWidget(background, 0, this->CIRCLE_HEIGHT);
    mainLayout->addWidget(duration, 2, this->CIRCLE_HEIGHT);
    mainLayout->addWidget(intro, 5, this->CIRCLE_HEIGHT + this->BACKGROUND_HEIGHT);
    this->setLayout(mainLayout);
}

基本上，关于我应该如何构建这个复合小部件的指针，以便它在所有这些条件下工作？

编辑：在与#qt上的一些人讨论问题之后，我得出的结论是我必须覆盖paintEvent。但这也意味着重写其他一些函数来执行onClick和拖动效果，我不知道从哪里开始

Answer 1

你是对的，你必须重新实施

1.void paintEvent(QPaintEvent *) 
2.void mouseMoveEvent(QMouseEvent *)
3.void mousePressEvent(QMouseEvent *)
4.void mouseReleaseEvent(QMouseEvent *)

QWidget的

。

为了正确处理鼠标事件，您可以使用QCoreApplication::sendEvent(QObject *, QEvent *)将事件传递给目标窗口小部件。

以下是一个例子： https://github.com/Serge45/MultiSlider

在此示例中，我在容器窗口小部件中创建了三个窗口小部件（ColorSlider），然后使用链接列表正确传播鼠标事件。