3 使用布局管理器

1. 调整标签和输入框：按住 Ctrl 键，选中第一个标签和它旁边的输入框，点击工具栏的 表单布局 按钮,对另一组标签和输入框做同样操作。
2. 调整按钮：选中两个按钮，点击工具栏的 水平布局 按钮。
3. 整体布局：现在窗体上有三个部分（两个表单和一个水平布局的按钮），选中这三个部分，点击工具栏的 垂直布局 按钮。

当你调整窗口大小时，所有控件都会自动调整位置和大小,保持良好的布局。

4 设置对象名称

这是至关重要的一步，因为我们在 C++ 代码中需要通过这个名称来访问控件。

1. 在 Object Inspector 中选中第一个 Label。
2. 在 Property Editor 中找到 objectName 属性，将其值改为 labelUsername。
3. 同样地，将其他控件的 objectName 分别设置为：
   • 第二个 Label -> labelPassword
   • 第一个 Line Edit -> lineEditUsername
   • 第二个 Line Edit -> lineEditPassword (可以设置其 echoMode 属性为 Password，使其显示为 )
   • 第一个 Button -> btnLogin
   • 第二个 Button -> btnCancel

5 样式美化

我们可以使用样式表来美化界面。

1. 选中整个窗体（在 Object Inspector 中点击 Dialog）。
2. 在 Property Editor 中找到 styleSheet 属性，点击右侧的 按钮。
3. 在弹出的编辑器中输入一些 CSS 代码，

   QDialog {
       background-color: #f0f0f0;
   }
   QPushButton {
       background-color: #007bff;
       color: white;
       border: none;
       padding: 5px 15px;
       border-radius: 3px;
   }
   QPushButton:hover {
       background-color: #0056b3;
   }
   QLineEdit {
       border: 1px solid #ccc;
       border-radius: 3px;
       padding: 5px;
   }

4. 点击 "OK" 应用样式。

6 保存 .ui 文件

点击 文件 -> 保存，将文件命名为 login_dialog.ui 并保存到你的项目目录中。

第四部分：在 C++ 代码中使用 .ui 文件

我们将在 C++ 程序中加载并使用这个设计好的界面。

1 方法一：使用 uic 工具（推荐）

这是最常用、最简单的方法，它将 .ui 文件直接编译成 C++ 头文件（.h）。

1. 编译 .ui 文件： 打开命令行，进入你的项目目录,运行以下命令：

   # 将 login_dialog.ui 编译成 ui_login_dialog.h
   uic login_dialog.ui -o ui_login_dialog.h

   现在你的项目中会多出一个 ui_login_dialog.h 文件。

2. 编写 C++ 代码： 创建一个 main.cpp 文件,内容如下：

   #include <QApplication>
   #include <QDialog>
   #include "ui_login_dialog.h" // 包含编译后的 UI 头文件
   int main(int argc, char *argv[])
   {
       QApplication app(argc, argv);
       // 创建一个 QDialog 对象
       QDialog dialog;
       // 创建一个 Ui::LoginDialog 对象
       Ui::LoginDialog ui;
       // 使用 setupUi 函数将 UI 设置到 dialog 对象上
       ui.setupUi(&dialog);
       // 现在你可以通过 ui 对象访问控件了
       // 将登录按钮的文本改为 "登录"
       ui.btnLogin->setText("登录");
       // 显示对话框
       dialog.exec();
       return app.exec();
   }

3. 编译和运行： 确保你的 CMakeLists.txt 或 .pro 文件正确配置了 Qt 模块，然后编译并运行程序,你就能看到设计好的登录窗口了。

2 方法二：使用 QUiLoader 类（动态加载）

这种方法不需要预先编译 .ui 文件，而是在运行时动态加载,更加灵活。

#include <QApplication>
#include <QDialog>
#include <QUiLoader> // 包含 QUiLoader
#include <QFile>     // 包含 QFile
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QUiLoader loader;
    // 打开 .ui 文件
    QFile file(":/login_dialog.ui"); // 假设将 ui 文件作为资源文件
    // 或者 QFile file("login_dialog.ui"); // 从文件系统加载
    if (file.open(QIODevice::ReadOnly)) {
        // 使用 loader 加载 UI 文件
        QDialog *dialog = loader.load(&file);
        if (dialog) {
            dialog->show(); // 直接显示，不需要 exec()
        }
        file.close();
    }
    return app.exec();
}

这种方法需要将 .ui 文件作为资源文件添加到项目中,或者在运行时提供正确的路径。

第五部分：进阶技巧

1 伙伴编辑器

伙伴编辑器用于为标签和输入框建立关联，这样当用户按下 Alt + 标签文本中的字母时,焦点会自动跳转到对应的输入框。

1. 选中一个标签（如 labelUsername）。
2. 在 Property Editor 中找到 buddy 属性。
3. 点击右侧的下拉箭头，选择它对应的输入框（lineEditUsername）。
4. 修改标签的 text 属性，&User Name，这样 U 字母下划线，按 Alt+U 就能聚焦到输入框。

2 样式表

样式表是 Qt 的 CSS 实现，功能强大，除了简单的背景色和字体,你还可以：

• 设置图片背景：background-image: url(:/images/my_image.png);
• 为不同状态的控件设置不同样式：QPushButton:pressed { background-color: red; }
• 设置边框、阴影等复杂效果。

3 自定义控件

如果你有自定义的 QWidget 子类，你也可以将它集成到 Qt Designer 中，这样就可以像使用标准控件一样拖放它，这需要实现一些特定的接口，并生成一个 .plugins 文件。

4 信号与槽

虽然 Qt Designer 主要用于设计静态界面,但它也支持预览信号和槽的连接。

1. 进入 编辑 -> 编辑信号/槽 模式。
2. 从一个控件（如按钮）拖动到另一个控件或窗体本身。
3. 在弹出的对话框中选择一个信号（如 clicked()）和一个槽（如 close()），点击 "OK"。
4. 这个连接会被保存到 .ui 文件中，并在运行时自动建立,这对于快速原型验证非常有用。

第六部分：总结与资源

Qt Designer 是 Qt 开发中不可或缺的工具，通过它,你可以：

1. 快速创建美观且响应式的用户界面。
2. 分离关注点，让 UI 设计和逻辑代码清晰分离。
3. 利用布局系统,轻松实现跨平台的自适应界面。

掌握 Qt Designer 是迈向高效 Qt 开发的第一步。

推荐资源

• 官方文档：Qt Assistant（随 Qt 安装）中的 "Qt Designer Manual" 是最权威的参考资料。
• Qt 官方示例：Qt Creator 自带了许多使用 Qt Designer 的示例,非常值得学习。
• 视频教程：在 Bilibili、YouTube 等平台搜索 "Qt Designer",可以找到大量中文和英文的视频教程。
• 社区：在 Stack Overflow、Qt 中文论坛等社区提问,可以获得快速的帮助。

希望这份详细的教程能帮助你顺利上手 Qt Designer！