非常好！你已经明确了：**
UI 界面使用
Qt Creator 的 Designer 工具设计**，这是
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->setup
Ui(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
```
---
本文解释了Qt中UI设计模式的实现方式，通过使用namespace Ui内的Widget类与ui_widget.h文件中的Ui_Widget类来分离界面代码与业务逻辑，使得代码更易于维护。
扫一扫
1415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
