QT Creator 使用 design 修改 ui界面编译后界面未更新问题的解决 From EricQu

本文针对UI界面未实时更新的问题提供了解决方案。通过调整.ui文件的处理方式及项目配置,确保.ui文件正确编译,避免因旧文件导致的界面显示错误。

今日遇到一个奇怪的问题,描述如题。

网上搜索了一些解决方案,说的不是很清楚,经过一些时间的摸索,这里总结一下解决方法。

ui源文件到界面显示的原理可以网上搜索,这里不再描述。简单讲就是先要从*.ui生成ui_*.h然后再编译,所以界面未更新实际上是因为ui_*.h这个文件没有更新导致的。

出现此问题后我尝试了以下几个方法:

1,在生成目标的文件夹内找到ui_*.h,复制到源代码文件夹内覆盖原来文件,成功

2,删除源代码文件夹内ui_*.h后,clear all 然后再重新编译,失败。

3,uic *.ui -o ui_*.h 失败,生成的ui_*.h是空的

根治的方法:

项目设置文件.pro内增加 UI_DIR=./UI,同时删除掉源代码目录中ui_*.h,clear all,->qmake->rebuilt all

总结:导致ui_*.h文件没有更新的原因是源代码中#include ui_*.h的位置和实际生成的位置不同,引用的是老的ui_*.h,设置UI_DIR后就规定了位置于是不会出错了。

引用请注明原作者与出处。

非常好!你已经明确了:**UI 界面使用 Qt CreatorDesigner 工具设计**,这是 Qt 开发的标准做法。 下面我将为你提供: - ✅ 如何用 **Qt Creator 设计登录和主窗口 UI** - ✅ 生成的 `.ui` 文件如何与代码联动 - ✅ 完整的 `LoginDialog.ui` 和 `MainWindow.ui` 的 XML 内容(可直接复制) - ✅ 如何在 Qt Creator 中加载并修改这些 UI --- ## 🎨 使用 Qt Creator 设计 UI 的完整流程 ### 步骤 1:打开 Qt Creator → 创建项目 ```bash File → New File or Project → Application → Qt Widgets Application ``` 命名项目为 `FamilyClient`,一路下一步。 --- ### 步骤 2:Qt Creator 自动生成 UI 文件 创建后你会看到: ``` FamilyClient/ ├── main.cpp ├── FamilyClient.pro ├── headers/ │ └── MainWindow.h ├── sources/ │ └── MainWindow.cpp └── forms/ ← Qt Creator 默认叫 forms/ └── MainWindow.ui ← 可视化设计器打开它 ``` > ⚠️ 注意:新版 Qt Creator 把 `ui/` 目录叫做 `forms/`,但作用一样。 --- ## ✅ 第一个 UI:登录对话框 `LoginDialog.ui` ### 1. 添加新 UI 文件 右键项目 → `Add New...` → `Qt` → `Qt Designer Form Class` 选择: - Template: `Dialog without Buttons` - Name: `LoginDialog` 会自动生成: - `headers/LoginDialog.h` - `sources/LoginDialog.cpp` - `forms/LoginDialog.ui` --- ### 2. 在 Qt Designer 中设计界面 拖拽控件如下布局: | 控件 | 属性设置 | |------|----------| | QLabel (用户名) | text: "用户名:" | | QLineEdit | objectName: `userEdit` | | QLabel (密码) | text: "密码:" | | QLineEdit | objectName: `passEdit`, echoMode: `Password` | | QPushButton | objectName: `loginBtn`, text: "登录" | | QPushButton | objectName: `regBtn`, text: "注册" | 最终效果: ``` +-----------------------------+ | 登录系统 | | | | 用户名:[___________] | | 密码: [___________] | | | | [登录] [注册] | +-----------------------------+ ``` --- ### 3. `LoginDialog.ui` 的 XML 源码(可直接替换) ```xml <?xml version="1.0" encoding="UTF-8"?> <ui version="4.0"> <class>LoginDialog</class> <widget class="QDialog" name="LoginDialog"> <property name="geometry"> <rect> <x>0</x> <y>0</y> <width>300</width> <height>150</height> </rect> </property> <property name="windowTitle"> <string>家庭账本 - 登录</string> </property> <layout class="QVBoxLayout" name="verticalLayout"> <item> <layout class="QFormLayout" name="formLayout"> <item row="0" column="0"> <widget class="QLabel" name="label"> <property name="text"> <string>用户名:</string> </property> </widget> </item> <item row="0" column="1"> <widget class="QLineEdit" name="userEdit"/> </item> <item row="1" column="0"> <widget class="QLabel" name="label_2"> <property name="text"> <string>密码:</string> </property> </widget> </item> <item row="1" column="1"> <widget class="QLineEdit" name="passEdit"> <property name="echoMode"> <enum>QLineEdit::Password</enum> </property> </widget> </item> </layout> </item> <item> <layout class="QHBoxLayout" name="horizontalLayout"> <item> <spacer name="horizontalSpacer"> <property name="orientation"> <enum>Qt::Horizontal</enum> </property> <property name="sizeHint" stdset="0"> <size> <width>40</width> <height>20</height> </size> </property> </spacer> </item> <item> <widget class="QPushButton" name="loginBtn"> <property name="text"> <string>登录</string> </property> </widget> </item> <item> <widget class="QPushButton" name="regBtn"> <property name="text"> <string>注册</string> </property> </widget> </item> </layout> </item> </layout> </widget> <resources/> <connections/> </ui> ``` > 💡 你可以将上面内容保存为 `forms/LoginDialog.ui`,然后重新加载项目即可看到界面。 --- ## ✅ 第二个 UI:主窗口 `MainWindow.ui` ### 1. 打开 `MainWindow.ui` 进行设计 #### 布局结构建议: 使用 `QTabWidget` 分页: - 第一页:记账录入(Form Layout) - 第二页:图表展示(`QChartView` 占位) - 第三页:聊天区域(`QTextEdit` + `QLineEdit` + `QPushButton`) --- ### 2. `MainWindow.ui` XML 示例(精简版) ```xml <?xml version="1.0" encoding="UTF-8"?> <ui version="4.0"> <class>MainWindow</class> <widget class="QMainWindow" name="MainWindow"> <property name="geometry"> <rect> <x>0</x> <y>0</y> <width>600</width> <height>500</height> </rect> </property> <property name="windowTitle"> <string>家庭账本 - 主界面</string> </property> <widget class="QWidget" name="centralwidget"> <layout class="QVBoxLayout" name="verticalLayout"> <item> <widget class="QTabWidget" name="tabWidget"> <!-- Tab 1: 记账 --> <widget class="QWidget" name="tab_record"> <attribute name="title"> <string>记账</string> </attribute> <layout class="QFormLayout" name="formLayout"> <item row="0" column="0"> <widget class="QLabel" name="label_amount"> <property name="text"> <string>金额:</string> </property> </widget> </item> <item row="0" column="1"> <widget class="QDoubleSpinBox" name="amountBox"> <property name="suffix"> <string> 元</string> </property> <property name="maximum"> <double>999999.0</double> </property> </widget> </item> <item row="1" column="0"> <widget class="QLabel" name="label_category"> <property name="text"> <string>分类:</string> </property> </widget> </item> <item row="1" column="1"> <widget class="QComboBox" name="categoryBox"> <item> <property name="text"> <string>餐饮</string> </property> </item> <item> <property name="text"> <string>交通</string> </property> </item> <item> <property name="text"> <string>购物</string> </property> </item> <item> <property name="text"> <string>娱乐</string> </property> </item> </widget> </item> <item row="2" column="0"> <widget class="QLabel" name="label_desc"> <property name="text"> <string>备注:</string> </property> </widget> </item> <item row="2" column="1"> <widget class="QLineEdit" name="descEdit"/> </item> <item row="3" column="0"> <widget class="QLabel" name="label_type"> <property name="text"> <string>类型:</string> </property> </widget> </item> <item row="3" column="1"> <layout class="QHBoxLayout" name="horizontalLayout_type"> <item> <widget class="QRadioButton" name="expenseRadio"> <property name="text"> <string>支出</string> </property> <property name="checked"> <bool>true</bool> </property> </widget> </item> <item> <widget class="QRadioButton" name="incomeRadio"> <property name="text"> <string>收入</string> </property> </widget> </item> <item> <spacer name="horizontalSpacer"> <property name="orientation"> <enum>Qt::Horizontal</enum> </property> <property name="sizeHint" stdset="0"> <size> <width>40</width> <height>20</height> </size> </property> </spacer> </item> <item> <widget class="QPushButton" name="submitBtn"> <property name="text"> <string>提交记账</string> </property> </widget> </item> </layout> </item> </layout> </widget> <!-- Tab 2: 图表 --> <widget class="QWidget" name="tab_chart"> <attribute name="title"> <string>统计图表</string> </attribute> <layout class="QVBoxLayout" name="verticalLayout_chart"> <item> <widget class="QLabel" name="chartPlaceholder"> <property name="text"> <string>此处将显示支出分类饼图(需集成 Qt Charts)</string> </property> <property name="alignment"> <set>Qt::AlignCenter</set> </property> </widget> </item> </layout> </widget> <!-- Tab 3: 聊天 --> <widget class="QWidget" name="tab_chat"> <attribute name="title"> <string>家庭聊天</string> </attribute> <layout class="QVBoxLayout" name="verticalLayout_chat"> <item> <widget class="QTextEdit" name="chatDisplay"> <property name="readOnly"> <bool>true</bool> </property> </widget> </item> <item> <layout class="QHBoxLayout" name="horizontalLayout_input"> <item> <widget class="QLineEdit" name="chatInput"/> </item> <item> <widget class="QPushButton" name="sendBtn"> <property name="text"> <string>发送</string> </property> </widget> </item> </layout> </item> </layout> </widget> </widget> </item> </layout> </widget> </widget> <resources/> <connections/> </ui> ``` --- ## ✅ 如何让 UI 和代码联动? ### 1. 包含头文件 ```cpp #include "ui_LoginDialog.h" #include "ui_MainWindow.h" ``` ### 2. 成员变量中使用 `Ui::LoginDialog *ui;` 例如在 `LoginDialog.h` 中: ```cpp namespace Ui { class LoginDialog; } class LoginDialog : public QDialog { Q_OBJECT public: explicit LoginDialog(MessageClient *client, QWidget *parent = nullptr); ~LoginDialog(); private slots: void on_loginBtn_clicked(); private: Ui::LoginDialog *ui; MessageClient *client; }; ``` ### 3. 构造函数初始化 UI ```cpp LoginDialog::LoginDialog(MessageClient *client, QWidget *parent) : QDialog(parent), ui(new Ui::LoginDialog), client(client) { ui->setupUi(this); // 必须调用! connect(ui->loginBtn, &QPushButton::clicked, this, &LoginDialog::on_loginBtn_clicked); } ``` ### 4. 连接信号槽(如按钮点击) ```cpp void LoginDialog::on_loginBtn_clicked() { QString user = ui->userEdit->text(); QString pass = ui->passEdit->text(); client->login(user, pass); } ``` --- ## ✅ 在 Qt Creator 中实时预览 UI - 双击 `.ui` 文件 → 自动进入 **Design 模式** - 拖拽控件、修改属性 - 点击左上角 🔍 “Preview” 可预览运行效果 - 修改保存后,`.h` 和 `.cpp` 会自动更新 `ui->xxx` 成员 --- ## ✅ 编译时自动处理 `.ui` 文件 Qt 的 `qmake` 会自动调用 `uic` 工具将 `.ui` 转成 `ui_xxx.h`,无需手动操作。 只要确保 `.pro` 文件中有: ```qmake FORMS += \ forms/LoginDialog.ui \ forms/MainWindow.ui ``` ---
评论 16
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值