QT之基础控件

一然明月2025-12-22 21:33

目录

[一、Qt 组件核心分类及常用组件详解](#一、Qt 组件核心分类及常用组件详解)

（一）基础输入输出控件（最常用）

[1. QLabel（标签控件）](#1. QLabel（标签控件）)

[2. QPushButton（按钮控件）](#2. QPushButton（按钮控件）)

[3. QLineEdit（单行文本输入框）](#3. QLineEdit（单行文本输入框）)

（二）布局控件（管理控件位置）

[1. QVBoxLayout（垂直布局）](#1. QVBoxLayout（垂直布局）)

[2. QHBoxLayout（水平布局）](#2. QHBoxLayout（水平布局）)

[3. QGridLayout（网格布局）](#3. QGridLayout（网格布局）)

[（三）容器控件（容纳多个控件 / 布局）](#（三）容器控件（容纳多个控件 / 布局）)

[1. QGroupBox（分组框）](#1. QGroupBox（分组框）)

[2. QTabWidget（标签页控件）](#2. QTabWidget（标签页控件）)

[二、复选按钮（QCheckBox）的分组（视觉 / 功能）](#二、复选按钮（QCheckBox）的分组（视觉 / 功能）)

[1. 视觉分组：QGroupBox（仅归类，不影响多选）](#1. 视觉分组：QGroupBox（仅归类，不影响多选）)

代码示例（兴趣爱好分组）：

一、Qt 组件核心分类及常用组件详解

ps:右键重构就可以自动添加头文件

（一）基础输入输出控件（最常用）

这类控件用于实现界面的基本信息展示和用户输入，是构建界面的基石。

1. QLabel（标签控件）

  • 核心作用：用于显示文本（普通文字、富文本）、图片、动画，也可作为其他控件的提示标签，不支持用户输入。

  • 关键属性 / 方法 ：

    • setText(const QString &text)：设置显示的文本内容（支持 HTML 富文本，如红色文字）。
    • setPixmap(const QPixmap &pixmap)：设置显示的图片。
    • setAlignment(Qt::Alignment align)：设置内容对齐方式（如Qt::AlignCenter居中、Qt::AlignLeft左对齐）。
    复制代码 
    #include "mainwindow.h"

#include <QLabel>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    this->setWindowTitle("QLabel实例");
    this->setFixedSize(600,600);

    //Lable
    QLabel *textLabel = new QLabel(this);
    textLabel->setText("普通文本");
    textLabel->setGeometry(20,20,200,50);
    textLabel->setAlignment(Qt::AlignCenter);
}

MainWindow::~MainWindow() {}
2. QPushButton（按钮控件）
  • 核心作用：触发用户交互事件（如点击按钮执行某个功能），是界面交互的核心控件。
  • 关键属性 / 方法 ：
    • setText(const QString &text)：设置按钮上显示的文字。
    • setEnabled(bool enabled)：设置按钮是否可用（false为灰色不可点击状态）。
    • clicked()：按钮被点击时发出的信号（Qt 核心的信号槽机制，用于关联点击后的执行逻辑）。
  • 简单使用示例：
复制代码 
    //QPushButton
    QPushButton *btn = new QPushButton("按钮",this);
    btn ->setGeometry(100,100,100,30);

    connect(btn,&QPushButton::clicked,[=](){
        textLabel->setText("按钮点击");
    });
3. QLineEdit（单行文本输入框）

  • 核心作用：接收用户输入的单行文本（如账号、密码、搜索关键词等）。

  • 关键属性 / 方法 ：

    • setText(const QString &text)：设置输入框默认文本。
    • text()：获取用户输入的文本内容（返回QString类型，可通过toStdString()转为 C++ 标准字符串）。
    • setPlaceholderText(const QString &text)：设置占位提示文本（输入框为空时显示，输入内容后消失）。
    • setEchoMode(QLineEdit::EchoMode mode)：设置文本显示模式（如QLineEdit::Password密码隐藏模式，显示为圆点 / 星号）。

  • 简单使用示例：

    #include "mainwindow.h"

    #include
    #include
    #include

    MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    {
    this->setWindowTitle("QLineEdit示例");
    this->resize(300, 200);

    复制代码 
      // 账号标签和输入框
  QLabel *accountLabel = new QLabel("账号：", this);
  accountLabel->setGeometry(50, 50, 50, 30);
  QLineEdit *accountEdit = new QLineEdit(this);
  accountEdit->setGeometry(100, 50, 150, 30);
  accountEdit->setPlaceholderText("请输入账号");

  // 密码标签和输入框
  QLabel *pwdLabel = new QLabel("密码：", this);
  pwdLabel->setGeometry(50, 100, 50, 30);
  QLineEdit *pwdEdit = new QLineEdit(this);
  pwdEdit->setGeometry(100, 100, 150, 30);
  pwdEdit->setPlaceholderText("请输入密码");
  pwdEdit->setEchoMode(QLineEdit::Password); // 密码隐藏模式

  // 确认按钮
  QPushButton *confirmBtn = new QPushButton("确认", this);
  confirmBtn->setGeometry(120, 150, 80, 30);

  // 点击按钮获取输入内容
  connect(confirmBtn, &QPushButton::clicked, [=]() {
      QString account = accountEdit->text();
      QString pwd = pwdEdit->text();
      qDebug() << "account:" << account; // 控制台输出账号
      qDebug() << "pwd:" << pwd;     // 控制台输出密码
  });

    }

    MainWindow::~MainWindow() {}

（二）布局控件（管理控件位置）

手动通过 setGeometry()设置控件位置和大小，在窗口缩放时会错乱，Qt 的布局控件可自动管理控件的排列和大小适配，核心有 3 种常用布局。

1. QVBoxLayout（垂直布局）
  • 核心作用 ：将控件按从上到下的垂直方向依次排列。
  • 关键方法 ：
    • addWidget(QWidget *widget)：向布局中添加控件。
    • addSpacing(int size)：添加固定间距。
    • setContentsMargins(int left, int top, int right, int bottom)：设置布局与父控件的边距。
  • 使用说明 ：布局控件需绑定到一个父容器（如QWidget），不能直接绑定到QMainWindow（需先设置QMainWindow的中心部件）。
2. QHBoxLayout（水平布局）
  • 核心作用 ：将控件按从左到右的水平方向依次排列。
  • 关键方法 ：与QVBoxLayout一致，仅排列方向不同。
3. QGridLayout（网格布局）

  • 核心作用 ：将控件按行和列的网格形式排列（类似 Excel 表格），灵活度最高。

  • 关键方法 ：

    • addWidget(QWidget *widget, int row, int col, int rowSpan, int colSpan)：添加控件到指定行、列，可设置跨行 / 跨列数（默认跨行跨列数为 1）。

  • 布局控件综合示例：

    #include "mainwindow.h"

    #include
    #include
    #include <qboxlayout.h>
    #include <qlabel.h>

    MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    {
    this->setWindowTitle("布局控件示例");
    this->resize(300, 200);

    复制代码 
      // 1. 创建中心部件（QMainWindow必须通过中心部件设置布局）
  QWidget *centralWidget = new QWidget(this);
  this->setCentralWidget(centralWidget);

  // 2. 创建控件
  QLabel *accountLabel = new QLabel("账号：");
  QLineEdit *accountEdit = new QLineEdit();
  accountEdit->setPlaceholderText("请输入账号");

  QLabel *pwdLabel = new QLabel("密码：");
  QLineEdit *pwdEdit = new QLineEdit();
  pwdEdit->setEchoMode(QLineEdit::Password);

  QPushButton *confirmBtn = new QPushButton("确认");
  QPushButton *cancelBtn = new QPushButton("取消");

  // 3. 创建水平布局（存放两个按钮）
  QHBoxLayout *btnLayout = new QHBoxLayout();
  btnLayout->addStretch(); // 添加伸缩空间（按钮右对齐）
  btnLayout->addWidget(confirmBtn);
  btnLayout->addSpacing(20); // 按钮之间间距
  btnLayout->addWidget(cancelBtn);
  btnLayout->addStretch();

  // 4. 创建水平布局（存放账号标签和输入框）
  QHBoxLayout *accountLayout = new QHBoxLayout();
  accountLayout->addWidget(accountLabel);
  accountLayout->addWidget(accountEdit);

  // 5. 创建水平布局（存放密码标签和输入框）
  QHBoxLayout *pwdLayout = new QHBoxLayout();
  pwdLayout->addWidget(pwdLabel);
  pwdLayout->addWidget(pwdEdit);

  // 6. 创建垂直布局（存放所有子布局和控件）
  QVBoxLayout *mainLayout = new QVBoxLayout(centralWidget);
  mainLayout->addLayout(accountLayout);
  mainLayout->addLayout(pwdLayout);
  mainLayout->addSpacing(30);
  mainLayout->addLayout(btnLayout);
  mainLayout->setContentsMargins(50, 30, 50, 30); // 布局边距

    }

    MainWindow::~MainWindow() {}

（三）容器控件（容纳多个控件 / 布局）

用于对界面进行分组管理，将相关控件归类，提升界面整洁度。

1. QGroupBox（分组框）
  • 核心作用：带标题的分组容器，可将相关控件包裹在一起，视觉上形成独立分组。
  • 关键方法 ：

    • setTitle(const QString &title)：设置分组框标题。

    • setLayout(QLayout *layout)：为分组框设置内部布局。

      #include "mainwindow.h"

      #include
      #include
      #include
      #include
      #include <qboxlayout.h>
      #include <qlabel.h>

      MainWindow::MainWindow(QWidget *parent)
      : QMainWindow(parent)
      {
      this->setWindowTitle("QGroupBox示例");
      this->resize(300, 200);

      复制代码 
      QWidget *centralWidget = new QWidget(this);
this->setCentralWidget(centralWidget);
QVBoxLayout *mainLayout = new QVBoxLayout(centralWidget);

// 创建分组框
QGroupBox *genderGroup = new QGroupBox("性别选择", this);
QVBoxLayout *genderLayout = new QVBoxLayout(genderGroup);

// 创建单选按钮
QRadioButton *maleBtn = new QRadioButton("男");
QRadioButton *femaleBtn = new QRadioButton("女");
maleBtn->setChecked(true); // 默认选中"男"

// 添加控件到分组框布局
genderLayout->addWidget(maleBtn);
genderLayout->addWidget(femaleBtn);

// 将分组框添加到主布局
mainLayout->addWidget(genderGroup);
mainLayout->setContentsMargins(50, 50, 50, 50);

      }

      MainWindow::~MainWindow() {}

2. QTabWidget（标签页控件）

  • 核心作用：通过标签页切换不同的界面内容，节省界面空间（如浏览器标签页、软件的多功能面板）。

  • 关键方法 ：

    • addTab(QWidget *page, const QString &label)：添加标签页，指定页面控件和标签文本。
    • setCurrentIndex(int index)：设置默认选中的标签页（索引从 0 开始）。

  • 使用示例：

    #include "mainwindow.h"

    #include
    #include
    #include
    #include
    #include <qboxlayout.h>
    #include <qlabel.h>

    MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    {
    this->setWindowTitle("QTabWidget示例");
    this->resize(300, 200);

    复制代码 
      QTabWidget *tabWidget = new QTabWidget(this);
  this->setCentralWidget(tabWidget);

  // 标签页1
  QWidget *tab1 = new QWidget();
  QVBoxLayout *tab1Layout = new QVBoxLayout(tab1);
  tab1Layout->addWidget(new QLabel("这是标签页1的内容"));
  tabWidget->addTab(tab1, "标签1");

  // 标签页2
  QWidget *tab2 = new QWidget();
  QVBoxLayout *tab2Layout = new QVBoxLayout(tab2);
  tab2Layout->addWidget(new QLabel("这是标签页2的内容"));
  tabWidget->addTab(tab2, "标签2");

  // 默认选中标签页1
  tabWidget->setCurrentIndex(0);

    }

    MainWindow::~MainWindow() {}

二、复选按钮（QCheckBox）的分组（视觉 / 功能）

复选按钮默认支持 "多选"，分组主要是视觉归类 ，或通过QButtonGroup实现 "组内互斥"（让复选框变成单选逻辑）。

1. 视觉分组：QGroupBox（仅归类，不影响多选）

用QGroupBox把相关复选框包起来，界面更整洁，但组内仍可多选（保持复选框的原生功能）。

代码示例（兴趣爱好分组）：
复制代码 
#include "mainwindow.h"


#include <QCheckBox>
#include <QGroupBox>
#include <QLineEdit>
#include <QPushButton>
#include <QRadioButton>
#include <qboxlayout.h>
#include <qlabel.h>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    this->setWindowTitle("复选按钮视觉分组");
    this->resize(300, 200);

    QWidget *centralWgt = new QWidget(this);
    this->setCentralWidget(centralWgt);
    QVBoxLayout *mainLayout = new QVBoxLayout(centralWgt);


    // 视觉分组：兴趣爱好（组内可多选）
    QGroupBox *hobbyGroup = new QGroupBox("兴趣爱好");
    QVBoxLayout *hobbyLayout = new QVBoxLayout(hobbyGroup);
    QCheckBox *readBtn = new QCheckBox("阅读");
    QCheckBox *sportBtn = new QCheckBox("运动");
    QCheckBox *codeBtn = new QCheckBox("编程");
    hobbyLayout->addWidget(readBtn);
    hobbyLayout->addWidget(sportBtn);
    hobbyLayout->addWidget(codeBtn);


    mainLayout->addWidget(hobbyGroup);
}

MainWindow::~MainWindow() {}
相关推荐
用户805533698033 天前
不止三件套：QObject 属性系统全关键字与运行时反射!
c++·qt
xcyxiner3 天前
DicomViewer (vcpkg Windows和ubuntu编译)7
qt
Quz8 天前
QML Hello World 入门示例
qt
xcyxiner11 天前
DicomViewer (dcmtk读取dcm文件)5
qt
xcyxiner11 天前
DicomViewer (后台线程处理文件)4
qt
xcyxiner12 天前
DicomViewer (添加模型类)3
qt
xcyxiner12 天前
DicomViewer (目录调整) 2
qt
xcyxiner12 天前
dcmtk vtk vtk-dicom(gdcm) 编译(debug) v2
qt
LDR00614 天前
Type-C 快充全面升级！LDR6601 赋能个人护理便携电机，重塑剃须刀 / 理发器新体验
c语言·开发语言
雪碧聊技术14 天前
Tree.js是什么？一文讲透
开发语言·javascript·ecmascript
热门推荐
012026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf022026年6月AI大模型全景报告：GPT-5.6、Claude Opus 4.8、Gemini 3.5，中美AI三足鼎立谁主沉浮？032026年6月AI行业全景：从百模大战到Agent元年，这30天发生了什么？04GitHub 镜像站点05Trae国际版与国内版深度测评：AI原生IDE的双生花06【AI】2026 年具身智能模型和世界模型总结07Claude Code、Codex、Cursor三分天下：2026年AI编程Agent生态全景剖析08飞书长连接_事件订阅（接收消息，审批任务状态变更）092026 AI 编程工具终极实战指南：Cursor vs Claude Code vs Copilot，开发者该怎么选？102026年AI架构实战：彻底解决OpenAI接口超时与封号，Python调用GPT-5.2/Sora2企业级架构详解（附源码+压测报告）