Qt QSlider滑动条控件

QSlider是滑动条控件，滑动条可以在一个范围内拖动，并将其位置转换为整数

最常见的应用就是视频播放器中的进度条

1 属性和方法

QSlider继承自QAbstractSlider，它的绝大多数属性都是从QAbstractSlider继承而来的。

QSlider有很多属性，完整的可查看帮助文档。这里仅列出常用的属性和方法

1.1 值

滑动条和值相关的属性包括：当前值、最大值、最小值

// 获取和设置当前值
int value() const;
void serValue(int);

// 获取和设置最大值
int maximum() const;
void setMaximum(int);

// 获取和设置最小值
int minimum() const;
void setMinimum(int);

// 一次设置最大值和最小值
void serRange(int min, int max);

1.2 方向

Qt中滑动条有水平滑动条和垂直滑动条之分

只需修改QSlider的orientation属性，就可以滑动条的外观即可变为水平或者垂直的

// 获取和设置滑动条
Qt::Orientation orientation() const;
void setOrientation(Qt::Orientation);

1.3 步长

步长是指滑动条一次增加或减少的值

这里又包括两个步长：

• SingleStep：是指接键盘的左右箭头（←/→）时的步长
• pageStep：是指点击滑块两侧时的步长

// 获取和设置singleStep
int singleStep() const;
void setSingleStep(int);

// 获取和设置pageStep
int pageStep() const;
void serPageStep(int);

1.4 信号和槽

QSlider常用的信号，如下

// 当滑动被按下时发射该信号
void slidePressed();

// 当滑块移动时发射该信号
void sliderMoved(int value);

// 当滑块释放时发射该信号
void sliderReleased();

// 当滑动条的值改变时，发射该信号
void valueChanged(int value);

2 实例

三个滑动条，分别用来调节RGB三个颜色的值，并显示到左侧各自的文本框中

并且将RGB这三个颜色的组合，设置为上面的文本框的背景颜色

2.1 布局

在Ul设计师界面，拖拽对应的控件，修改显示的文字、控件的name，然后完成布局

2.2 代码实现

// 在Widget.cpp中

#include "widget.h"

#include "ui_widget.h"

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

    // 初始化红色滑动条
    ui->hsRed->setMaximum(255);
    ui->hsRed->setMinimum(0);
    // ui->hsRed->setRange(0, 255);
    ui->hsRed->setSingleStep(1);
    ui->hsRed->setPageStep(10);
    ui->hsRed->setOrientation(Qt::Horizontal);

    // 初始化绿色滑动条
    ui->hsGreen->setMaximum(255);
    ui->hsGreen->setMinimum(0);
    ui->hsGreen->setSingleStep(5);
    ui->hsGreen->setPageStep(20);

    // 初始化蓝色滑动条
    ui->hsBlue->setMaximum(255);
    ui->hsBlue->setMinimum(0);
    ui->hsBlue->setSingleStep(10);
    ui->hsBlue->setPageStep(50);

    // 初始化 设置文本框的背景色
    // background-color: rgb(255, 0, 0);
    QString style = "background-color: rgb(0, 0, 0);";
    ui->lineEdit->setStyleSheet(style);

    // 初始化LineEdit
    ui->leRed->setText(QString::number(ui->hsRed->value()));
    ui->leGreen->setText(QString::number(ui->hsGreen->value()));
    ui->leBlue->setText(QString::number(ui->hsBlue->value()));
}

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

void Widget::on_hsRed_valueChanged(int value) {
    QString red = QString::number(value);
    // QString red = QString::number(ui->hsRed->value());
    QString green = QString::number(ui->hsGreen->value());
    QString blue = QString::number(ui->hsBlue->value());
    ui->leRed->setText(red);

    // 设置文本框的背景色
    // background-color: rgb(255, 0, 0);
    QString style =
        "background-color: rgb(" + red + "," + green + "," + blue + ");";
    ui->lineEdit->setStyleSheet(style);
}

void Widget::on_hsGreen_valueChanged(int value) {
    QString green = QString::number(value);
    QString red = QString::number(ui->hsRed->value());
    QString blue = QString::number(ui->hsBlue->value());
    ui->leGreen->setText(green);
    // 设置文本框的背景色
    // background-color: rgb(255, 0, 0);
    QString style =
        "background-color: rgb(" + red + "," + green + "," + blue + ");";
    ui->lineEdit->setStyleSheet(style);
}

void Widget::on_hsBlue_valueChanged(int value) {
    QString blue = QString::number(value);
    QString red = QString::number(ui->hsRed->value());
    QString green = QString::number(ui->hsGreen->value());
    ui->leBlue->setText(blue);
    // 设置文本框的背景色
    // background-color: rgb(255, 0, 0);
    QString style =
        "background-color: rgb(" + red + "," + green + "," + blue + ");";
    ui->lineEdit->setStyleSheet(style);
}