创建界面文件 创建项目时勾选 “Generate form 创建界面”,会自动生成界面文件类名.ui,Forms即界面文件 pro文件中会自动多出一行FORMS += 类名.ui 设计界...">Qt | Linc 的小站 创建界面文件 创建项目时勾选 “Generate form 创建界面”,会自动生成界面文件类名.ui,Forms即界面文件 pro文件中会自动多出一行FORMS += 类名.ui 设计界...">
跳至主要內容

Qt

LincZero大约 4 分钟

Qt

目录

设计模式与界面文件

ui文件

简概

  • ui文件本质是一种xml文件,其文件头部:<?xml version="1.0" encoding="UTF-8"?>

  • 创建界面文件

  • 创建项目时勾选 “Generate form 创建界面”,会自动生成界面文件类名.ui,Forms即界面文件

  • pro文件中会自动多出一行FORMS += 类名.ui

设计界面

  • 左侧是控件列表,可以拖拽或单击新建控件
  • 正上是布局方式,可以用来设置布局或打破布局
  • 右上是层次,可以右击添加工具栏和状态栏,可以右键菜单打破布局等
  • 右下是属性表格
  • 下面是创建过的action,再次拖拽出来可以共用action

底层原理深入解析

参考:【codenong】深入浅出解析Qt creator的ui文件原理及PIMPL设计open in new window

ui文件的生成文件

  • ui文件构建时生成.h扩展名的头文件

    • Qt Creator中可以在项目目录的筛选中取消勾选 “隐藏生成的文件”,即可以看到生成的.h头文件
    • 使用ui文件只是简化cpp文件的书写,本质和cpp文件并无什么不同

类的结构和巧妙设计

  • .ui生成的.h文件

    // ...
    
    class Ui_MainWindow
    {
        // ...
    };
    
    /**定义一个新类 Ui::MainWindow
     * Ui::MainWindow和MainWindow不是同一个类!!!
     * 前者继承于Ui_MainWindow,而后者继承与QMainWindow,后者包含前者的指针
     * 如果在 MainWindow.cpp 中 using namespace ui; 则可能会导致两者混淆
     */
    namespace Ui {
        class MainWindow: public Ui_MainWindow {};
    }
    
    // ...
    
  • 包含Ui::MainWindow的主类

    /**前置声明
     * 这里声明了一个和ui生成文件相同的Ui::MainWindow类
     * 和Ui_MainWindow的情况不同,那里是先有了Ui_MainWindow,再将MainWindow设在Ui的命名空间内
     * 这里还没定义MainWindow,不会将MainWinodw放到Ui命名空间内
     */
    QT_BEGIN_NAMESPACE
    namespace Ui { class MainWindow; }
    QT_END_NAMESPACE
    
    class MainWindow : public QMainWindow
    {
        Q_OBJECT
    
    public:
        MainWindow(QWidget *parent = nullptr);
        ~MainWindow();
    
    private:
        // .ui后生成一个.h,里面有一个UI_MainWindow类,Ui::MainWindow继承于UI_MainWindow类
        // 提前声明 + 不include而在cpp才包含 + 使用非指针,是为了解耦合,修改ui文件时不需要重新编译incldue此类的文件。设计模式的思想
        Ui::MainWindow *ui;
    };
    #endif // MAINWINDOW_H
    

PIMPL设计模式

  • 设计模式内涵
    • 这种设计模式叫PIMPLpointer to implement)
    • 即一个私有的成员指针,将指针所指向的类的内部实现数据进行隐藏
    • 作用
      • 1、降低编译依赖,提高编译速度。
      • 2、接口与实现分离,隐藏实现细节,降低模块耦合。在本文最后会对PIMPL再进行举例说明。

基本使用

用法1:QtDesigner可视化

用QtDesigner设计师界面打开,然后拖拽控件、调整属性即可

设计工具栏进入ui设计界面,优点:(就很像Android设计了)

  • 可视化设计
  • 有属性表
  • 可拖拽布局、使用方便
  • 自动起名(右下角属性栏中的QObject下的objectName属性)

用法2:结合代码

代码调用ui对象

窗口cpp中有一个ui指针,通过该ui指针可以调用ui中的object 例如:ui->actionNew->setIcon(QIcon(".source/favicon.ico"));

按钮组与单选复选框

ui->rBtnMan->setChecked(true);													// 设置默认选中
connect(ui->rBtnWoman, &QRaidoButton::clicked, [=](){qDebug()<<"Select 2"});	// 按钮组反馈
connect(ui->cBox, &QCheckBox::stateChanged, [=](int state){qDebug()<<state;});	// 复选框反馈(2是选中,1是半选,0是未选中)

用法3:QUiLoader读取ui文件

该用法将ui文件当做资源文件,不常用

这种方式使用ui文件不会生成ui_*.h文件

#include <QtUiTools>					// 提供QUiLoader类,需要:Qt += uitools

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    QUiLoader loader;					// ui文件加载器
    QFile file(":/form/mainwindow.ui");	// ui文件
    file.open(QFile::ReadOnly);			// 读取ui文件
    QWidget *widget = loader.load(&file);// 加载ui文件并导出QWidget
    file.close();						// 关闭文件
    widget->show();

    return app.exec();
}

其他

常用的属性

右下角是属性栏,最下面是该控件类,从下到上依次是下面类的基类。每个类都有自己的属性

MainWindow

  • windowTitle,窗口标题
  • 大小
    • geometry,坐标和宽高尺寸
    • minimumSize,最小宽高尺寸
    • maximumSize,最大宽高尺寸
    • 如果都改成一样即固定大小(同css的width、min-width、max-width调成一样值)
  • 边距
    • Layout...Margin,布局边距,默认是9

以QPushButton为例

  • QObject,Qt类
    • objectName,对象名
  • QWidget,控件类
    • enable,可使用
    • cursor,鼠标悬停样式
  • QAbstractButton,按钮的抽象基类
    • text,文字
    • icon,图标
    • iconSize,图标大小
    • shortcut,快捷键
  • QPushButton,按压式按钮类
    • ...

image-20210114012744175