【QT开发笔记-基础篇】| 第二章 常用控件 | 2.9 滑动条 QSlider

本节对应的视频讲解：B_站_链_接

https://www.bilibili.com/video/BV1BT411g791

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

1. 属性和方法

---

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

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

1.1 值

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

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

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

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

// 一次设置最大值和最小值
void setRange(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 setPageStep(int);

1.4 信号槽

QSlider 常用的信号，如下：

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

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

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

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

2. 案例

---

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

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

2.1 布局

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

2.2 代码实现

完整的项目，在本节视频的置顶评论下载即可

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

    // QString style = "background-color: rgb(255, 255, 0);";
    // ui->lineEdit->setStyleSheet(style);

    // 初始化红色滑动条
    ui->hsRed->setMinimum(0);
    ui->hsRed->setMaximum(255);
    // ui->hsRed->setRange(0, 255);

    ui->hsRed->setSingleStep(1);
    ui->hsRed->setPageStep(10);

    ui->hsRed->setOrientation(Qt::Horizontal);

    // 初始化绿色滑动条
    ui->hsGreen->setMinimum(0);
    ui->hsGreen->setMaximum(255);
    // ui->hsGreen->setRange(0, 255);

    ui->hsGreen->setSingleStep(5);
    ui->hsGreen->setPageStep(20);

    ui->hsGreen->setOrientation(Qt::Horizontal);

    // 初始化蓝色滑动条
    ui->hsBlue->setMinimum(0);
    ui->hsBlue->setMaximum(255);
    // ui->hsBlue->setRange(0, 255);

    ui->hsBlue->setSingleStep(10);
    ui->hsBlue->setPageStep(50);

    ui->hsBlue->setOrientation(Qt::Horizontal);

    // 初始化文本框的显示和背景色
    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);
    ui->leGreen->setText(green);
    ui->leBlue->setText(blue);

    QString style = "background-color: rgb(" + red + "," +  green + ","  + blue + ");";
    ui->lineEdit->setStyleSheet(style);
}

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

void Widget::on_hsRed_valueChanged(int value)
{
    // 1、获取rgb的颜色值
    // QString red = QString::number(ui->hsRed->value());
    QString red = QString::number(value);

    QString green = QString::number(ui->hsGreen->value());

    QString blue = QString::number(ui->hsBlue->value());

    // 2、显示到右侧文本框
    ui->leRed->setText(QString::number(value));

    // 3、组拼样式字符串，设置样式
    QString style = "background-color: rgb(" + red + "," +  green + ","  + blue + ");";
    qDebug() << style;

    ui->lineEdit->setStyleSheet(style);
}

void Widget::on_hsGreen_valueChanged(int value)
{
    // 1、获取rgb的颜色值
    QString red = QString::number(ui->hsRed->value());

    // QString green = QString::number(ui->hsGreen->value());
    QString green = QString::number(value);

    QString blue = QString::number(ui->hsBlue->value());

    // 2、显示到右侧文本框
    ui->leGreen->setText(QString::number(value));

    // 3、组拼样式字符串，设置样式
    QString style = "background-color: rgb(" + red + "," +  green + ","  + blue + ");";
    qDebug() << style;

    ui->lineEdit->setStyleSheet(style);
}

void Widget::on_hsBlue_valueChanged(int value)
{
    // 1、获取rgb的颜色值
    QString red = QString::number(ui->hsRed->value());

    QString green = QString::number(ui->hsGreen->value());

    // QString blue = QString::number(ui->hsBlue->value());
    QString blue = QString::number(value);

    // 2、显示到右侧文本框
    ui->leBlue->setText(QString::number(value));

    // 3、组拼样式字符串，设置样式
    QString style = "background-color: rgb(" + red + "," +  green + ","  + blue + ");";
    qDebug() << style;

    ui->lineEdit->setStyleSheet(style);
}

本节对应的视频讲解：B_站_链_接
https://www.bilibili.com/video/BV1BT411g791