QT基本控件的使用

一.Layouts

1.Vertical Layout

添加头文件

#include <QHBoxLayout>

代码

#include "centermain.h"
#include <QHBoxLayout>
#include <QLabel>

CenterMain::CenterMain(QWidget *parent)
    : QWidget{parent}
{
   // 子部件
    QLabel *cenTip1 = new QLabel("排序1",this);
    QLabel *cenTip2 = new QLabel("排序2",this);
    QLabel *cenTip3 = new QLabel("排序3",this);

    //创建垂直布局
    QVBoxLayout *vLayout = new QVBoxLayout(this);

    //调整布局属性
    vLayout ->setSpacing(15);//设置子部件间距为15像素
    vLayout ->setContentsMargins(20,20,20,20);//设置布局内边距(上下左右都是20)
    vLayout->setAlignment(Qt::AlignCenter);//子部件垂直居中

    //将子部件添加到垂直布局
    vLayout->addWidget(cenTip1);
    vLayout->addWidget(cenTip2);
    vLayout->addWidget(cenTip3);
}

效果

2.Horizontal Layout

添加头文件

#include <QHBoxLayout>

代码

#include "centermain.h"
#include <QHBoxLayout>
#include <QLabel>

CenterMain::CenterMain(QWidget *parent)
    : QWidget{parent}
{
   // 子部件
    QLabel *cenTip1 = new QLabel("排序1",this);
    QLabel *cenTip2 = new QLabel("排序2",this);
    QLabel *cenTip3 = new QLabel("排序3",this);
    //创建水平布局
    QHBoxLayout *hLayout = new QHBoxLayout(this);
    hLayout ->setSpacing(15);//设置子部件间距为15像素
    hLayout ->setContentsMargins(20,20,20,20);//设置布局内边距(上下左右都是20)
    hLayout->setAlignment(Qt::AlignCenter);//子部件垂直居中

    //将子部件添加到垂直布局
    hLayout->addWidget(cenTip1);
    hLayout->addWidget(cenTip2);
    hLayout->addWidget(cenTip3);

}

效果

3.Grid Layout

添加头文件

#include <QGridLayout>

代码

#include "centermain.h"
#include <QGridLayout>
#include <QLabel>


CenterMain::CenterMain(QWidget *parent)
    : QWidget{parent}
{
   // 子部件
    QLabel *cenTip1 = new QLabel("排序1",this);
    QLabel *cenTip2 = new QLabel("排序2",this);
    QLabel *cenTip3 = new QLabel("排序3",this);
    //创建网格布局
    QGridLayout *gridLayout = new QGridLayout(this);

    gridLayout->setHorizontalSpacing(10);//列间距为10
    gridLayout->setVerticalSpacing(15);//行间距15
    gridLayout->setContentsMargins(30,30,30,30);//布局内间距 上下左右30
    gridLayout->setAlignment(Qt::AlignCenter);

    //添加子部件到布局
    gridLayout->addWidget(cenTip1,0,0);
    gridLayout->addWidget(cenTip2,0,1);
    gridLayout->addWidget(cenTip3,1,0);

}

效果

4.Form Layout

添加头文件

#include <QFormLayout>

代码

   //输入框
    QLineEdit *leName = new QLineEdit();
    QLineEdit *lePhone = new QLineEdit();

    //表单布局
    QFormLayout *formLayout = new QFormLayout(this);

    formLayout->addRow("姓名: ",leName);
    formLayout->addRow("电话: ",lePhone);

效果

二. Buttons

1.Push Button

添加头文件

#include <QPushButton>

代码

 // 1. 设置/获取按钮文本
    QPushButton *btn = new QPushButton(this);
    btn->setText("按钮文本"); // 设置文本
    QString text = btn->text(); // 获取当前文本

    // 2. 设置按钮大小（三种方式）
    btn->setFixedSize(200, 40); // 固定宽高（不可拉伸）
    btn->setFixedWidth(200); // 仅固定宽度
    btn->setFixedHeight(40); // 仅固定高度
    btn->resize(200, 40); // 设置初始大小（可跟随布局拉伸）

    btn->move(200,200);

    // 3. 鼠标悬浮提示
    btn->setToolTip("这是一个按钮");
    // 4. 启用/禁用按钮
    btn->setEnabled(true); // 启用（默认，可点击）

    // 5. 设置按钮扁平样式（无默认背景边框）
    btn->setFlat(true);

    // 常用信号绑定示例
    // 1. clicked信号（最常用，点击释放后触发，带是否被选中参数）
    QObject::connect(btn, &QPushButton::clicked, [=](bool checked) {
        qDebug() << "123" << checked;
    });

    // 2. pressed信号（按钮被按下时触发，未释放）
    QObject::connect(btn, &QPushButton::pressed, []() {
        qDebug() << "456";
    });

    // 3. released信号（按钮被释放时触发，无论是否在按钮内释放）
    QObject::connect(btn, &QPushButton::released, []() {
        qDebug() << "789";
    });

效果

2.Tool Button

添加头文件

#include <QToolButton>

代码

 //创建按钮
    QToolButton *toolButton = new QToolButton(this);

    toolButton->setIcon(QIcon(":/OIP-C.jpg"));
    toolButton->setText("设置按钮"); // 设置配套文本
    toolButton->setFixedSize(120, 48);
    toolButton->setToolTip("图标+文本工具按钮");
    // 设置工具按钮样式：图标在上，文本在下（多种样式可选）
    toolButton->setToolButtonStyle(Qt::ToolButtonTextUnderIcon);

    // 绑定类型1：仅图标按钮的点击信号（与QPushButton类似）
    QObject::connect(toolButton, &QToolButton::clicked, [=]() {
        QMessageBox::information(this, "提示", "工具按钮被点击！", QMessageBox::Ok);
    });

效果

3.Radio Button

添加头文件

#include <QRadioButton>

代码

    QRadioButton *rbMale = new QRadioButton("男",this);
    rbMale->move(200,400);
    QRadioButton *rbFemale = new QRadioButton("女",this);
    rbFemale->move(300,400);

    // 方式1：单个按钮绑定（适合需要单独处理的场景）
    QObject::connect(rbMale, &QRadioButton::toggled, [=](bool checked) {
        if (checked) { // 仅当选中时触发（取消选中时不处理）
            qDebug() << "man";
        }
    });

效果

4.Check Box

添加头文件

#include <QCheckBox>

代码

    QCheckBox *cbMusic = new QCheckBox("音乐",this);
    cbMusic->move(200,200);
    QCheckBox *cbReadubg = new QCheckBox("阅读",this);
    cbReadubg->move(200,300);
    QCheckBox *cbSports = new QCheckBox("运动",this);
    cbSports->move(200,400);

    QObject::connect(cbMusic, &QCheckBox::toggled, [=](bool checked) {
        if (checked) { // 仅当选中时触发（取消选中时不处理）
            qDebug() << "man";
        }
    });

效果

5.Command Link Button

添加头文件

#include <QCommandLinkButton>

代码

    QCommandLinkButton *btnGuide = new QCommandLinkButton(this);
    //设置主文本
    btnGuide ->setText("设置系统参数");
    //设置辅助文本
    btnGuide->setDescription("点击后进入系统配置界面");

    connect(btnGuide,&QCommandLinkButton::clicked,[=](){
        QMessageBox::information(this,"反馈","进入系统配置页面",QMessageBox::Ok);
    });

效果

6.Dialog Button Box

添加头文件

#include<QDialogButtonBox>

代码

//创建对话框
    QDialog * dlg = new QDialog(this);
    dlg->setWindowTitle("基础对话框");
    dlg->resize(350,200);

    //创建按钮
    QDialogButtonBox *btnBox = new QDialogButtonBox(
        QDialogButtonBox::Ok | QDialogButtonBox::Cancel,
        Qt::Horizontal,
        this
        );

    // 4. 绑定标准按钮的信号（无需单独绑定每个按钮，QDialogButtonBox 提供统一信号）
    // accepted 信号：点击 OK/Yes/Apply 等确认类按钮时触发
    QObject::connect(btnBox, &QDialogButtonBox::accepted, [&]() {
        QMessageBox::information(this, "提示", "保存成功！", QMessageBox::Ok);
       // dlg.accept(); // 关闭对话框，返回 QDialog::Accepted 结果
    });

    // rejected 信号：点击 Cancel/No/Close 等取消类按钮时触发
    QObject::connect(btnBox, &QDialogButtonBox::rejected, [&]() {
        QMessageBox::information(this, "提示", "已取消保存", QMessageBox::Ok);
       // dlg.reject(); // 关闭对话框，返回 QDialog::Rejected 结果
    });

效果

三.Item View

1.List View

添加头文件

#include<QListView>

代码

 this->setWindowTitle("QListView 基础纯文本列表");
    this->resize(400, 300);
    QVBoxLayout *vLayout = new QVBoxLayout(this);
    vLayout->setContentsMargins(20, 20, 20, 20);

    //1.创建模型
    QStringListModel *strModel = new QStringListModel(this);
    QStringList dataList = {"苹果","香蕉","橙子","葡萄","芒果"};
    strModel->setStringList(dataList);

    //2.创建ListView
    QListView *listView = new QListView(this);
    listView->setModel(strModel);

    vLayout->addWidget(listView);

    //绑定信号
    connect(listView,&QListView::doubleClicked,[=](const QModelIndex &index){
        // index：模型中数据的唯一索引，通过index获取对应数据
        QString text = strModel->data(index, Qt::DisplayRole).toString();
        QMessageBox::information(this, "提示", text, QMessageBox::Ok);
    });

效果

2.Tree View

添加头文件

#include<QTreeView>

代码

  //1.创建树形模型
    QStandardItemModel *treeModel = new QStandardItemModel(this);
    //设置树形表头
    treeModel->setHorizontalHeaderLabels({"商品分类目录"});
    //构建多级节点
    //一级节点
    QStandardItem *itemElectronics = new QStandardItem("电子产品");
    //二级节点
    QStandardItem *itemPhon = new QStandardItem("手机");
    QStandardItem *itemCompiter = new QStandardItem("电脑");
    itemElectronics->appendRows({itemPhon,itemCompiter});
    //三级目录
    QStandardItem *itemIPhone = new QStandardItem("苹果手机");
    QStandardItem *itemII = new QStandardItem("I手机");
    itemPhon->appendRows({itemIPhone,itemII});

    //添加数据
    treeModel->appendRow({itemElectronics});

    //创建QTreeView
    QTreeView *treeView = new QTreeView(this);
    treeView->setModel(treeModel);

效果

3.Table View

添加头文件

#include <QTableView>

代码

  //创建表格模型
    QStandardItemModel *tableModel = new QStandardItemModel(this);
    //设置行列数
    int rowCount = 4;
    int colCount = 3;
    tableModel->setRowCount(rowCount);
    tableModel->setColumnCount(colCount);

    //设置表头
    tableModel->setHorizontalHeaderLabels({"姓名","科目","成绩"});
    tableModel->setVerticalHeaderLabels({"第一条","第二条","第三条","第四条"});

    //填充数据
    QList<QList<QString>> tableData={
        {"张","数学","95"},
        {"李","数学","96"},
        {"王","数学","97"},
        {"阿","数学","98"}
        };
    for(int row =0; row<rowCount;row++){
        for(int col =0;col<colCount;col++){
            QStandardItem *item = new QStandardItem(tableData[row][col]);
            tableModel->setItem(row,col,item);
        }
    }
    //创建QTableView模型
    QTableView *tableView = new QTableView(this);
    tableView->setModel(tableModel);

效果

4.Column View

添加头文件

#include<QColumnView>

代码

// 1. 创建层级模型（与QTreeView完全一致，复用层级构建逻辑）
    QStandardItemModel *colModel = new QStandardItemModel(this);
    QStandardItem *rootItem = colModel->invisibleRootItem();

    // 构建多级分类数据（一级：电子产品/生活用品 → 二级：子分类 → 三级：具体商品）
    QStandardItem *itemElectronics = new QStandardItem("电子产品");
    QStandardItem *itemPhone = new QStandardItem("手机");
    QStandardItem *itemComputer = new QStandardItem("电脑");
    itemElectronics->appendRows({itemPhone, itemComputer});

    QStandardItem *itemIphone = new QStandardItem("苹果手机");
    QStandardItem *itemHuawei = new QStandardItem("I手机");
    itemPhone->appendRows({itemIphone, itemHuawei});

    QStandardItem *itemDaily = new QStandardItem("生活用品");
    QStandardItem *itemKitchen = new QStandardItem("厨具");
    QStandardItem *itemClothes = new QStandardItem("服饰");
    itemDaily->appendRows({itemKitchen, itemClothes});

    rootItem->appendRows({itemElectronics, itemDaily});

    //创建QColumnView
    QColumnView *columnV = new QColumnView(this);
    columnV->setModel(colModel);



    vLayout->addWidget(columnV);

效果

5.Undo View

可视化展示撤销历史记录

四.Containers

1.Group Box

添加头文件

#include<QGroupBox>

代码

// ========== 1. 创建QGroupBox实例 + 基础常用设置 ==========
    QGroupBox * m_groupBox = new QGroupBox(this);
    m_groupBox->setTitle("用户信息配置（常用设置演示）"); // 设置标题
    m_groupBox->setAlignment(Qt::AlignHCenter); // 标题水平居中
    m_groupBox->setFlat(false); // 显示边框（默认false，true隐藏边框）
    m_groupBox->setCheckable(true); // 启用折叠功能（标题前显示复选框）
    m_groupBox->setChecked(true); // 默认展开状态
    m_groupBox->setMinimumWidth(350); // 最小宽度，防止压缩
    m_groupBox->setMinimumHeight(220); // 最小高度
    m_groupBox->setEnabled(true); // 启用分组框（false整体灰化）
    // 样式表美化（常用：标题字体、边框颜色、内边距）
    m_groupBox->setStyleSheet(
        "QGroupBox { "
        "   font-size: 14px; "
        "   font-weight: bold; "
        "   color: #1f3a8a; "
        "   border: 2px solid #c3dafe; "
        "   border-radius: 8px; "
        "} "
        "QGroupBox::title { "
        "   subcontrol-origin: margin; "
        "   left: 20px; "
        "   padding: 0 10px 0 10px; "
        "   color: #1e40af; "
        "} "
        "QGroupBox:checked { "
        "   border-color: #60a5fa; "
        "} "
        );

效果

2.Scroll Area

添加头文件

#include<QScrollArea>

代码

  // ========== 1. 创建 QScrollArea 实例 + 所有常用设置 ==========
   QScrollArea *m_scrollArea = new QScrollArea(this);
    // 基础属性：设置窗口标题（仅作标识，可选）
    // 滚动条策略（核心常用设置）
    m_scrollArea->setHorizontalScrollBarPolicy(Qt::ScrollBarAsNeeded); // 水平滚动条：按需显示（内容超出时才出现）
    m_scrollArea->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOn);   // 垂直滚动条：始终显示（方便演示，也可设为AsNeeded）
    // 核心设置：允许滚动窗口（m_scrollWidget）随滚动区域调整大小
    m_scrollArea->setWidgetResizable(true);
    // 尺寸设置：防止滚动区域被压缩变形
    m_scrollArea->setMinimumWidth(400);
    m_scrollArea->setMinimumHeight(300);
    // 外观设置：是否显示边框（默认true，显示原生边框）
    m_scrollArea->setFrameShape(QFrame::StyledPanel); // 边框样式：StyledPanel（原生风格）
    m_scrollArea->setFrameShadow(QFrame::Sunken);     // 边框阴影：凹陷风格
    // 美化样式表（常用：滚动条样式、滚动区域边框、背景色）
    m_scrollArea->setStyleSheet(
        "QScrollArea { "
        "   border: 2px solid #e2e8f0; "
        "   border-radius: 8px; "
        "   background-color: #f8fafc; "
        "} "
        "QScrollBar:vertical { "
        "   background-color: #f1f5f9; "
        "   width: 12px; "
        "   margin: 0px 0px 0px 0px; "
        "} "
        "QScrollBar::handle:vertical { "
        "   background-color: #94a3b8; "
        "   border-radius: 6px; "
        "   min-height: 20px; "
        "} "
        "QScrollBar::handle:vertical:hover { "
        "   background-color: #64748b; "
        "} "
        "QScrollBar::add-line:vertical, QScrollBar::sub-line:vertical { "
        "   height: 0px; "
        "} "
        );

效果

3.Tool Box

添加头文件

#include<QToolBox>

代码

  // ========== 1. 创建QToolBox实例 + 核心常用设置 ==========
   QToolBox* m_toolBox = new QToolBox(this);
    // 基础尺寸设置：防止工具盒被压缩变形
    m_toolBox->setMinimumWidth(400);
    m_toolBox->setMinimumHeight(350);
    // 核心页面设置
    m_toolBox->setCurrentIndex(0); // 设置默认选中第0页（索引从0开始）
   // m_toolBox->setAlignment(Qt::AlignHCenter); // 标签文本水平居中（默认左对齐）
   // m_toolBox->setMaxVisibleItems(3); // 最大可见标签数（超出显示滚动条）
    m_toolBox->setFrameShape(QFrame::StyledPanel); // 边框样式：原生风格
    m_toolBox->setFrameShadow(QFrame::Sunken);     // 边框阴影：凹陷风格
    // 启用/禁用指定页面（示例：禁用第2页，后续可手动启用）
    // m_toolBox->setItemEnabled(2, false);
    // 美化样式表（常用：标签样式、选中页面、边框、滚动条）
    m_toolBox->setStyleSheet(
        "QToolBox { "
        "   border: 2px solid #e2e8f0; "
        "   border-radius: 8px; "
        "   background-color: #f8fafc; "
        "} "
        "QToolBox::tab { "
        "   font-size: 13px; "
        "   font-weight: 500; "
        "   color: #475569; "
        "   background-color: #f1f5f9; "
        "   padding: 8px 15px; "
        "   margin: 2px 0; "
        "   border-radius: 4px; "
        "} "
        "QToolBox::tab:selected { "
        "   color: #1e40af; "
        "   background-color: #c3dafe; "
        "   border-left: 3px solid #3b82f6; "
        "} "
        "QToolBox QScrollBar:vertical { "
        "   background-color: #f1f5f9; "
        "   width: 10px; "
        "} "
        "QToolBox QScrollBar::handle:vertical { "
        "   background-color: #94a3b8; "
        "   border-radius: 5px; "
        "} "
        );

效果

五.控件一句话总结

1、容器控件（Container Widgets）

用于承载、分组其他控件，管理界面布局：

• Group Box：将相关控件分组（比如 "用户信息" 组），支持折叠 / 展开，带标题和边框。
• Scroll Area：当内容超出可视区域时，自动添加滚动条，可滚动查看全部内容。
• Tool Box：折叠式面板（类似 "手风琴"），多个页面仅展开一个，节省界面空间。
• Tab Widget：标签页控件（比如 "首页 / 设置 / 关于"），点击标签切换不同页面内容。
• Stacked Widget：堆叠式页面（无标签），需手动通过按钮等切换页面（比 Tab Widget 更灵活）。
• Frame：轻量容器，用于简单分组 / 加边框（功能比 Group Box 基础）。
• Widget：最基础的容器控件，可承载任意子控件 / 布局，也作为其他控件的父对象。
• MDI Area：多文档界面容器，支持在一个窗口内打开多个子窗口（类似 Office 的多文档编辑）。
• Dock Widget：可浮动 / 停靠的窗口（比如软件侧边栏），支持拖拽、停靠到主窗口边缘。
• QAxWidget：用于嵌入 ActiveX 控件（比如在 Qt 中加载 Office 组件）。

2、输入控件（Input Widgets）

用于接收用户输入：

• Combo Box：下拉选择框，提供预设选项供用户选择。
• Font Combo Box：专用下拉框，仅用于选择字体。
• Line Edit：单行文本输入框（比如输入用户名、密码）。
• Text Edit：多行富文本输入框（支持格式，比如加粗、换行）。
• Plain Text Edit：多行纯文本输入框（无格式，比如写代码、日志）。
• Spin Box：整数数字输入框（支持上下箭头调整数值）。
• Double Spin Box：小数数字输入框（支持更高精度的数值调整）。
• Time Edit：时间输入控件（选择小时 / 分钟）。
• Date Edit：日期输入控件（选择年 / 月 / 日）。
• Date/Time Edit：日期 + 时间组合输入控件。
• Dial：表盘式旋钮控件（通过旋转调整数值，类似收音机调台）。
• Horizontal/Vertical Scroll Bar：水平 / 垂直滚动条（手动拖拽控制内容滚动）。
• Horizontal/Vertical Slider：水平 / 垂直滑块（拖拽调整数值，比如音量条）。
• Key Sequence Edit：快捷键输入控件（比如设置 "Ctrl+C" 这类操作）。

3.显示类控件（Display Widgets）

• **Label:**最基础的显示控件，用于展示文本、图片或图标，常作为界面的提示信息载体（如 "用户名：" 这类提示）。

• **Text Browser:**富文本展示控件，支持显示带格式的文本、超链接，还能加载本地 / 网络文档，相当于简易的内置浏览器。

• **Graphics View:**复杂图形展示容器，用于呈现 2D 图形、动画、大量自定义元素，支持缩放、平移等交互操作（适合复杂可视化场景）。

• **Calendar Widget:**日历展示与选择控件，提供日期可视化界面，支持用户选择具体日期（兼具显示与基础交互功能）。

• **LCD Number:**模拟 LCD 数字的显示控件，常用于展示数值（如计时器、计数器、设备状态数值），自带电子屏风格的视觉效果。

• **Progress Bar:**进度展示控件，用于呈现任务的完成进度（如下载进度、加载进度），支持设置进度值与状态提示。

• **Horizontal/Vertical Line:**界面分隔控件，通过水平 / 垂直线条划分界面区域，提升布局的层次感与区分度。

• **OpenGL Widget:**集成 OpenGL 渲染的控件，用于展示高性能的 3D 图形、复杂渲染效果（适合图形密集型场景）。

• **QQuickWidget:**用于在 Qt Widgets 界面中嵌入 Qt Quick（QML）界面，可实现更灵活、丰富的 UI 交互效果。