Qt QSlider详解

灬Sunnnnn

已于 2022-06-29 21:31:21 修改

阅读量1.2w

点赞数 7

分类专栏： Qt入门文章标签： QSlider qt 滑块

于 2021-02-18 23:26:43 首次发布

本文链接：https://blog.csdn.net/wzz953200463/article/details/113855187

版权

Qt入门专栏收录该内容

71 篇文章

订阅专栏

本文介绍了QSlider控件的常用API，包括设置最大值、最小值、范围、单步长等，并展示了如何通过设置TickPosition来控制刻度显示。此外，还给出了一个红蓝绿配色的示例，以及使用槽函数slotSliderValueChanged更新颜色的实现。最后，讲解了如何使用Qt样式表设置QSlider的groove和handle样式，包括边框、高度、背景颜色和圆角等属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.QSlider常用API

//设置最大值、最小值、范围

setMaximum(int)
setMinimum(int)
setRange(int min, int max)

//设置单步长，拖动标尺上的滑块，或按下左右光标键时的最小变化数值。

setSingleStep(int)

//在滑块上输入焦点时，按PgUp 或 PgDown时变化的数值

setPageStep(int)

//设置当前值

setValue(int)

//设置方向，水平或者垂直

setOrientation(Qt::Orientation)

//设置标尺刻度显示位置

setTickPosition(TickPosition position)

QSlider::NoTicks            //不显示刻度
QSlider::TicksBothSides     //标尺两侧都显示刻度
QSlider::TicksAbove         //标尺上方显示刻度
QSlider::TicksBelow         //标尺下方显示刻度
QSlider::TicksLeft          //标尺左侧显示刻度
QSlider::TicksRight         //标尺右侧显示刻度

2.示例-红蓝绿配色

3.源码

//.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = 0);
    ~Widget();

private slots:
    void slotSliderValueChanged(int value);

private:
    Ui::Widget *ui;
};

#endif // WIDGET_H

//.cpp
#include "widget.h"
#include "ui_widget.h"
#include <QColor>

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);

    ui->hSA->setRange(0,255);
    ui->hSA->setValue(255);

    ui->hSR->setRange(0,255);
    ui->hSG->setRange(0,255);
    ui->hSB->setRange(0,255);

    ui->hSA->setTickPosition(QSlider::TicksBelow);
    ui->hSR->setTickPosition(QSlider::TicksBelow);
    ui->hSG->setTickPosition(QSlider::TicksBelow);
    ui->hSB->setTickPosition(QSlider::TicksBelow);

    connect(ui->hSA,&QSlider::valueChanged,this,&Widget::slotSliderValueChanged);
    connect(ui->hSR,&QSlider::valueChanged,this,&Widget::slotSliderValueChanged);
    connect(ui->hSG,&QSlider::valueChanged,this,&Widget::slotSliderValueChanged);
    connect(ui->hSB,&QSlider::valueChanged,this,&Widget::slotSliderValueChanged);
}

Widget::~Widget()
{
    delete ui;
}

void Widget::slotSliderValueChanged(int value)
{
    Q_UNUSED(value);
    QColor color;
    int R = ui->hSR->value();
    int G = ui->hSG->value();
    int B = ui->hSB->value();
    int A = ui->hSA->value();

    color.setRgb(R,G,B,A);
    QPalette pal = ui->textEdit->palette();
    pal.setColor(QPalette::Base,color);
    ui->textEdit->setPalette(pal);
}

4.设置样式表

groove：表示对凹槽进行设置样式表

border：边框像素 solid 颜色

height：高

background：背景颜色，这里使用渐变色

margin：边距

handle：表示滑块设置样式表

border：边框像素 solid 颜色

width：宽度

background：背景颜色，这里使用渐变色

margin：边距

border-radius：边框圆角

  QSlider::groove:horizontal {
      border: 1px solid #999999;
      height: 8px; 
      background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);
      margin: 2px 0;
  }

  QSlider::handle:horizontal {
      background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);
      border: 1px solid #5c5c5c;
      width: 18px;
      margin: -2px 0; 
      border-radius: 3px;
  }