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 <QLabel>
    #include <QLineEdit>
    #include <QPushButton>

    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 <QLineEdit>
    #include <QPushButton>
    #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 <QGroupBox>
      #include <QLineEdit>
      #include <QPushButton>
      #include <QRadioButton>
      #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 <QGroupBox>
    #include <QLineEdit>
    #include <QPushButton>
    #include <QRadioButton>
    #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() {}
相关推荐
一勺-_-3 小时前
mermaid图片如何保存成svg格式
开发语言·javascript·ecmascript
Dargon2883 小时前
实例讲解Simulink的MATLAB Function模块
开发语言·matlab·simulink·mbd软件开发
charlie1145141913 小时前
现代C++嵌入式教程：C++98基础特性：从C到C++的演进（1）
c语言·开发语言·c++·笔记·学习·教程
历程里程碑4 小时前
C++ 18智能指针：告别内存泄漏的利器
开发语言·c++
刘某的Cloud4 小时前
列表、元组、字典、集合-组合数据类型
linux·开发语言·python
梁同学与Android4 小时前
Android ---【经验篇】ArrayList vs CopyOnWriteArrayList 核心区别，怎么选择？
android·java·开发语言
ss2735 小时前
从零实现线程池：自定义线程池的工作线程设计与实现
java·开发语言·jvm
石工记5 小时前
windows 10直接安装多个JDK
java·开发语言
热门推荐
01GitHub 镜像站点02UV安装并设置国内源03Linux下V2Ray安装配置指南04在VSCode配置Java开发环境的保姆级教程（适配各类AI编程IDE）05Labelme从安装到标注：零基础完整指南06BongoCat - 跨平台键盘猫动画工具07jdk21下载、安装（Windows、Linux、macOS）08安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）09CentOS的ISO镜像下载10NVIDIA显卡驱动、CUDA、cuDNN 和 TensorRT 版本匹配指南