当前位置： 首页 > news >正文

常用控件的使用

news 来源：原创 2025/6/28 7:48:30

目录

1.Layouts

2.Spacers

3.Buttons

3.1Push Button

3.2Tool Button

3.3Radio Button

3.4Check Box

监听状态

4.Item Widgets

4.1List Widget

4.1.1利用listWidget写诗（1）

4.1.2利用listWidget写诗（2）

完整代码：

4.2Tree Widget

4.2.1设置水平头

4.2.2加载顶层的节点

4.2.3追加子节点

完整代码：

4.3Table Widget

4.3.1设置列数

4.3.2设置水平表头

4.3.3设置行数

4.3.4设置正文

完整代码：

5.其他常用控件

5.1Scroll Area

5.2Tool Box

5.2.1重命名

5.2.2增加页

5.2.3增加内容

5.3Tab Widget

5.3.1重命名

5.3.2增加页

5.4Stacked Widget

换页

设置默认页

5.5ComboBox

5.6Label

1.Layouts

布局，分为垂直布局，水平布局，栅格布局，表单布局，可以直接将要布局的一些组件拖拽到里面，便可以自动完成布局

但是一般我们不使用这种方法，我们会使用widget，将要布局的组件拖拽到widget里面再进行布局，更加灵活。

2.Spacers

弹簧，分为水平弹簧和垂直弹簧，用于调整各个组件之间的间隔以及组件与上下、左右窗口之间的距离。

例如：将两个PushButton放到widget中进行水平布局，再将两个Horizontal Spacer放到两边，再对整个窗口进行水平布局

这样，无论对窗口进行怎样的缩放，都可以让按钮位于窗口的中部

3.Buttons

3.1Push Button

常规按钮，通常用于触发信号使之连接对应的槽函数

代码实现信号和槽的初步认识-CSDN博客

ui界面实现：直接右击按钮，选择转到槽，选择对应的信号数，即可自动生成相应的槽函数。

3.2Tool Button

工具按钮，主要用于显示图片

首先需要添加资源：Qt添加资源文件-CSDN博客

添加完成之后，在右下角找到icon-选择资源-选择你需要的图片即可

可以通过iconSize来调整大小

可在text里面增加文本

当修改完后，发现按钮内并没有文本，这时需要调整toolButtonStyle，将其调整为ToolButtonTextBesideIcon即可

设置背景透明，当鼠标悬停在上面又有一个按钮的形状，直接勾选autoRaise

3.3Radio Button

允许用户在一个选项组中选择唯一的一个选项

想要实现选择多个便要借助GroupBox来进行分组，分别放入GroupBox中再进行垂直布局

我们发现运行结果没有默认值

想要设置默认值还是得用代码实现，设置单选按钮 男默认选中，先将性别里面的“男”的名字修改一下，方便写代码

代码：

ui->rBtnMan->setChecked(true);

实现选择女后，打印信息

connect(ui->rBtnWoman,&QRadioButton::clicked,[=]()
  {
      qDebug()<<"选中了女";
});

3.4Check Box

允许用户从多个选项中选择一个或多个选项。

和radio Button一样要放在Group Box中，只是radio Button是单选，Check Box可以多选

监听状态

为了更方便知道用户选了什么，可以将其状态打印出来

例如：想看用户是否选中了“干净卫生”

    connect(ui->cBox,&QCheckBox::stateChanged,[=](int state)
            {
        qDebug()<<state;
    });

即2是表示选中了，0是表示未选中，至于为什么是2表示选中了而不是1呢

将tristate勾选上，再次运行

我们发现0对应的是不选，1对应的是半选，2对应的是选择

4.Item Widgets

4.1List Widget

用于显示列表的控件。 它可以在窗口中显示一个可滚动的列表，并且每个列表项都可以是一个文本项、图像项或自定义项。 QListWidget可以用于显示一组文本项，用户可以选择列表中的一项或多项。 它还可以用于显示一组图像项，用户可以通过点击图像项进行选择或执行其他操作。 用户还可以使用自定义项在列表中显示自定义的内容。

4.1.1利用listWidget写诗（1）

写完后放入到list Widget控件中

QListWidgetItem * item=new QListWidgetItem("锄禾日当午");
ui->listWidget->addItem(item);

设置水平居中

item->setTextAlignment(Qt::AlignHCenter);

4.1.2利用listWidget写诗（2）

代码：

QStringList list;
list<<"锄禾日当午"<<"汗滴禾下土"<<"谁知盘中餐"<<"粒粒皆辛苦";
ui->listWidget->addItems(list);

但是该种方法不能设置水平居中，可以利用for循环设置

完整代码：
#include "widget.h"
#include "ui_widget.h"
#include"QDebug"
#include"QListWidget"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    //设置单选按钮 男默认选中
    ui->rBtnMan->setChecked(true);

    //选择女后，打印信息
    connect(ui->rBtnWoman,&QRadioButton::clicked,[=]()
            {
        qDebug()<<"选中了女";
    });

    //多选按钮
    connect(ui->cBox,&QCheckBox::stateChanged,[=](int state)
            {
        qDebug()<<state;
    });

    //利用listWidget写诗
    // QListWidgetItem * item=new QListWidgetItem("锄禾日当午");
    // //将一行诗放入到list Widget控件中
    // ui->listWidget->addItem(item);
    // item->setTextAlignment(Qt::AlignHCenter);

    //QStringList  QList<QString>
    QStringList list;
    list<<"锄禾日当午"<<"汗滴禾下土"<<"谁知盘中餐"<<"粒粒皆辛苦";
    ui->listWidget->addItems(list);
}

Widget::~Widget()
{
    delete ui;
}

4.2Tree Widget

树控件，用于以树状结构显示数据。它在Windows系统中非常常见，例如资源管理器左侧的目录视图。树形控件的节点通常由标签和图标组成，能够清晰地展示数据的层次关系

在ui界面拖拽一个Tree Widget，再对整个窗口进行水平布局，这样就布满整个窗口了

4.2.1设置水平头

代码：

ui->treeWidget->setHeaderLabels(QStringList()<<"英雄"<<"英雄介绍");

4.2.2加载顶层的节点

代码：

    QTreeWidgetItem * liItem=new QTreeWidgetItem(QStringList()<<"力量");
    QTreeWidgetItem * minItem=new QTreeWidgetItem(QStringList()<<"敏捷");
    QTreeWidgetItem * zhiItem=new QTreeWidgetItem(QStringList()<<"智力");


    //加载顶层的节点
    ui->treeWidget->addTopLevelItem(liItem);
    ui->treeWidget->addTopLevelItem(minItem);
    ui->treeWidget->addTopLevelItem(zhiItem);

4.2.3追加子节点

代码：

    QStringList heroL1;
    heroL1<<"钢背猪"<<"前排坦克，能在吸收伤害的同时造成可观的范围输出";
    QTreeWidgetItem * l1=new QTreeWidgetItem(heroL1);
    liItem->addChild(l1);

完整代码：
#include "widget.h"
#include "ui_widget.h"


Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    //treeWidget树控件使用

    //设置水平头
    ui->treeWidget->setHeaderLabels(QStringList()<<"英雄"<<"英雄介绍");

    QTreeWidgetItem * liItem=new QTreeWidgetItem(QStringList()<<"力量");
    QTreeWidgetItem * minItem=new QTreeWidgetItem(QStringList()<<"敏捷");
    QTreeWidgetItem * zhiItem=new QTreeWidgetItem(QStringList()<<"智力");


    //加载顶层的节点
    ui->treeWidget->addTopLevelItem(liItem);
    ui->treeWidget->addTopLevelItem(minItem);
    ui->treeWidget->addTopLevelItem(zhiItem);

    //追加子节点
    QStringList heroL1;
    heroL1<<"钢背猪"<<"前排坦克，能在吸收伤害的同时造成可观的范围输出";
    QTreeWidgetItem * l1=new QTreeWidgetItem(heroL1);
    liItem->addChild(l1);

}

Widget::~Widget()
{
    delete ui;
}

4.3Table Widget

表格控件，类似于我们经常使用的 Excel 表格，可以将数据以表格的方式展示给用户。 整个 QTableWidget 表格可以分为 3 个区域： 区域 ① 和 ② 都是表头，区域 ① 设置每一行的表头，区域 ② 设置每一列的表头。

先在ui界面拖出这个控件

4.3.1设置列数

代码：

ui->tableWidget->setColumnCount(3);

4.3.2设置水平表头

代码：

ui->tableWidget->setHorizontalHeaderLabels(QStringList()<<"姓名"<<"性别"<<"年龄");

4.3.3设置行数

代码：

ui->tableWidget->setRowCount(5);

4.3.4设置正文

代码：

ui->tableWidget->setItem(0,0,new QTableWidgetItem("张三"));

用for循环填满表格

代码：

    QStringList nameList;
    nameList<<"张三"<<"李四"<<"王五"<<"赵二"<<"钱一";
    QList<QString>sexList;
    sexList<<"男"<<"男"<<"男"<<"男"<<"女";

    for(int i=0;i<5;i++)
    {
        int col=0;
        ui->tableWidget->setItem(i,col++,new QTableWidgetItem(nameList[i]));
        ui->tableWidget->setItem(i,col++,new QTableWidgetItem(sexList[i]));
        //int转QString
        ui->tableWidget->setItem(i,col++,new QTableWidgetItem(QString::number(i+18)));
    }

完整代码：
#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
    : QWidget(parent)
    , ui(new Ui::Widget)
{
    ui->setupUi(this);

    //TableWidget控件
    //设置列数
    ui->tableWidget->setColumnCount(3);

    //设置水平表头
    ui->tableWidget->setHorizontalHeaderLabels(QStringList()<<"姓名"<<"性别"<<"年龄");

    //设置行数
    ui->tableWidget->setRowCount(5);

    //设置正文
    // ui->tableWidget->setItem(0,0,new QTableWidgetItem("张三"));

    QStringList nameList;
    nameList<<"张三"<<"李四"<<"王五"<<"赵二"<<"钱一";
    QList<QString>sexList;
    sexList<<"男"<<"男"<<"男"<<"男"<<"女";

    for(int i=0;i<5;i++)
    {
        int col=0;
        ui->tableWidget->setItem(i,col++,new QTableWidgetItem(nameList[i]));
        ui->tableWidget->setItem(i,col++,new QTableWidgetItem(sexList[i]));
        //int转QString
        ui->tableWidget->setItem(i,col++,new QTableWidgetItem(QString::number(i+18)));
    }
}

Widget::~Widget()
{
    delete ui;
}

5.其他常用控件

5.1Scroll Area

滚动区域

例如：在里面放入很多的Push Button，再对他们进行垂直布局

5.2Tool Box

5.2.1重命名

在属性编辑器中找currentItem Text

5.2.2增加页

5.2.3增加内容

点击你想增加内容的页，将要增加的内容拖进去

5.3Tab Widget

网页

5.3.1重命名

5.3.2增加页

5.4Stacked Widget

栈控件，可以将其他页加进去

插入页

发现运行出来的界面并没有切换页面的按钮，所以得自己添加Push Button来实现

换页

增加按钮并重命名（Text），再修改objectName，方便后续调用

代码：

    //栈控件使用
    //scroll Area按钮
    connect(ui->btn_scrollArea,&QPushButton::clicked,[=](){
        ui->stackedWidget->setCurrentIndex(0);
    });

    //toolBox按钮
    connect(ui->btn_toolBox,&QPushButton::clicked,[=](){
        ui->stackedWidget->setCurrentIndex(1);
    });

    //TabWidget按钮
    connect(ui->btn_tabWidget,&QPushButton::clicked,[=](){
        ui->stackedWidget->setCurrentIndex(2);
    });

设置默认页

ui->stackedWidget->setCurrentIndex(0);

这样无论运行前ui界面在哪一页，运行界面默认都在scrollArea那个界面

5.5ComboBox

下拉框

代码：

    ui->comboBox->addItem("奔驰");
    ui->comboBox->addItem("宝马");
    ui->comboBox->addItem("奥迪");

实现：点击按钮，选中奥迪

代码：

    connect(ui->btn_select,&QPushButton::clicked,[=](){
        //ui->comboBox->setCurrentIndex(2);//方法一
        ui->comboBox->setCurrentText("奥迪");//方法二
    });

5.6Label

利用QLabel显示图片，首先要添加资源文件，然后将Image文件粘贴到当前文件夹中

相关文章：

  • Idea将Java工程打包成war包并发布
  • mysql-INNODB_FT_INDEX_TABLE表中的 first_doc_id 和、last_doc_id 和doc_id
  • 软考（软件设计师）之操作系统
  • GRBL运动控制算法（四）加减速运算
  • JAVA接口和继承
  • AI-人工智能-多模态药物识别AI新算法GSFM，为精准药物表征装上“智慧眼”
  • 深入探索 `malloc`：内存分配失败的原因及正确使用规范
  • C语言：32位数据转换为floaf解析
  • RHCSA Linux 系统 文件的查看、复制、移动、重命名、编辑文件
  • GPT-5、o3和o4-mini即将到来
  • PCI认证 密钥注入 ECC算法工具 NID_secp521r1 国密算法 openssl 全套证书生成，从证书提取公私钥数组 x,y等
  • WinForm真入门(11)——ComboBox控件详解
  • 996引擎-源码学习：Cocos2d-Lua 的 class(classname, ...)
  • 2025 年河北交安安全员考试：巧用行业报告丰富知识储备​
  • 信息安全测评中心-国产化！
  • vi/vim常用快捷键
  • 【KWDB 创作者计划】架构设计与AIoT场景实践
  • micro介绍
  • 算法中Hash备胎——LRU的设计与实现
  • Spring Boot 配置文件加载优先级全解析