【QT】 Qt 新手基础入门（超详细）

置顶 alive903

已于 2025-05-29 14:44:54 修改

阅读量3.5k

点赞数 30

分类专栏： QT 文章标签： qt 前端 c++ qss 新手基础入门 Qt入门

于 2025-03-15 09:00:00 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_56167571/article/details/146265650

版权

QT 专栏收录该内容

16 篇文章

订阅专栏

很高兴你能看到这篇文章，同时我的语雀文档也更新了许多嵌入式系列的学习笔记希望能帮到你：
https://www.yuque.com/alive-m4b9n

QT 是什么？

Qt是一个1991年由Qt Company开发的《跨平台C++图形用户界面应用程序开发框架(库)》，可构建高性能的桌面、移动及Web应用程序。也可用于开发非GUI程序，比如控制台工具和服务器。Qt是面向对象的框架，使用特殊的代码生成扩展（称为元对象编译器(Meta Object Compiler, moc)）以及一些宏，Qt很容易扩展，并且允许真正的组件编程。

QT的中文社区: Qt开源社区-致力于Qt普及工作！ - qt qml linux 嵌入式教程!

QT 安装

详情可以参考我这篇笔记，我安装的是QT 5.14.2版本，总的来说QT6和QT5之间的核心API并没有差很多，5.14.2还可以离线安装爽歪歪，适合新手学习
QT环境搭建

QT 工程创建

1️⃣创建QT桌面应用

2️⃣设置工程名称与路径

3️⃣设置窗口名称

4️⃣选择编译器

QT 工程分析

xxx.pro 文件

作用:配置当前QT工程的源码和模块

//添加QT工程的模块,所有的类都包含在模块中
QT       += core gui
greaterThan(QT_MAJOR_VERSION, 4): QT += widgets
//配置C++的版本11
CONFIG += c++11
//配置源码文件
SOURCES += \
    main.cpp \
    mainwindow.cpp
//配置头文件
HEADERS += \
    mainwindow.h
//添加UI设计文件
FORMS += \
    mainwindow.ui
//默认编译规则
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target
//后续添加的资源文件路径
RESOURCES += \ 
    pic.qrc

xxxx.h 头文件

作用: 声明窗体类

#ifndef MAINWINDOW_H
#define MAINWINDOW_H     //防止头文件重复包含
#include <QMainWindow>   //添加基类的头文件
QT_BEGIN_NAMESPACE  //宏定义
namespace Ui
{
     class MainWindow;
 
 
} //在UI的命名空间中声明一个MainWindow类
QT_END_NAMESPACE
//定义一个MainWindow类,公共继承 QMainWindow,获取QMainWindow的功能函数 与 数据成员。
class MainWindow : public QMainWindow
{
    Q_OBJECT //QT核心信号与槽函的声明
public:
    MainWindow(QWidget *parent = nullptr); //构造函数
    ~MainWindow(); //析构函数
private:
    Ui::MainWindow *ui; //定义UI命名空间中的一个MainWindow 指针名称为 ui
    //目的:为了把界面代码与逻辑代码分离，所有界面相关的代码都在 Ui::MainWindow 空间中完成
};
#endif // MAINWINDOW_H

xxx.cpp 文件

作用: 设计当前窗体的逻辑

#include "mainwindow.h" //添加自定义头文件

#include "ui_mainwindow.h" //根据mainwindow.ui 自动生成的界面设置头文件 
 
//构造函数参数列表初始化，QMainWindow(parent) 初始化基类成员 
//ui(new Ui::MainWindow)  初始化ui指针 
MainWindow::MainWindow(QWidget *parent):QMainWindow(parent),ui(new Ui::MainWindow) 
{ 
    //调用ui中的设置函数 
    ui->setupUi(this); 
} 
 
//析构函数 
MainWindow::~MainWindow() 
{ 
    delete ui; //释放构造申请的堆空间 
}

main.cpp 文件

作用：程序入口

#include "mainwindow.h" //添加自定义窗口头文件
#include <QApplication> //添加系统QT应用头文件
 
int main(int argc, char *argv[])
{
    //创建一个Qt应用对象,没有应用就没有任何可视化的对象
    QApplication a(argc, argv);
    //在应用创建窗口对象
    MainWindow w;
    //显示窗口对象
    w.show();
    //执行应用 ，一直循环执行，刷新界面
    return a.exec();
}

UI 设计师文件

作用：可视化界面设计UI

#ifndef UI_MAINWINDOW_H
#define UI_MAINWINDOW_H

//添加QT对象的头文件
#include <QtCore/QVariant>
#include <QtWidgets/QApplication>
#include <QtWidgets/QMainWindow>
#include <QtWidgets/QMenuBar>
#include <QtWidgets/QStatusBar>
#include <QtWidgets/QWidget>

QT_BEGIN_NAMESPACE //宏定义,关联mainwindow.h 中的UI命名空间


//定义一个 Ui_MainWindow 类
class Ui_MainWindow
{
public:
    QWidget *centralwidget;//中央窗口对象
    QMenuBar *menubar;//菜单栏对象
    QStatusBar *statusbar;//状态栏对象

    void setupUi(QMainWindow *MainWindow)//设置UI函数
    {
        //设置主窗口对象名称
        if (MainWindow->objectName().isEmpty())
            MainWindow->setObjectName(QString::fromUtf8("MainWindow"));
        
        MainWindow->resize(800, 600);//设置窗口主大小
        //在主窗口中创建一个中央窗口
        centralwidget = new QWidget(MainWindow);
        centralwidget->setObjectName(QString::fromUtf8("centralwidget"));

        //创建一个菜单栏对象
        MainWindow->setCentralWidget(centralwidget);
        menubar = new QMenuBar(MainWindow);
        menubar->setObjectName(QString::fromUtf8("menubar"));
        menubar->setGeometry(QRect(0, 0, 800, 21));
        MainWindow->setMenuBar(menubar);//设置菜单栏对象
        //新建一个状态栏对象
        statusbar = new QStatusBar(MainWindow);
        statusbar->setObjectName(QString::fromUtf8("statusbar"));
        MainWindow->setStatusBar(statusbar);

        //设计UI的文本内容
        retranslateUi(MainWindow);

        //关联元对象MainWindows
        QMetaObject::connectSlotsByName(MainWindow);
    } // setupUi

    void retranslateUi(QMainWindow *MainWindow)
    {
        //设置窗口的标题
        MainWindow->setWindowTitle(QCoreApplication::translate("MainWindow", "MainWindow", nullptr));
    } // retranslateUi

};
//定义命名空间
namespace Ui {
    //定义MainWindow类继承UI_Mainwindow
    class MainWindow: public Ui_MainWindow {};
} // namespace Ui

QT_END_NAMESPACE

#endif // UI_MAINWINDOW_H

使用技巧

1️⃣你拖过去的组件默认都是生成指针，然后使用 new分配了堆空间

2️⃣ 你拖过去的组件对象(指针)在ui设计师右上角类对象视图中都可以清清楚楚地看到名字以及相关的属性设置

3️⃣QT中所有的组件，对应的类名都叫做 QXXXX
比如：标签的名字叫做Label，类名叫做 QLabel

4️⃣头文件都跟类名相同的

5️⃣你肉眼看到的属性英文单词，QT定义类的时候都提供了设置该属性的方法，方法名字统一叫做 setxxx
比如：肉眼看到属性叫 Geometry --》接口函数一定叫做 setGeometry

6️⃣ ctrl 按住不松开,鼠标左键点击函数名字即可跳到函数的源码中

7️⃣点击要使用的组件，直接拖到窗口(点击组件，按下ctrl不松，拖动复制组件，按下ctrl+z可以撤销你设计的界面)

（重点😘）QT 帮助文档

QT 帮助文档可以帮我们查看个各种函数的使用方法

有两种打开方式

1️⃣在 QT creator 左侧工具栏下方点击帮助进入该界面

第一步：输入QFont按F1查找帮组手册或者帮助->索引->输入类名

第二步：点击 More 查找 demo 案例的使用方法

第三步：复制demo案例修改代码显示效果

2️⃣使用安装 QT 时自带的 QT 助手

基础控件介绍

接下来通过 UI 设计师的可视化界面初步了解有哪些基础控件和属性

控件分类

按钮类—QPushButton

行输入框 -QLineEdit

占位符文本

标签显示类 -QLabel

文本显示位置设置

QSS 样式表设计

Qt样式表（style sheet）适用于定制用户界面的机制，是受到HTML中的CSS启发而来，Qt样式表是应用于窗体界面和批量设置控件的外观，与HTML的CSS类似，Qt的样式表是纯文本的格式定义，在应用程序运行时可以载入和解析这些样式定义，从而使应用程序的界面呈现不同的效果。很多软件有换肤功能，就是使用类似于样式表的功能。

通过UI设计器的可视操作修改

改变按钮的文本颜色

注意：

添加 color：设置文本颜色

添加 backgroud-color：设置背景颜色

注意：在两个样式之间要添加分号否则样式无效！！

通过代码修改

//设置按钮btn1的文本颜色
ui->btn1->setStyleSheet("color: rgb(255, 255, 0);");
ui->btn1->setStyleSheet("background-color: rgb(170, 170, 0);");

❗❗为什么 UI 设计师拖拽出来的控件在代码中使用的时候前面要加上 ui 这个指针?

在 Qt 的 mainwindow 头文件中

然后在mainwindow.cpp的构造函数中初始化这个指针

这样，所有 UI 设计师拖拽的控件（比如按钮、文本框）都被 ui 这个指针管理。所以 必须通过 ui->控件名 访问它们

样式表语法

一个样式法则由一个选择器（selector）和一些声明（declaration）组成。

格式：

选择器{
属性1: 值1;
属性2: 值2;
......
};

选择器:

1️⃣通用选择器 ,表示所有组件

2️⃣类型选择器，比如QPushButton,表示所有QPushButton类以及子类的组件

2️⃣ID选择器，比如 QPushButton#btnOK ，表示ObjectName为btnOK的QPushButton实例

QLabel{
    background-color: rgb(255, 255, 0); //设置背景颜色
}
QPushButton:hover{
    background:rgb(115, 183, 255); //鼠标进入控件设置背景颜色
}
QPushButton#btn1{
    border:1px solid #0000ff;  //设置边框大小，边框颜色
    border-radius:50px; //设置圆角边框 前提要是正方形框100*100半径改为50就是圆
    color:red;  //设置字体颜色
}
QPushButton#btn1,QPushButton#btn2,QPushButton#btn3{
    background:rgb(115, 183, 255);
}

注意：实际使用的时候不要加中文注释

常用的 QSS 语句

					  红  绿   蓝
background-color: rgb(85, 255, 255);   //设置背景颜色(按钮，标签的背景颜色)

color: rgb(85, 255, 255);             //设置前景色(文字的颜色)

background-image: url(:/new/prefix1/pic/3.jpg);  //设置背景图片(不会拉伸图片)

background-image: url(你需要的图片的绝对路径);
background-image: url(:你的资源文件的路径名);
//区别：如果使用绝对路径，就不需要加冒号
      //如果你使用资源文件的路径就需要加冒号

border-image: url(:/new/prefix1/pic/2.jpg);//设置边框图片
                                           //边框图片跟组件的大小保持一致
border-image: url(你需要的图片的绝对路径); 

border-radius:15px;    //把倒角设置为15个像素
                       //倒角的大小不能超过组件高度的一半

border:2px solid#ff0000;  //把边框的宽度设置为2个像素，颜色设置成ff0000

QMainWindow{border-image: url(:/new/prefix1/pic/3.jpg);}  //让图片只作用于主窗口

设置背景图片

添加资源文件

选择工程目录右击–》添加新文件—》Qt–》QtResource file—》添加–》添加前缀–》添加文件

注意：照片和工程要放在同一个目录

ctrl +shift+s 保存后即可查看

关闭资源管理器后可以通过下述方法打开

再次添加新的图片

通过代码给控件加上背景图片

//给QMainWindow添加背景图
QMainWindow{
    border-image: url(:/new/prefix1/jige.jpeg);
}
 
//给QLabel添加背景图
QLabel#label_2{
    border-radius:50px;
    border-image: url(:/imags/imags/1.jpg);
}
 
//给按键添加背景图
QPushButton#btn1{
    border:1px solid #000000;
    border-radius:60px;
    border-image: url(:/new/prefix1/jige.png);
}

注意注意注意：QT中路径的写法跟window不一样
比如：window路径       C:\Users\PC\Desktop\share   
      QT中要求改写成： C:/Users/PC/Desktop/share  
    QT工程存储的路径不可以使用中文路径，但是QT的代码中可以使用中文路径
    资源文件路径名跟非资源文件路径名写法的区别
    资源文件路径名:    冒号/new/prefix1/image/某张图片
    比如： 			  :/new/prefix1/image/3.jpg
    非资源文件路径名:  C:/Users/Administrator/Desktop/share/jpeg/我的图片

通过 UI 设计师给控件加上背景图片

最终效果

其他两种图片类型也是一样的操作方式

代码实现学生管理系统登陆界面

现在通过帮助文档及上面的学习已经对控件有初步了解了，现在来实现一个简单的学生管理系统登陆界面

mainwindow.h

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include "QLabel"
#include "QPushButton"
#include "QLineEdit"
#include <QString>
#include <QMessageBox>
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    
    //手动写代码实现登陆界面
    //第一步:创建显示标签
    QLabel *lb = new QLabel("欢迎登陆学生管理系统",this);
    //设置坐标和宽高
    lb->setGeometry(210,50,400,61);
    //设置字体
    QFont myfont("楷体",24);
    lb->setFont(myfont);

    //第二步:创建两个单行输入框 使用成员变量
    le1 = new QLineEdit(this);
    le2 = new QLineEdit(this);
    //设置坐标和宽高
    le1->setGeometry(210,150,460,55);
    le2->setGeometry(210,220,460,55);
    //设置字体
    le1->setFont(myfont);
    le2->setFont(myfont);
    //设置位数
    le1->setMaxLength(6);
    le2->setMaxLength(6);
    //设置密码隐藏
    le2->setEchoMode(QLineEdit::Password);
    //设置提示文字
    le1->setPlaceholderText("请输入账号");
    le2->setPlaceholderText("请输入密码");

    //设置样式
    le1-> setStyleSheet("border-radius:15px;border:2px solid#ff0000;");
    le2-> setStyleSheet("border-radius:15px;border:2px solid#ff0000;");


    //第三步:创建两个按钮，并使用QIcon 设置图标
    button1 = new QPushButton(QIcon(":/new/prefix1/image/OIP-C.jpg"),"登陆",this);
    button2 = new QPushButton(QIcon(":/new/prefix1/image/OIP-C.jpg"),"注册",this);

    //设置字体
    button1->setFont(myfont);
    button2->setFont(myfont);

    //设置按钮大小
    button1->setGeometry(220,290,160,55);
    button2->setGeometry(460,290,160,55);

    //给主界面添加一个边框图片
    this->setStyleSheet("QMainWindow{border-image:url(C:/Users/28494/Desktop/gif录制/OIP-C.jpg);}");
    
}

MainWindow::~MainWindow()
{
    delete le1;
    delete le2;
    delete button1;
    delete button2;
    delete ui;
}