Qt布局和控件使用

小瑞的学习笔记

已于 2025-02-17 16:55:38 修改

阅读量1.3k

点赞数 3

分类专栏： qt 文章标签：其他 qt c++ c语言

于 2022-03-31 18:55:06 首次发布

本文链接：https://blog.youkuaiyun.com/m0_60529319/article/details/123719463

版权

qt 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了Qt框架中的UI元素，包括菜单栏、状态栏、工具栏和浮动窗口的使用，以及布局管理、空间间隔、按钮、项目视图、显示控件和输入部件等组件的创建和配置。此外，还讲解了各种布局如垂直布局、水平布局和网格布局的应用，以及如何通过添加和调整空间来优化界面设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ui

菜单栏，工具栏只能有一个
状态栏，浮动窗口可以有多个
可以有多个的add,只能有一个的set

菜单栏

第一种菜单返回的是QMenu* 菜单项返回的是QAction

	//菜单栏创建不需要放在对象树上，因为源码已经再对象树上了
	QMenuBar*bar=menuBar();
    this->setMenuBar(bar);
    //菜单
    QMenu * fileMenu=bar->addMenu("文件");
    QMenu * dealMenu=bar->addMenu("编辑");
    //菜单项
    QAction *action1=new QAction("新建");
    fileMenu->addSeparator();//添加分隔符
    QAction *action2=new QAction("打开");

第二种

 	QMenuBar*bar=menuBar();
    this->setMenuBar(bar);
    //菜单
    QMenu * fileMenu=bar->addMenu("文件");
    QMenu * dealMenu=bar->addMenu("编辑");
    //用容器加入菜单项
    QAction *action1=new QAction("新建");
    QAction *action2=new QAction("打开");
    QList<QAction*> list;
    list.append(action1);
    list.append(action2);
    fileMenu->addActions(list);

状态栏

//菜单栏创建不需要放在对象树上，因为源码已经再对象树上了
	QStatusBar * stBar = statusBar();
    //设置到窗口中
    this->setStatusBar(stBar);
    //放标签控件
    QLabel * label = new QLabel("提示的信息",this);
    stBar->addWidget(label);//左侧
 
    QLabel * label2 = new QLabel("右侧提示的信息",this);
    stBar->addPermanentWidget(label2);//右侧

工具栏

//工具栏可以有多个
QToolBar * toolBar = new QToolBar(this);
addToolBar(Qt::LeftToolBarArea,toolBar);
//后期设置允许左右停靠
toolBar->setAllowedAreas(Qt::LeftToolBarArea | Qt::RightToolBarArea);
//设置浮动
toolBar->setFloatable(false);
//设置移动
toolBar->setMovable(false);
//工具栏中可以设置内容
toolBar->addAction(action1);
//添加分割线
toolBar->addSeparator();
toolBar->addAction(actino2);



//工具栏中添加按钮（控件）所有控件都可以用addWidget加入
QPushButton * btn = new QPushButton("aa",this);
toolBar->addWidget(btn);

浮动窗口

QDockWidget * dockWidget = new QDockWidget("浮动",this);
//默认底部停靠
this->addDockWidget(Qt::BottomDockWidgetArea,dockWidget);

//设置后期停靠区域，只允许上下
dockWidget->setAllowedAreas(Qt::TopDockWidgetArea | Qt::BottomDockWidgetArea);

页面布局细节

默认窗口和控件之间有9间隙，可以调整layoutLeftMargin
菜单栏只能有一个，直接输入中文就行
菜单项输入的时候只能输入英文，然后再text中修改成中文并且生成的控件名为 action+输入的英文（第一个字母大写）
如果不想一个widget的框太大，可以设置sizePolicy的垂直策略，设为固定值（会根据Widget中控件的多少而变小）。

布局管理组(Layouts)

在这里插入图片描述
Vertical Layout：垂直布局（我替口）
QVBoxLayout：按照竖直方向从上到下布局；

Horizontal Layout：水平布局（好若然头）
QHBoxLayout：按照水平方向从左到右布局；

Grid Layout：网格布局（歌ruai的）
QGridLayout：在一个网格中进行布局

Form Layout：表单布局（佛母）

这 4 个为系统给我们提供的布局的控件，但是使用起来不是非常的灵活。

空间间隔组(Spaces)

在这里插入图片描述
Horizontal Spacer：水平间隔（好若然头）

Vertical Spacer：垂直间隔（我替口）

按钮组（Buttons)

在这里插入图片描述
Push Button：按钮
常用作按钮，少用于显示图片

//三个常用构造函数
QPushButton(QWidget *parent = Q_NULLPTR)
QPushButton(const QString &text, QWidget *parent = Q_NULLPTR)
QPushButton(const QIcon &icon, const QString &text, QWidget *parent = Q_NULLPTR)

ToolButton：工具按钮
工具按钮用于显示图片，如想显示文字和图片只需修改toolButtonStyle,突起风格autoRais,修改图片大小IconSize.
QPushButton和QToolButton的区别

Radio Button：单选按钮
1，设置默认单选项：ui->Btn->setChecked(true);
在这里插入图片描述

check Box：复选框
//多选按钮 2是选中 0是未选中 1是半选但是要把tristate勾上

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

在这里插入图片描述

Command Link Button：命令链接按钮

Dialog Button Box：对话框按钮盒

项目视图组(Item Views)（Model-Based)

在这里插入图片描述

List View：列表视图

Tree View：树形视图

Table View：表格式图

Column View：列视图

Undo View：撤消视图

项目控件组(Item Widgets)(Item-Based)

在这里插入图片描述

List Widget：列表控件

void addItem(const QString &label)

//往列表控件里面添加item（相当于一个字符串）
	QListWidgetItem*item=new QListWidgetItem("千里之行");
    ui->listWidget->addItem(item);
    //注意这里是让文本居中 所以用item
    item->setTextAlignment(Qt::AlignHCenter);

void addItems(const QStringlist & labels)

//往列表控件中连特添加items(多个字符串）
	QStringList list;
    list<<"千里之行"<<"始于足下";
    ui->listWidget->addItems(list);

void itemClicked(QListWidgetItem *item)

void addltem(QListWidgctltem *item)

//输出被点击的控件
connect（ui->listwidget，&QListwidget:：itemclicked，[=]（QListwidgetItem*item）{
qDebug（）<<item->text（）.toutf8（）.data（）；
//toutf8（）.data（）的作用是去除双/号

Tree Widget：树形控件
在这里插入图片描述
设置树的头信息
void setHeaderLabels(const QStringList & labels)

//treeWidget树控件的使用
//设置水平头
ui->treeWidget->setHeaderLabels(QStringList()<<"英雄"<<"英雄介绍");

设置顶层信息
void addTopLevelItem(QTreeWidgetItem *item）

//加载顶层的节点
QTreeWidgetItem * liItem = new QTreeWidgetItem(QStringList()<<"力量");
ui->treeWidget->addTopLevelItem(liItem);

添加子控件
void addChild(QTreeWidgetItem * child)

//追加子节点
QStringList heroL1;
heroL1<<"刚被猪"<<"前排坦克，能在吸收伤害的同时造成可观的范围输出";
QTreeWidgetItem * l1 = new QTreeWidgetItem(heroL1);
liItem->addChild(l1);
QStringList heroL2;
heroL2 << "船长" << "前排坦克，能肉能输出能控场的全能英雄";
QTreeWidgetItem * l2 = new QTreeWidgetItem(heroL2);
liItem->addChild(l2);

在这里插入图片描述

Table Widget：表格控件

#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(4);

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

    QStringList nameList;
    nameList<<"亚瑟"<<"赵云"<<"张飞"<<"关羽"<<"花木兰";
    //QList<QString>   等价于  QStringList
    QList<QString> sexList;
    sexList<<"男"<<"男"<<"男"<<"男"<<"女";
    for(int i=0;i<5;i++)
    {
        int col = 0;
        ui->tableWidget->setItem(i,col++,new QTableWidgetItem(nameList[i]));
        //也可以用中括号，越界直接挂了；用at越界会抛出异常
        ui->tableWidget->setItem(i,col++,new QTableWidgetItem(sexList.at(i)));
        //int 转 QString
        ui->tableWidget->setItem(i,col++,new QTableWidgetItem(QString::number(18)));
    }

}

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

显示控件组(Display Widgets)

在这里插入图片描述
Label：标签

Text Browser：文本浏览器

Graphics View：图形视图

Calendar Widget：日历

LCD Number：液晶数字

Progress Bar：进度条

ui->progressBar->setMaximum(100);//设置最大值
ui->progressBar->setMinimum(0);//设置最小值
ui->progressBar->setValue(num);//设置当前值

Horizontal Line：水平线

Vertical Line：垂直线

OpenGL Widget：OpenGL 工具

QQuickWidget：嵌入QML工具

容器组(Containers)

在这里插入图片描述

Group Box：组框
主要用于分组

Scroll Area：滚动区域
在这里插入图片描述

Tool Box：工具箱
在这里插入图片描述

Tab Widget：标签部件
在这里插入图片描述
Stacked Widget：堆叠部件

#include "widget.h"
#include "ui_widget.h"

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

    //栈控件使用

    //设置默认定位 scrollArea  1为序号
    ui->stackedWidget->setCurrentIndex(1);

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

    //toolbox 按钮
    connect(ui->btn_ToolBox,&QPushButton::clicked,[=]{
        ui->stackedWidget->setCurrentIndex(0);
    });

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


}

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

Frame：框架
Widget：小部件
在 widget 中的控件可以进行水平、垂直、栅格布局等操作，比较灵活。再布局的同时我们需要灵活运用弹簧的特性让我们的布局更加的美观

MDI Area：MDI区域

Dock Widget：停靠窗体部件

QAxWidget：封装Flash的ActiveX控件

输入部件组(Input Widget)

在这里插入图片描述

Combo Box：组合框
Font Combo Box：字体组合框
Line Edit：行编辑框
Text Edit：文本编辑框
1，setText:添加文本，但是会删除之前的wenb
2，append:添加文本，但是不会删除之前的文本

Plain Text Edit：纯文本编辑框
Spin Box：数字显示框（旋转盒）
Double Spin Box：Double 数字显示框
Time Edit：时间编辑
Date Edit：日期编辑
Date/Time Edit：日期/时间编辑
Dial：拨号
Horizontal Scroll Bar：水平滚动条
Vertical Scroll Bar：垂直滚动条
Horizontal Slider：水平滑块
Vertical Slider：垂直滑块
Key Sequence Edit：按键序列编辑框
在这里插入图片描述