QT显示类控件---QSlider

核心属性

核心信号

教学案例

案例1：核心属性和信号演示(通过滑动条调整窗口大小)(基础)

案例2：通过QShortcut执行快捷键调整滑动条滑动位置(基础)

案例3：仿RotateCaptcha（旋转验证码）的旋转图示(无验证功能，仅仅看起来像)(非常困难)

使⽤Slider 表⽰⼀个滑动条，QSlider 和 QDial 都是继承⾃ QAbstractSlider ,因此⽤法上基本相同，由于样式出奇的丑，一般之后不会使用到。

核心属性

核心信号

教学案例

案例1：核心属性和信号演示(通过滑动条调整窗口大小)(基础)

cpp 复制代码

#include "widget.h"
#include "ui_widget.h"
#include<QDebug>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //QSlider表示一个滑动条
    //QSlider和QDial都是继承自QAbstractSlider
    //滑动条分为水平滑条和竖直滑条，是有刻度但是没有数值的
    ui->horizontalSlider->setValue(0); //水平滑条的当前滑块值
    ui->horizontalSlider->setMinimum(0);
    ui->horizontalSlider->setMaximum(800);
    ui->horizontalSlider->setSingleStep(10); //滑块步长
    ui->horizontalSlider->setSliderPosition(800); //滑块初始位置
    ui->horizontalSlider->setInvertedAppearance(true); //是否反转滑块方向
    ui->verticalSlider->setTickPosition(QSlider::TicksLeft); //设置刻度位置,3种位置可以设置
    ui->verticalSlider->setTickPosition(QSlider::TicksRight);
    ui->verticalSlider->setTickPosition(QSlider::TicksBothSides);
    ui->verticalSlider->setTickInterval(10);  // 设置刻度密度，每10个单位一个刻度
    ui->verticalSlider->setRange(0, 600);  // 改变范围
    ui->verticalSlider->setSingleStep(10);
    ui->verticalSlider->setValue(600);
}

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


void Widget::on_verticalSlider_valueChanged(int value) //滑块数值改变时触发
{
    QRect rec = this->geometry();
    this->setGeometry(rec.x(), rec.y(), rec.width(), value);
}

void Widget::on_verticalSlider_rangeChanged(int min, int max) //这个函数 不会 在滑块拖动时触发，而是在你 代码里改了范围 时触发
{

}

void Widget::on_horizontalSlider_valueChanged(int value)
{
    QRect rec = this->geometry();
    this->setGeometry(rec.x(), rec.y(), value, rec.height());
}

我们可以看到滑动条也是没有刻度的。

案例2：通过QShortcut执行快捷键调整滑动条滑动位置(基础)

cpp 复制代码

#include "widget.h"
#include "ui_widget.h"
#include<QShortcut>
#include<QDebug>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    //使用QShortcut进行快进键的调整
    QShortcut* cut1 = new QShortcut(this);
    QShortcut* cut2 = new QShortcut(this);
    cut1->setKey(QKeySequence("a"));
    cut2->setKey(QKeySequence("d"));
    //使用信号触发快捷键
    connect(cut1, &QShortcut::activated, this, [this](){
        int value = ui->horizontalSlider->value();
        if (value >= 100)
        {
            return;
        }
        ui->horizontalSlider->setValue(value + 5);
    });

    connect(cut2, &QShortcut::activated, this, [this](){
        int value = ui->horizontalSlider->value();
        if (value <= 0)
        {
            return;
        }
        ui->horizontalSlider->setValue(value - 5);
    });


}

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


void Widget::on_horizontalSlider_valueChanged(int value)
{
    ui->label->setText("当前值为：" + QString::number(value));
}

案例3：仿RotateCaptcha（旋转验证码）的旋转图示(无验证功能，仅仅看起来像)(非常困难)

我们使用QGraphicsScene，QGraphicsView，QGraphicsEllipseItem进行制作，这三个工具将来非常有用，主要可以进行绘制，图像旋转，运动等的操作，但是本人了解不多。

只要你的界面里出现"大量、可交互、可缩放/拖动的 2D 图形对象"，就轮到 QGraphicsScene / View / Item 出场；否则用普通 QWidget（QPainter 自绘、QLabel 贴图、QChart 等）更简单。

我们今天就来实现一个图片随着滑动条旋转的案例。

cpp 复制代码

#include "widget.h"
#include "ui_widget.h"
#include<QGraphicsScene>
#include<QGraphicsView>
#include<QGraphicsEllipseItem>

//仿RotateCaptcha（旋转验证码）的旋转图示(无验证功能，仅仅看起来像)
Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    QGraphicsScene* scene = new QGraphicsScene(this);  // 创建一个空沙盘
    QGraphicsView* view = new QGraphicsView(scene, this); //一定要指定父对象，不然显示不出来
    scene->setSceneRect(0, 0, 800, 500); //设置画布大小
    view->setFixedSize(850, 510);   // 视图窗口只有 400×300 像素, 这个视野大小就是你可以看到的大小，如果场景逻辑大小 800×600大于等于视野大小就会视图会自动出现滚动条
    QGraphicsEllipseItem *circle = new QGraphicsEllipseItem(25, 25, 300, 300); //在画布上画一个圆形，也可以画矩形等等都有对应的类的
    circle->setPen(QPen(Qt::red, 3));
    QGraphicsEllipseItem *circle2 = new QGraphicsEllipseItem(430, 25, 300, 300);
    circle2->setPen(QPen(Qt::red, 3));
    //添加图片项1
    QPixmap map1 = QPixmap(":/aaa.png").scaled(300, 300, Qt::KeepAspectRatio, Qt::SmoothTransformation);
    QPixmap rounded = QPixmap(map1.size());
    rounded.fill(Qt::transparent);
    QPainter painter(&rounded);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setBrush(QBrush(map1));
    painter.setPen(Qt::NoPen);
    painter.drawEllipse(map1.rect());  // 画一个圆形遮罩
    QGraphicsPixmapItem* item = scene->addPixmap(rounded);
    item->setTransformationMode(Qt::SmoothTransformation);
    item->setPos(25, 25);
    scene->addItem(circle);  // 添加到场景, 才能显示出来
    scene->addItem(circle2);
    //添加图片项2
    QPixmap map2 = QPixmap(":/huaji.png").scaled(300, 300, Qt::KeepAspectRatio, Qt::SmoothTransformation);
    QPixmap rounded2 = QPixmap(map2.size());
    rounded2.fill(Qt::transparent);
    QPainter painter2(&rounded2);
    painter2.setRenderHint(QPainter::Antialiasing);
    painter2.setBrush(QBrush(map2));
    painter2.setPen(Qt::NoPen);
    painter2.drawEllipse(map2.rect()); //在画布上画一个和原图一样大的椭圆（因为原图是正方形，所以得到与正方形相同位置的内框的正圆）
    QGraphicsPixmapItem* item2 = scene->addPixmap(rounded2);
    item2->setTransformationMode(Qt::SmoothTransformation);
    item2->setPos(430, 25);

    //进行旋转
    //设置旋转中心为图片中心
    item->setTransformOriginPoint(map1.rect().center());
    item2->setTransformOriginPoint(map2.rect().center());
    ui->horizontalSlider->setMaximum(1080);
    ui->horizontalSlider->setSingleStep(1);
    connect(ui->horizontalSlider, &QAbstractSlider::valueChanged, this, [this, item, item2](){
        int value = ui->horizontalSlider->value();
        item->setRotation(value * 1.5); //按角度顺时针旋转，*后面那个是几倍转数
        item2->setRotation(-value); //负角度就是逆时针旋转
    });
}

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

绘画过程比较复杂。虽然QPainter也可以实现图片旋转，但是对比发现不需要还原坐标系的QGraphicsEllipseItem还是太方便了！！！