c++ - 具有重叠子部件的 Qt 自定义部件

Question

我正在尝试在 Qt5 中制作一个自定义小部件，它有点像 QProgressBar，但具有 3 个 slider 和用户可移动的:(稍微损坏的 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)，然后使用链表正确传播鼠标事件。