个人网站icp网页设计培训

Qt Creator自定义控件开发流程

---

在 Qt 5.9 Creator 中开发自定义控件的完整流程如下，分为设计、实现、集成和测试四个阶段：

1. 创建自定义控件类

(1) 新建类文件

• 右键项目 → 添加新文件 → C++ Class
• 基类选择 QWidget 或现有控件（如 QPushButton）
• 命名类名（如 CustomSlider），勾选 “Include QWidget”
• 生成头文件（customslider.h）和源文件（customslider.cpp）

(2) 实现控件功能

示例头文件 (customslider.h):

#include <QWidget>
#include <QSlider>
#include <QLabel>class CustomSlider : public QWidget {Q_OBJECT // 必须包含宏
public:explicit CustomSlider(QWidget *parent = nullptr);private:QSlider *slider;QLabel *label;void setupUI(); // 初始化UI
private slots:void updateLabel(int value); // 响应滑块变化
};

示例源文件 (customslider.cpp):

#include "customslider.h"CustomSlider::CustomSlider(QWidget *parent) : QWidget(parent) {setupUI();
}void CustomSlider::setupUI() {QVBoxLayout *layout = new QVBoxLayout(this);slider = new QSlider(Qt::Horizontal);label = new QLabel("0");layout->addWidget(slider);layout->addWidget(label);connect(slider, &QSlider::valueChanged, this, &CustomSlider::updateLabel);
}void CustomSlider::updateLabel(int value) {label->setText(QString::number(value));
}

---

2. 在 Designer 中集成自定义控件

(1) 提升为自定义控件

• 打开 .ui 文件（如 mainwindow.ui）
• 从 Widget Box 拖入一个 QWidget 容器
• 右键该容器 → “提升为…”
• 填写信息：
  • 提升的类名称: CustomSlider
  • 头文件: customslider.h
• 点击 “添加” → “提升”

(2) 调整控件属性

• 提升后可在 属性编辑器 中修改基础属性（如大小、名称）
• 自定义属性需在代码中通过 Q_PROPERTY 声明（进阶用法）

---

3. 在代码中使用自定义控件

(1) 直接代码创建

#include "mainwindow.h"
#include "customslider.h"MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent) {CustomSlider *slider = new CustomSlider(this);setCentralWidget(slider);
}

(2) 访问提升后的控件（通过 ui 指针）

// 在 MainWindow 类中使用
ui->customWidget->setMinimum(0); // 假设提升的对象名为 customWidget

---

4. 进阶：设计器插件（可选）

若需在 Designer Widget Box 中直接拖拽自定义控件：

(1) 创建插件项目

• 文件 → 新建项目 → Library → Qt Designer Custom Widget Plugin

• 填写插件信息（如 MyWidgetPlugin）

• 在生成的类中注册控件：

  QList<QDesignerCustomWidgetInterface*> MyWidgetPlugin::customWidgets() const {QList<QDesignerCustomWidgetInterface*> plugins;plugins << new CustomSliderInterface; // 实现接口类return plugins;
  }
  

(2) 构建并部署插件

• 编译生成 .dll (Windows) 或 .so (Linux)
• 将库文件放入 Qt Designer 插件目录：
  • Windows: Qt安装路径/plugins/designer
  • Linux: /usr/lib/qt5/plugins/designer

---

5. 测试与调试

1. 运行时测试:
   • 运行主程序，验证控件交互逻辑
   • 使用 qDebug() 输出调试信息
2. 设计模式验证:
   • 在 Qt Designer 中检查提升控件的布局适应性
   • 测试动态属性修改（如通过样式表）

---

注意事项

1. 内存管理:

   • 在自定义控件构造函数中设置父对象或使用布局自动管理

   • 重写 paintEvent 实现自定义绘制：

     void CustomSlider::paintEvent(QPaintEvent *event) {QPainter painter(this);// 自定义绘制代码
     }
     

2. 信号与槽:

   • 暴露内部控件的信号（如转发滑块信号）：

     // 在 CustomSlider 类中添加：
     signals:void valueChanged(int);
     // 在构造函数中连接：
     connect(slider, &QSlider::valueChanged, this, &CustomSlider::valueChanged);
     

3. 样式支持:

   • 使用 Q_PROPERTY 定义样式属性

   • 在 .qss 文件中为自定义控件设置样式：

     CustomSlider {background-color: #F0F0F0;
     }
     CustomSlider QSlider {height: 20px;
     }
     

---

完整流程图示

[创建类] → [实现功能] → [提升QWidget] → [设计器布局] → [代码集成] → [测试]