Qt C++界面设计的三种方式对比总结

一、实例需求说明

目标：创建用户登录窗口，包含：

1. 用户名/密码标签（QLabel）
2. 文本输入框（QLineEdit）
3. 密码输入框（QLineEdit with Password echo）
4. 记住密码复选框（QCheckBox）
5. 登录/取消按钮（QPushButton）
6. 水平/垂直布局管理

二、三种实现方式对比

三、具体实现

1. 使用Qt Designer（.ui文件）

步骤：

1. 在Qt Creator中创建LoginDialog.ui

2. 拖拽控件并设置属性：

<!-- LoginDialog.ui片段 -->
<widget class="QLineEdit" name="usernameEdit">
  <property name="geometry">
    <rect>
      <x>100</x>
      <y>50</y>
      <width>200</width>
      <height>25</height>
    </rect>
  </property>
  <property name="placeholderText">
    <string>输入用户名</string>
  </property>
</widget>

        3. 在C++中加载使用：

// LoginDialog.h
#include <QDialog>
#include "ui_LoginDialog.h"

class LoginDialog : public QDialog {
    Q_OBJECT
public:
    LoginDialog(QWidget *parent = nullptr) : QDialog(parent) {
        ui.setupUi(this); // 关键：加载UI文件
    }
private:
    Ui::LoginDialog ui; // 自动生成的UI类
};

2. 纯C++代码实现

// PureCodeLogin.h
#include <QWidget>
#include <QLineEdit>
#include <QPushButton>

class PureCodeLogin : public QWidget {
    Q_OBJECT
public:
    explicit PureCodeLogin(QWidget *parent = nullptr);
    
private:
    QLineEdit *usernameEdit;
    QLineEdit *passwordEdit;
    QCheckBox *rememberCheck;
    QPushButton *loginBtn;
};

// PureCodeLogin.cpp
PureCodeLogin::PureCodeLogin(QWidget *parent) : QWidget(parent) {
    // 创建控件
    usernameEdit = new QLineEdit(this);
    passwordEdit = new QLineEdit(this);
    passwordEdit->setEchoMode(QLineEdit::Password);
    
    rememberCheck = new QCheckBox("记住密码", this);
    loginBtn = new QPushButton("登录", this);
    
    // 布局管理
    QVBoxLayout *mainLayout = new QVBoxLayout;
    QFormLayout *formLayout = new QFormLayout;
    formLayout->addRow("用户名:", usernameEdit);
    formLayout->addRow("密码:", passwordEdit);
    
    mainLayout->addLayout(formLayout);
    mainLayout->addWidget(rememberCheck);
    mainLayout->addWidget(loginBtn);
    
    setLayout(mainLayout);
    resize(300, 200);
}

3. 混合模式实现

// HybridLogin.h
#include <QWidget>
#include "ui_HybridLogin.h" // 设计师生成的头文件

class HybridLogin : public QWidget, private Ui::HybridLoginBase {
    Q_OBJECT
public:
    explicit HybridLogin(QWidget *parent = nullptr) {
        setupUi(this); // 初始化UI
        
        // 动态添加控件
        QPushButton *cancelBtn = new QPushButton("取消", this);
        buttonLayout->addWidget(cancelBtn); // 使用设计师里的布局名
        
        // 信号槽连接
        connect(loginBtn, &QPushButton::clicked, 
                this, &HybridLogin::onLogin);
    }
    
private slots:
    void onLogin() {
        QString user = usernameEdit->text();
        // 业务逻辑...
    }
};

四、核心控件C++ API对照表

五、性能对比数据（Debug模式）

六、如何选择？

1. 优先纯代码的场景：

   • 需要高性能的嵌入式设备

   • 界面需要频繁动态更新

   • 团队有严格的代码规范要求

2. 推荐使用Designer的场景：

   • 快速原型开发

   • 简单静态对话框

   • UI设计师与开发分离的工作流

3. 混合模式最佳实践：

   // 在设计师中创建基础布局
   // 在代码中动态添加：
   QTabWidget *tab = new QTabWidget(this);
   ui.verticalLayout->insertWidget(0, tab); // 插入到设计师创建的布局中

七、完整项目结构示例

LoginExample/
├── DesignerApproach/
│   ├── LoginDialog.ui
│   ├── LoginDialog.h
│   └── LoginDialog.cpp
├── PureCodeApproach/
│   ├── PureLogin.h
│   └── PureLogin.cpp
└── HybridApproach/
    ├── HybridBase.ui
    ├── HybridLogin.h
    └── HybridLogin.cpp

八、注意事项

1. Qt版本兼容性：

   # 在.pro文件中需要添加：
   QT += widgets
   FORMS += LoginDialog.ui

2. 内存管理：

   // 纯代码示例中建议使用父对象管理：
   QPushButton *btn = new QPushButton(this); // 自动随父对象销毁

3. 信号槽连接推荐新语法：

   connect(ui.loginBtn, &QPushButton::clicked,
           this, &MyClass::handleLogin);