Qt开发ui文件界面模块化设计
一、Qt界面模块化设计
Qt界面模块化就是使用一个.ui文件等于一个类(界面类)的思路,然后在主界面直接调用这个界面类，说白了就是主界面包含N个界面类,这就是面向对象的最基本用法：类的实例化与组合。
二、一个ui文件自动生成一个界面类(.h文件)
三、测试
项目目录结构/ ├── CMakeLists.txt ├── main.cpp ├── testUI01.ui ├── testUI02.ui ├── testUI03.ui ├── app.rc #VS资源（图标、版本） ├── app.ico #图标文件 ├── resources.qrc #Qt资源 ├── style.qss #样式文件 └── images/ └── bg.jpg #图片资源1.CMakeLists.txt
cmake_minimum_required(VERSION 3.20 FATAL_ERROR) #项目名称 project(QtDemo VERSION 1.0 LANGUAGES CXX) #C++标准（VS2015最高支持 14） set(CMAKE_CXX_STANDARD 14) set(CMAKE_CXX_STANDARD_REQUIRED ON) #强制使用VS2015 工具集 v140 set(CMAKE_GENERATOR_TOOLSET "v140" CACHE STRING "Platform Toolset" FORCE) #自动处理Qt信号槽/UI/资源（必须开） set(CMAKE_AUTOMOC ON) set(CMAKE_AUTORCC ON) set(CMAKE_AUTOUIC ON) #查找Qt5.12.6（精准匹配） find_package(Qt5 5.12.6 REQUIRED COMPONENTS Core Widgets Gui) #让VS能找到自动生成的头文件 include_directories(${CMAKE_CURRENT_BINARY_DIR}) #强制生成 testUI01.h testUI02.h testUI03.h qt5_wrap_ui(UI_HEADERS testUI01.ui testUI02.ui testUI03.ui) #源文件（你可以自己加） set(SOURCES main.cpp app.rc #VS 资源 resources.qrc #Qt 资源 ${UI_HEADERS} # 把生成好的ui文件加进来 ) #WIN32：去掉控制台黑框 add_executable(QtDemo WIN32 ${SOURCES} ) #链接Qt库 target_link_libraries(QtDemo PRIVATE Qt5::Core Qt5::Widgets Qt5::Gui ) #VS输出目录优化 set_target_properties(QtDemo PROPERTIES RUNTIME_OUTPUT_DIRECTORY_DEBUG ${CMAKE_BINARY_DIR}/bin/Debug RUNTIME_OUTPUT_DIRECTORY_RELEASE ${CMAKE_BINARY_DIR}/bin/Release ) #自动配置VS调试PATH set(QT_BIN_PATH "D:/Tool/DevelopmentTool/Qt/Qt5.12.6/5.12.6/msvc2015_64/bin") set_target_properties(QtDemo PROPERTIES VS_DEBUGGER_ENVIRONMENT "PATH=${QT_BIN_PATH};%PATH%" )2.main.cpp
#include <QApplication> #include <QWidget> #include <QLabel> #include <QFile> #include <QHBoxLayout> #include "ui_testUI01.h" #include "ui_testUI02.h" #include "ui_testUI03.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); QWidget window; window.setWindowTitle("Qt5 + VS2015 + CMake"); //1.设置名称（给QSS用） window.setObjectName("centralWidget"); //2.从qrc读取QSS文件 QFile file(":/style.qss"); file.open(QFile::ReadOnly); QString qss = file.readAll(); file.close(); //3.应用样式表 window.setStyleSheet(qss); window.resize(1920, 1080); #if 1 //创建自动生成的UI对象 Ui::testUI01 ui01; //把UI绑定到窗口 QWidget *w01 = new QWidget(); ui01.setupUi(w01); //创建自动生成的UI对象 Ui::testUI02 ui02; //把UI绑定到窗口 QWidget *w02 = new QWidget(); ui02.setupUi(w02); //创建自动生成的UI对象 Ui::testUI03 ui03; //把UI绑定到窗口 QWidget *w03 = new QWidget(); ui03.setupUi(w03); //布局组装（界面模块化拼接） QHBoxLayout* hBoxLayout = new QHBoxLayout(&window); hBoxLayout->addWidget(w01); hBoxLayout->addWidget(w02); hBoxLayout->addWidget(w03); #endif window.show(); return app.exec(); }3.testUI01.ui/testUI02.ui/testUI03.ui#自行通过工具生成
4.app.rc
IDI_ICON1 ICON "app.ico"5.app.ico #自行找一个ico(32x32)格式的图片
6.resources.qrc
<RCC> <qresource prefix="/"> <file>style.qss</file> <!-- 样式表 --> <file>images/bg.jpg</file> <!-- 背景图 --> </qresource> </RCC>7.style.qss
/* style.qss */ #centralWidget { background-image: url(:/images/bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } #testUI01 { background-color: red; } #testUI02 { background-color: yellow; } #testUI03 { background-color: rgb(144, 238, 144); }8.images/bg.jpg #自行找一个背景图片
9.程序的编译参考
Qt开发之CMake版本、Qt版本和VS2015的编译工具链适配那篇文章。
10.编译程序生成的界面类(.h文件)及程序的运行结果
开发qss样式表文件
一、一些概念
1.Qt QSS(Qt Style Sheets)
语法与CSS高度相似，核心是选择器+声明块，用于精准控制Qt控件外观，具体知识点基础结构、选择器、属性、优先级。
2.核心语法结构
1)基本格式 选择器 { 属性名1: 属性值1; 属性名2: 属性值2; /*多条声明，分号分隔*/ } --选择器：指定样式作用的控件/控件组; --声明块：{} 包裹，内部是 属性: 值; 键值对，每条必须以分号结尾; 2)多选择器共用样式 用逗号,分隔多个选择器，共享同一套声明 QPushButton, QLineEdit, QComboBox { color: red; background-color: white; } 3)大小写规则 --属性名：不区分大小写(color/Color/COLOR 等价); --类名、对象名、Qt 属性名：严格区分大小写。3.选择器(Selector)
选择器决定样式作用对象:
1)通用选择器(*):匹配所有控件，用于全局默认样式;
2)类型选择器(WidgetType):匹配指定类及其所有子类的控件实例：
/*匹配所有 QPushButton 及其子类(如MyPushButton)*/ QPushButton { border: 1px solid gray; }3)ID选择器(#objectName):通过控件对象名objectName精准匹配单个控件(优先级最高);
4)类选择器(.className):匹配设置了 setProperty("class", "className") 的控件，实现分组样式:
btn->setProperty("class", "primary"); //设置控件属性 /*匹配所有 class="primary" 的控件 */ .primary { background-color: #2385bb; }5)属性选择器([attr=value]):匹配属性值符合条件的控件，支持精确/模糊匹配:
/*精确匹配：flat 属性为 false 的 QPushButton*/ QPushButton[flat="false"] { border: 2px solid black; } /*模糊匹配：text 包含 "OK" 的 QPushButton*/ QPushButton[text*="OK"] { color: green; }6)后代选择器(父 子):匹配父控件下的所有后代(子、孙等)控件：
/*匹配 QDialog 内所有 QLabel*/ QDialog QLabel { color: darkblue; } /*只给在LoginWindow窗口内部的名字叫btn_ok的控件生效。 不在LoginWindow内部的btn_ok不生效*/ #LoginWindow #btn_ok { background: blue; }7)子选择器(父 > 子):仅匹配父控件的直接子控件(不包含孙级):
/*仅匹配 QWidget 直接子级的 QPushButton*/ QWidget > QPushButton { padding: 5px 10px; }8)伪状态选择器(:state):匹配控件特定交互状态(如 hover、pressed、disabled)：
/*鼠标悬停时的按钮样式*/ QPushButton:hover { background-color: lightgray; } /*按钮按下时的样式*/ QPushButton:pressed { background-color: darkgray; } /*禁用状态的输入框*/ QLineEdit:disabled { background-color: #f0f0f0; color: #888; }9)子控件选择器(::subcontrol):匹配控件的内部子元素(如按钮文本、下拉箭头、滚动条滑块)：
/*QComboBox 下拉箭头样式*/ QComboBox::drop-down { width: 20px; border-left: 1px solid gray; } /*QScrollBar 滑块样式*/ QScrollBar::handle:vertical { background-color: #ccc; border-radius: 4px; }4.属性与值(Property&Value)
声明块内是 属性: 值;，Qt 支持大量控件样式属性:
1)颜色属性：
--color：前景色(文本颜色);
--background-color：背景色;
--border-color：边框色;
--值:取值：颜色名(red)、十六进制(#ff0000/#f00)、RGB(rgb(255,0,0))、RGBA(rgba(255,0,0,0.5));
2)字体属性：
--font-family：字体(如Arial);
--font-size：字号(14px/12pt);
--font-weight：字重(normal/bold/lighter);
--font-style：样式(normal/italic/oblique);
3)边框属性：
--border：简写(宽度 样式 颜色，如 1px solid gray);
--border-width：边框宽度;
--border-style：样式(solid/dashed/dotted/none);
--border-radius：圆角半径(实现圆角控件);
4)盒模型属性(间距):
--margin：外边距(控件与外部间距);
--padding：内边距(内容与边框间距);
--值：上右下左或单个值(四边相同);
5)背景图片:
--background-image：背景图(url(:/images/bg.png)，资源路径);
--background-repeat：重复方式(repeat/repeat-x/repeat-y/no-repeat);
--background-position：位置(left top/center);
5.优先级与继承(Specificity & Inheritance)
选择器优先级决定冲突样式的生效规则:
ID 选择器(#id)> 类/属性/伪状态选择器(.class/[attr]/:state > 类型选择器(WidgetType)> 通用选择器(*)。
二、测试
查看Qt开发ui文件界面模块化设计那篇文章,主要更新了style.qss文件(给不同界面中相同的子控件添加样式)：
/*style.qss*/ #centralWidget { background-image: url(:/images/bg.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; } /*testUI01相关样式*/ #testUI01 #pushButton { background-color: red; } #testUI01{ background-color: black; } /*testUI02相关样式*/ #testUI02 #pushButton { color:green; } #testUI02 { background-color: yellow; } #testUI03 { background-color: rgb(144, 238, 144); }主程序运行时的界面：
差异分析实战，含logFC手动计算与可视化)
