Qt实现双控制柄的Slider

**Qt 实现双控制柄的 Slider**

在 Qt 中，Slider 是一个常见的控件，用来让用户选择一个值范围内的数值。然而，在某些情况下，我们可能需要实现一个双控制柄的 Slider，这样可以让用户同时控制两个值。例如，在音频编辑软件中，我们可能需要调整声道的高低和平衡。

在本文中，我们将介绍如何使用 Qt 实现一个双控制柄的 Slider。

**设计**

首先，让我们设计一下我们的控件。我们需要两个滑动条，分别用于控制两个值。每个滑动条都有一个控制柄，可以拖动来改变值。

下图是我们的控件的设计：

![]( />
**实现**

现在，让我们开始实现这个控件。

首先，我们需要创建一个自定义控件类，继承于 QSlider。我们将其命名为 `DoubleSlider`。

cppclass DoubleSlider : public QSlider {
 Q_OBJECTpublic:
 explicit DoubleSlider(QWidget *parent = nullptr);

protected:
 void paintEvent(QPaintEvent *event) override;
 void mousePressEvent(QMouseEvent *event) override;
 void mouseMoveEvent(QMouseEvent *event) override;

private:
 int m_value1;
 int m_value2;
};

cppDoubleSlider::DoubleSlider(QWidget *parent)
 : QSlider(parent), m_value1(0), m_value2(0) {}

cppvoid DoubleSlider::paintEvent(QPaintEvent *event) {
 QStyleOptionSlider option;
 initStyleOption(&option);

 QPainter painter(this);
 painter.setRenderHint(QPainter::Antialiasing);

 // 绘制第一个滑动条 int x1 =0;
 int y1 = height() /2 - height() /4;
 int w1 = width();
 int h1 = height() /4;

 painter.setPen(Qt::NoPen);
 QBrush brush(Qt::lightGray);
 painter.fillRect(x1, y1, w1, h1, brush);

 // 绘制控制柄 x1 += (m_value1 * w1) /100;
 int y2 = y1 + h1;

 painter.setPen(QPen(Qt::black,2));
 QBrush brush2(Qt::darkGray);
 painter.drawRect(x1 -5, y2 -5,10,10);

 // 绘制第二个滑动条 int x2 =0;
 int y3 = height() /2 + height() /4;
 int w2 = width();
 int h2 = height() /4;

 painter.setPen(Qt::NoPen);
 QBrush brush3(Qt::lightGray);
 painter.fillRect(x2, y3, w2, h2, brush3);

 // 绘制控制柄 x2 += (m_value2 * w2) /100;
 int y4 = y3 + h2;

 painter.setPen(QPen(Qt::black,2));
 QBrush brush4(Qt::darkGray);
 painter.drawRect(x2 -5, y4 -5,10,10);

 event->accept();
}

cppvoid DoubleSlider::mousePressEvent(QMouseEvent *event) {
 int x = event->pos().x();

 if (x < width() /2) {
 m_value1 = (x *100) / width();
 } else {
 m_value2 = ((x - width() /2) *100) / (width() /2);
 }

 update();
}

void DoubleSlider::mouseMoveEvent(QMouseEvent *event) {
 int x = event->pos().x();

 if (x < width() /2) {
 m_value1 = (x *100) / width();
 } else {
 m_value2 = ((x - width() /2) *100) / (width() /2);
 }

 update();
}

cppint main(int argc, char *argv[]) {
 QApplication a(argc, argv);

 DoubleSlider slider;
 slider.show();

 return a.exec();
}