Qt学习 GUI 初识

学习于b站，阿西拜up的Qt相关视频。

GUI初识

1.C++代码实现简单的GUI界面

#include "widget.h"
#include "ui_widget.h"
#include<QIcon>
#include<QFrame>
#include<QGridLayout>
#include<QPushButton>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);
    this->resize(900,600);
    this->setWindowTitle("GUI");
    this->setWindowIcon(QIcon("C:/Code/Qt/stu/stu_GUI/images/icons/playstation.png"));

    QFrame* frame1 = new QFrame(this);
    frame1->setFrameStyle(QFrame::Box);
    frame1->setCursor(Qt::SizeAllCursor); //显示鼠标的形状

    QFrame* frame2 = new QFrame(this);
    frame2->setFrameStyle(QFrame::Box);
    frame2->setCursor(Qt::WaitCursor); //显示鼠标的形状

    QFrame* frame3 = new QFrame(this);
    frame3->setFrameStyle(QFrame::Box);
    frame3->setCursor(Qt::PointingHandCursor); //显示鼠标的形状

    auto* grid = new QGridLayout(this); //网格布局
    grid->addWidget(frame1,0,0);
    grid->addWidget(frame2,0,1);
    grid->addWidget(frame3,0,2);
    this->setLayout(grid); //设置布局

    auto* grid2 = new QGridLayout(frame2); //网格布局
    QPushButton* btn1 = new QPushButton("quit",this);
    grid2->addWidget(btn1);
    connect(btn1,&QPushButton::clicked,this,&Widget::close);
    this->setLayout(grid2);
    this->dumpObjectTree(); //打印对象树
}

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

2.使用样式表自定义界面

暗黑的界面样式

QWidget {
    background-color: rgb(79, 79, 79); /* 设置背景颜色 */
    color: rgb(230, 230, 230); /* 设置文本颜色 */
    font: 14pt "微软雅黑"; /* 设置字体和字号 */
}

#include "widget.h"

#include <QApplication>
#include<QFile>
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;

    QFile styleFile("C:/Code/Qt/stu/stu_GUI/style_css/style1.css.txt");
    styleFile.open(QFile::ReadOnly);
    QString stylesheet = QString::fromLatin1(styleFile.readAll());
    w.setStyleSheet(stylesheet);

    w.show();

    return a.exec();
}

给QSpinBox控件的上下按钮添加自定义图片

QSpinBox::down-button {image:url("C:/Code/Qt/stu/stu_GUI/images/icons/unfold.png");}
QSpinBox::up-button {image:url("C:/Code/Qt/stu/stu_GUI/images/icons/packup.png");}

    QSpinBox* spinBox = new QSpinBox(this);
    grid2 ->addWidget(spinBox);

改变button的样式

QPushButton {
    background-color: #4CAF50; /* 设置背景颜色 */
    border: none; /* 去掉边框 */
    color: white; /* 设置文本颜色为白色 */
    padding: 10px 20px; /* 设置内边距 */
    text-align: center; /* 文本居中对齐 */
    text-decoration: none; /* 去掉下划线 */
    display: inline-block; /* 设置为行内块级元素 */
    font-size: 16px; /* 设置字体大小 */
    margin: 4px 2px; /* 设置外边距 */
    cursor: pointer; /* 鼠标悬停时显示指针 */
    border-radius: 5px; /* 设置圆角边框 */
}

QPushButton:hover {
    background-color: #45a049; /* 鼠标悬停时的背景颜色 */
}

按钮加减QLabel数字

#include"minusplus.h"
#include<QIcon>
#include<QPushButton>
#include<QGridLayout>


MinusPlus::MinusPlus(QWidget *parent)
    : QWidget(parent)
{

    this->resize(600,400);
    this->setWindowTitle("GUI");
    this->setWindowIcon(QIcon("C:/Code/Qt/stu/stu_GUI/images/icons/playstation.png"));

    auto* btn_plus = new QPushButton("+",this);
    auto* btn_minus = new QPushButton("-",this);
    label = new QLabel("0",this);

    auto* grid = new QGridLayout(this); //网格布局
    grid->addWidget(btn_plus,0,0,1,1);
    grid->addWidget(btn_minus,0,1,1,1);
    grid->addWidget(label,1,1,1,1);
    this->setLayout(grid); //设置布局


    connect(btn_plus,&QPushButton::clicked,this,&MinusPlus::plus);
    connect(btn_minus,&QPushButton::clicked,this,&MinusPlus::minus);
}

MinusPlus::~MinusPlus()
{

}


void MinusPlus::plus()
{
    //label的值+1
    int val = label->text().toInt();
    label->setText(QString::number(++val));
}
void MinusPlus::minus()
{
    //label的值-1
    int val = label->text().toInt();
    label->setText(QString::number(--val));
}