Qt Creator控件及其用途详细总结

发布于:2025-07-11 ⋅ 阅读:(24) ⋅ 点赞:(0)

Qt Creator控件及其用途详细总结


控件功能总结表

控件名称 类别 主要用途 典型场景
QLabel 显示控件 显示文本/图片(支持富文本) 标题、状态提示、图片展示
QLineEdit 输入控件 单行文本输入/编辑(支持密码掩码) 用户名、密码框、搜索栏
QTextBrowser 显示控件 显示富文本/超链接(支持HTML,只读 帮助文档、日志显示
QCheckBox 选择控件 二值选项(勾选/未勾选) 设置开关、多选项选择
QComboBox 选择控件 下拉列表选择(支持可编辑) 分类筛选、枚举值选择
QPainter 绘图工具 2D绘图引擎(非控件,需在paintEvent中使用) 自定义图形绘制、图表生成
QPushButton 交互控件 触发操作(支持图标) 确认/取消按钮、工具栏
QRadioButton 选择控件 单选按钮(组内互斥) 单选设置(如主题选择)
QSpinBox 输入控件 整数输入(带增减箭头) 年龄、数量设置
QDoubleSpinBox 输入控件 浮点数输入 价格、百分比设置
QSlider 输入控件 滑块调节数值(水平/垂直) 音量控制、亮度调节
QProgressBar 显示控件 进度条显示 文件下载、任务进度
QTextEdit 输入/显示控件 多行富文本编辑 聊天输入框、文本编辑器
QListWidget 容器控件 列表项管理(支持图标) 文件列表、播放列表
QTreeWidget 容器控件 树形结构数据展示 文件目录、组织结构
QTableWidget 容器控件 表格数据展示/编辑 数据报表、Excel式界面
QTabWidget 容器控件 多页面标签切换 设置分页、多文档界面
QGraphicsView 绘图容器 复杂2D图形场景容器(需搭配QGraphicsScene) 流程图、CAD绘图
QOpenGLWidget 绘图容器 OpenGL渲染窗口 3D图形渲染、游戏界面
QDateEdit 输入控件 日期选择 生日、日程设置
QToolButton 交互控件 工具栏按钮(支持菜单) 绘图工具、格式工具栏
QSplitter 布局控件 可调节的分割区域 资源管理器式界面

详细说明

  1. QLabel
    • 最基础的显示控件,可设置文字对齐、自动换行(wordWrap属性)。
    • 支持通过setPixmap()显示图片。
  2. QLineEdit
    • 支持输入掩码(如电话号码格式)、正则验证(QValidator)。
    • 常用信号:textChanged()(实时响应输入)、returnPressed()(回车触发)。
  3. QTextBrowser
    • 继承自QTextEdit,但默认只读。
    • 支持锚点跳转(anchorClicked()信号)和资源加载(本地/网络)。
  4. QCheckBox
    • 三态模式:setTristate(true)启用(选中/未选中/部分选中)。
    • 状态获取:isChecked()返回布尔值。
  5. QComboBox
    • 动态数据:通过addItem()添加选项,currentIndex()获取选择。
    • 可编辑模式:setEditable(true)允许用户输入自定义值。

QLabel - 文本/图片标签

QLabel *label = new QLabel("状态:就绪", this);  // 创建文本标签
label->setPixmap(QPixmap("icon.png"));          // 设置图片
label->setAlignment(Qt::AlignCenter);           // 居中对齐
// 用途:状态栏提示、图片展示

QLineEdit - 单行文本输入框

QLineEdit *edit = new QLineEdit(this);
edit->setPlaceholderText("输入用户名");         // 提示文本
edit->setEchoMode(QLineEdit::Password);         // 密码模式
connect(edit, &QLineEdit::returnPressed, []{   // 回车事件
    qDebug() << "输入内容:" << edit->text();
});

QTextBrowser - 富文本显示器

QTextBrowser *browser = new QTextBrowser(this);
browser->setHtml("<h1>帮助文档</h1><p>点击<a href='https://qt.io'>这里</a>访问官网</p>");
connect(browser, &QTextBrowser::anchorClicked, [](const QUrl &link){ 
    QDesktopServices::openUrl(link);  // 打开超链接
});
// 用途:日志显示/帮助系统

QCheckBox - 复选框

QCheckBox *checkbox = new QCheckBox("启用特效", this);
connect(checkbox, &QCheckBox::stateChanged, [](int state){
    bool enabled = (state == Qt::Checked);  // 获取勾选状态
    applyEffects(enabled);  // 应用设置
});

QComboBox - 下拉选择框

QComboBox *combo = new QComboBox(this);
combo->addItems({"红色", "绿色", "蓝色"});       // 添加选项
combo->setCurrentIndex(0);                      // 默认选中第一项
connect(combo, QOverload<int>::of(&QComboBox::currentIndexChanged), 
        [](int index){ setColor(index); });     // 选择变化时触发

QPainter - 2D绘图工具(非控件)

// 在自定义Widget的paintEvent中绘制
void MyWidget::paintEvent(QPaintEvent*) {
    QPainter painter(this);
    painter.setBrush(Qt::red);
    painter.drawEllipse(10, 10, 100, 100);  // 绘制红色圆形
    painter.drawText(50, 70, "Hello Qt");   // 绘制文本
}

QPushButton - 普通按钮

QPushButton *btn = new QPushButton("确定", this);
btn->setIcon(QIcon("ok.png"));                     // 带图标按钮
connect(btn, &QPushButton::clicked, []{            // 点击事件
    QMessageBox::information(nullptr, "提示", "操作已确认");
});

QRadioButton - 单选按钮

QButtonGroup *group = new QButtonGroup(this);  // 创建按钮组

QRadioButton *rb1 = new QRadioButton("选项1", this);
QRadioButton *rb2 = new QRadioButton("选项2", this);

group->addButton(rb1, 1);  // ID=1
group->addButton(rb2, 2);  // ID=2

connect(group, QOverload<int>::of(&QButtonGroup::buttonClicked), 
        [](int id){ selectOption(id); });  // 根据ID处理选择

QSpinBox - 整数输入框

QSpinBox *spinBox = new QSpinBox(this);
spinBox->setRange(0, 100);      // 值范围 0~100
spinBox->setValue(50);           // 默认值
spinBox->setPrefix("数量: ");    // 前缀文本
connect(spinBox, QOverload<int>::of(&QSpinBox::valueChanged), 
        [](int val){ updateCount(val); });

QDoubleSpinBox - 浮点数输入框

QDoubleSpinBox *dspin = new QDoubleSpinBox(this);
dspin->setRange(0.0, 1.0);        // 设置范围
dspin->setSingleStep(0.1);        // 步进值
dspin->setDecimals(2);            // 小数点位数
dspin->setSuffix(" 千克");        // 后缀文本

QSlider - 滑动条

QSlider *slider = new QSlider(Qt::Horizontal, this);
slider->setRange(0, 100);         // 水平滑块
connect(slider, &QSlider::valueChanged, 
        [](int val){ setVolume(val); });  // 音量控制

QProgressBar - 进度条

QProgressBar *progress = new QProgressBar(this);
progress->setRange(0, 100);
progress->setValue(75);                // 设置当前进度
progress->setTextVisible(true);         // 显示百分比文本
// 用途:文件下载进度显示

QTextEdit - 多行富文本编辑器

QTextEdit *textEdit = new QTextEdit(this);
textEdit->setHtml("<b>加粗文本</b><i>斜体文本</i>");  // 支持HTML
textEdit->append("新行内容");                        // 追加文本
// 用途:聊天窗口输入框

QListWidget - 列表控件

QListWidget *list = new QListWidget(this);
list->addItem("项目1");
list->addItem(new QListWidgetItem(QIcon("file.png"), "带图标项目"));
connect(list, &QListWidget::itemDoubleClicked,  // 双击事件
        [](QListWidgetItem *item){ openFile(item->text()); });

QTreeWidget - 树形控件

QTreeWidget *tree = new QTreeWidget(this);
tree->setHeaderLabels({"名称", "大小"});  // 设置列标题

QTreeWidgetItem *root = new QTreeWidgetItem({"文件夹"});
root->addChild(new QTreeWidgetItem({"文件.txt", "1.2MB"}));
tree->addTopLevelItem(root);  // 添加根节点

QTableWidget - 表格控件

QTableWidget *table = new QTableWidget(3, 2, this);  // 3行2列
table->setHorizontalHeaderLabels({"姓名", "年龄"});
table->setItem(0, 0, new QTableWidgetItem("张三"));
table->setItem(0, 1, new QTableWidgetItem("25"));
// 用途:数据表格展示

QTabWidget - 标签页容器

QTabWidget *tabs = new QTabWidget(this);
tabs->addTab(new QWidget, "基本信息");  // 添加标签页
tabs->addTab(new QWidget, "高级设置");
tabs->setCurrentIndex(0);  // 默认显示第一页

QGraphicsView - 图形视图框架

QGraphicsScene *scene = new QGraphicsScene;  // 创建场景
QGraphicsView *view = new QGraphicsView(scene, this); 

scene->addRect(QRectF(0, 0, 100, 50));      // 添加矩形
scene->addText("图形文字");                  // 添加文本
// 用途:流程图/绘图工具

QOpenGLWidget - OpenGL渲染窗口

class GLWidget : public QOpenGLWidget {
protected:
    void initializeGL() override { glClearColor(0,0,1,1); }  // 蓝色背景
    void paintGL() override {
        glBegin(GL_TRIANGLES);  // 绘制三角形
        glVertex2f(0,0); glVertex2f(1,0); glVertex2f(0.5,1);
        glEnd();
    }
};
// 在窗口中使用:setCentralWidget(new GLWidget);

QDateEdit - 日期选择器

QDateEdit *dateEdit = new QDateEdit(this);
dateEdit->setDate(QDate::currentDate());  // 默认今天
dateEdit->setCalendarPopup(true);         // 弹出日历
connect(dateEdit, &QDateEdit::dateChanged, 
        [](const QDate &date){ qDebug() << "选择日期:" << date; });

QToolButton - 工具栏按钮

QToolButton *toolBtn = new QToolButton(this);
toolBtn->setIcon(QIcon("brush.png"));  // 设置图标
toolBtn->setText("画笔");
toolBtn->setToolTip("绘图工具");        // 悬停提示

// 添加下拉菜单
QMenu *menu = new QMenu;
menu->addAction("铅笔");
menu->addAction("毛笔");
toolBtn->setMenu(menu);

QSplitter - 分割窗口

QSplitter *splitter = new QSplitter(Qt::Horizontal, this);  // 水平分割

QListView *listView = new QListView;
QTextEdit *textEdit = new QTextEdit;

splitter->addWidget(listView);  // 左侧列表
splitter->addWidget(textEdit);  // 右侧文本
splitter->setSizes({100, 300}); // 初始宽度比例
// 用途:资源管理器式界面

使用要点总结:

  1. 命名规范:控件指针变量名体现类型(如 btnSave, txtName
  2. 父子关系:创建时指定父对象(this)以自动管理内存
  3. 信号连接:使用Lambda简化槽函数(Qt5以上支持)
  4. 布局管理:结合QVBoxLayout等布局器自动排列控件
  5. 样式定制:使用setStyleSheet()进行CSS样式美化

完整项目需包含头文件如 #include <QPushButton> 并在.pro文件中添加 QT += widgets


扩展控件应用场景

  • QSlider 与 QSpinBox 联动
    绑定数值变化信号(valueChanged()),实现滑块与数字框同步更新。
  • QListWidget + QPushButton 组合
    实现列表项的增删(如任务管理应用)。
  • QTabWidget 嵌套
    创建多层级界面(如浏览器多标签页)。

💡 设计建议

  • 输入类控件(如QLineEdit)优先使用QValidator限制输入范围
  • 频繁更新的文本显示(如日志)推荐用QPlainTextEdit替代QLabel(性能更优)
  • 需要复杂数据绑定(如数据库)时,考虑Model/View架构控件(QTableView等)

网站公告

今日签到

点亮在社区的每一天
去签到