Qt_布局管理器

news/2024/9/24 12:41:10/

目录

1、QVBoxLayout垂直布局

1.1 QVBoxLayout的使用

1.2 多个布局管理器 

2、QHBoxLayout水平布局 

2.1 QHBoxLayout的使用

2.2 嵌套的Layout 

3、QGridLayout网格布局 

3.1  QGridLayout的使用

3.2 设置控件大小比例 

4、QFormLayout 

4.1  QFormLayout的使用

5、QSpacerItem 

5.1 QSpacerItem的使用

结语 

前言：

        使用Qt时，在没有布局管理器（Layout）概念之前，在界面上创建控件都是用“绝对定位”来设置的，即调用setGeometry或move函数摆放，或者直接在ui文件中对控件进行手动的摆放，这些方式都会导致界面上的控件摆放存在偏差，影响整体美观。因此引入布局管理器机制，将界面上的控件都直接放到布局管理器下，布局管理器会自动对这些控件进行位置大小的调整，让整个界面看起来更加规整。

1、QVBoxLayout垂直布局

         QVBoxLayout表示垂直布局管理器，他也是一个控件，只不过该控件的作用是对内部的其他控件进行规整摆放。QVBoxLayout属性介绍如下：

layoutLeftMargin
左侧边距
layoutRightMargin
右侧边距
layoutTopMargin
上方边距
layoutBottomMargin
下方边距
layoutSpacing
相邻元素之间的间距

        与QVBoxLayout相关的常用接口：

addWidget（QWidget*）
把控件添加到布局管理器中
setLayout（QLayout*）是QWidget的接口，用于将布局管理器设置到widget下

1.1 QVBoxLayout的使用

        创建一个QVBoxLayout和三个按钮控件，将三个按钮控件放到该QVBoxLayout下，观察生成后的界面，代码如下：

#include "widget.h"
#include "ui_widget.h"
#include <QVBoxLayout>
#include <QPushButton>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);QVBoxLayout* qv = new QVBoxLayout();//创建垂直布局管理器//创建三个按钮QPushButton* qp1 = new QPushButton("按钮1");QPushButton* qp2 = new QPushButton("按钮2");QPushButton* qp3 = new QPushButton("按钮3");//将三个按钮放到管理器下qv->addWidget(qp1);qv->addWidget(qp2);qv->addWidget(qp3);//将管理器设置到当前widge下this->setLayout(qv);}Widget::~Widget()
{delete ui;
}

        运行结果：

        从结果可以发现三个按钮规章有序的显示在界面上，并且对widget界面进行拉伸时，这三个按钮也会跟着拉伸的比例变化，如果这三个按钮直接放到widget界面上，则按钮尺寸不会随着widget界面的尺寸变化而变化。能够实现这个效果的原因是布局管理器作用在widget上，换句话说，一个widget只能有一个布局管理器并且布局管理器就是widget本身，所以对widget界面进行尺寸拉伸时，实际上就是对布局管理器做拉伸，进而导致布局管理器里的控件也跟着拉伸了。

1.2 多个布局管理器 

        虽然一个widget下只能有一个布局管理器，但是可以通过ui文件中界面创建的方式在一个widget下生成多个布局管理器，操作如下：

        但是在运行程序后，发现对最终的界面进行拖拽则无法影响界面上的按钮，如下图：

        原因是通过ui文件手动式创建的Layout，实际上是先创建了一个widget，然后再将创建的Layout放到该widget下，所以上述界面中有3个widget，而我们拖拽的是最外层的widget尺寸，不会影响里面两个widget的尺寸，也就不会影响Layout里的按钮的尺寸了。

2、QHBoxLayout水平布局 

         QHBoxLayout表示水平布局管理器，他的作用和QVBoxLayout是一样的，不过他是在水平方向摆放控件的，QHBoxLayout效果图如下：

        QHBoxLayout属性以及常用接口都和QVBoxLayout一样，因此这里就不再介绍了。

2.1 QHBoxLayout的使用

        创建一个QHBoxLayout和三个按钮控件，将三个按钮控件放到该QHBoxLayout下，观察生成后的界面，代码如下：

#include "widget.h"
#include "ui_widget.h"
#include <QHBoxLayout>
#include <QPushButton>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//创建水平布局管理器QHBoxLayout* qh = new QHBoxLayout();//创建三个按钮QPushButton* q1 = new QPushButton("按钮1");QPushButton* q2 = new QPushButton("按钮2");QPushButton* q3 = new QPushButton("按钮3");//将按钮添加到管理器中qh->addWidget(q1);qh->addWidget(q2);qh->addWidget(q3);//将管理器设置进当前widget中this->setLayout(qh);
}Widget::~Widget()
{delete ui;
}

        运行结果：

2.2 嵌套的Layout 

        在上述水平布局管理中添加一个垂直布局管理器，观察最终的现象，代码如下：

#include "widget.h"
#include "ui_widget.h"
#include <QHBoxLayout>
#include <QPushButton>
#include <QVBoxLayout>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//创建水平布局管理器QHBoxLayout* qh = new QHBoxLayout();//创建三个按钮QPushButton* q1 = new QPushButton("按钮1");QPushButton* q2 = new QPushButton("按钮2");QPushButton* q3 = new QPushButton("按钮3");//将按钮添加到管理器中qh->addWidget(q1);qh->addWidget(q2);qh->addWidget(q3);//将管理器设置进当前widget中this->setLayout(qh);//创建小Layout-垂直管理器QVBoxLayout* qh1 = new QVBoxLayout();//创建三个按钮QPushButton* q4 = new QPushButton("按钮4");QPushButton* q5 = new QPushButton("按钮5");QPushButton* q6 = new QPushButton("按钮6");//将按钮添加到小的垂直管理器中qh1->addWidget(q4);qh1->addWidget(q5);qh1->addWidget(q6);//将小垂直管理器添加到水平管理器中qh->addLayout(qh1);}Widget::~Widget()
{delete ui;
}

         运行结果：

        从上述的例子中可以总结一点：垂直布局管理器的控件添加方式是从下往上式的添加，而水平布局管理器是从右往左式的添加控件。 

3、QGridLayout网格布局 

         QGridLayout表示网格布局，通俗来说就是水平和垂直布局的结合版，就如同一个二维数组，内部的控件就是数值上的元素。QGridLayout属性相比于上述两个控件的区别是：

layoutHorizontalSpacing
相邻元素之间⽔平⽅向的间距
layoutVerticalSpacing
相邻元素之间垂直⽅向的间距
layoutRowStretch
⾏⽅向的拉伸系数
layoutColumnStretch
列⽅向的拉伸系数

        QGridLayout的常用接口和上述两个控件也几乎相同。

3.1  QGridLayout的使用

        创建一个QGridLayout和四个按钮控件，将这四个按钮控件放到QGridLayout下，观察生成的界面，代码如下：

#include "widget.h"
#include "ui_widget.h"
#include <QGridLayout>
#include <QPushButton>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//创建QGridLayoutQGridLayout* qg = new QGridLayout();//创建四个按钮QPushButton* p1 = new QPushButton("按钮1");QPushButton* p2 = new QPushButton("按钮2");QPushButton* p3 = new QPushButton("按钮3");QPushButton* p4 = new QPushButton("按钮4");//将按钮添加到QGridLayout中，注意表明出坐标qg->addWidget(p1,0,0);qg->addWidget(p2,0,1);qg->addWidget(p3,1,0);qg->addWidget(p4,1,1);this->setLayout(qg);}Widget::~Widget()
{delete ui;
}

        运行结果：

        可以从结果看到，界面上既能完成垂直布局，又能完成水平布局。

3.2 设置控件大小比例 

        在QGridLayout中，可以设置以行、列为单位设置控件的拉伸系数，比如调用函数setColumnStretch就是设置列上所有控件的拉伸系数，调用函数setRowStretch就是设置行上所有控件的拉伸系数。注意设置拉伸系数不等于直接设置尺寸，拉伸系数表示与当前单位与其他单位的长度比例。例子如下：

        ①设置列拉伸（水平方向拉伸控件）：

#include "widget.h"
#include "ui_widget.h"
#include <QGridLayout>
#include <QPushButton>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//创建QGridLayoutQGridLayout* qg = new QGridLayout();//创建四个按钮QPushButton* p1 = new QPushButton("按钮1");QPushButton* p2 = new QPushButton("按钮2");QPushButton* p3 = new QPushButton("按钮3");QPushButton* p4 = new QPushButton("按钮4");//将按钮添加到QGridLayout中，注意表明出坐标qg->addWidget(p1,0,0);qg->addWidget(p2,0,1);qg->addWidget(p3,1,0);qg->addWidget(p4,1,1);this->setLayout(qg);qg->setColumnStretch(0,1);//设置该列的拉伸系数是1qg->setColumnStretch(1,3);//设置该列的拉伸系数是3//则该第1列的长度是第0列的三倍
}Widget::~Widget()
{delete ui;
}

        运行结果：

        结果是第1列的长度是第0列的三倍。

        ②设置列拉伸（垂直方向拉伸控件）：

#include "widget.h"
#include "ui_widget.h"
#include <QGridLayout>
#include <QPushButton>
#include <QSizePolicy>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//创建QGridLayoutQGridLayout* qg = new QGridLayout();//创建四个按钮QPushButton* p1 = new QPushButton("按钮1");QPushButton* p2 = new QPushButton("按钮2");QPushButton* p3 = new QPushButton("按钮3");QPushButton* p4 = new QPushButton("按钮4");//因为每个按钮的垂直尺寸是固定的，因此要手动将按钮的垂直属性设置为拓展，目的是方便观察p1->setSizePolicy(QSizePolicy::Ignored,QSizePolicy::Expanding);p2->setSizePolicy(QSizePolicy::Ignored,QSizePolicy::Expanding);p3->setSizePolicy(QSizePolicy::Ignored,QSizePolicy::Expanding);p4->setSizePolicy(QSizePolicy::Ignored,QSizePolicy::Expanding);//将按钮添加到QGridLayout中，注意表明出坐标qg->addWidget(p1,0,0);qg->addWidget(p2,0,1);qg->addWidget(p3,1,0);qg->addWidget(p4,1,1);this->setLayout(qg);qg->setRowStretch(0,1);//设置该行的拉伸系数是1qg->setRowStretch(1,3);//设置该行的拉伸系数是3//则该第1行的长度是第0行的三倍
}Widget::~Widget()
{delete ui;
}

        运行结果：

4、QFormLayout 

        QFormLayout表示表单布局，QFormLayout的功能就比较单一了，他是专门实现只有两列的表单，可以看成是QGridLayout的一个分支控件，因此QFormLayout的属性和QGridLayout几乎一样，只是QFormLayout的添加控件接口为addRow，该接口介绍如下：

void addRow(QWidget *label, QWidget *field);
// 第⼀个控件固定是QLabel, 第⼆个控件可以是任意控件
// 如果把第⼀个参数填写为NULL, 则第一列什么都不显⽰，但是第二个参数不能为空

4.1  QFormLayout的使用

        QFormLayout常用于填写信息的场景， 因此模拟一个信息表单，首先创建一个QFormLayout ，和三个QLabel以及三个QLineEdit，实现代码如下：

#include "widget.h"
#include "ui_widget.h"
#include <QFormLayout>
#include <QLineEdit>
#include <QLabel>
#include <QPushButton>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//创建QFormLayoutQFormLayout* qf = new QFormLayout;//创建三对QLabel和QLineEditQLabel* q1 = new QLabel("姓名");QLabel* q2 = new QLabel("电话");QLabel* q3 = new QLabel("地址");QLineEdit* ql1 = new QLineEdit;QLineEdit* ql2 = new QLineEdit;QLineEdit* ql3 = new QLineEdit;//创建提交按钮QPushButton* qp = new QPushButton("提交");//将上述控件添加到QFormLayout中qf->addRow(q1,ql1);qf->addRow(q2,ql2);qf->addRow(q3,ql3);qf->addRow(nullptr,qp);this->setLayout(qf);
}Widget::~Widget()
{delete ui;
}

        运行结果：

5、QSpacerItem 

        QSpacerItem表示一段空白，他的作用是在使⽤布局管理器的时候，可能需要在控件之间添加⼀段空⽩，这时候就可以用QSpacerItem了。QSpacerItem属性介绍如下：

width
QSpacerItem的 宽度
height
QSpacerItem的 ⾼度
hData
拉伸时，⽔平⽅向的 sizePolicy 的布局设置
vData
拉伸时， 垂直⽅向的 sizePolicy 的布局设置

5.1 QSpacerItem的使用

        创建一个布局管理器，和两个按钮控件以及一个QSpacerItem，观察没有QSpacerItem的界面和有QSpacerItem的界面的区别，代码如下：

#include "widget.h"
#include "ui_widget.h"
#include <QPushButton>
#include <QHBoxLayout>
#include <QSpacerItem>Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget)
{ui->setupUi(this);//创建一个布局管理器（水平或垂直都行）QHBoxLayout* qh = new QHBoxLayout();//创建两个按钮QPushButton* qp1 = new QPushButton("按钮1");QPushButton* qp2 = new QPushButton("按钮2");//创建QSpacerItemQSpacerItem* qs = new QSpacerItem(100,1);//初始化长、宽//将按钮放入布局管理器中qh->addWidget(qp1);qh->addSpacerItem(qs);qh->addWidget(qp2);this->setLayout(qh);
}Widget::~Widget()
{delete ui;
}

         测试结果：

结语 

        以上就是关于布局管理器的讲解，布局管理器整体使用难度不高，但他却是Qt开发中较为重要的一个控件，因为他保证了界面的规整度，同时也方便了开发者对控件规划的位置计算。

        最后如果本文有遗漏或者有误的地方欢迎大家在评论区补充，谢谢大家！！     


http://www.ppmy.cn/news/1529821.html

相关文章

数据结构和算法之树形结构(3)

数据结构和算法之树形结构(3)

文章出处&#xff1a;数据结构和算法之树形结构(3) 关注码农爱刷题&#xff0c;看更多技术文章&#xff01;&#xff01; 四、平衡二叉树(接前篇) 上一章节讲到为了避免二叉查找树退化成链表后的极度不平衡带来的低效率而衍生出了平衡二叉树&#xff0c;平衡二叉树的严格定义…
阅读更多...
【重学 MySQL】三十六、MySQL 其他函数

【重学 MySQL】三十六、MySQL 其他函数

【重学 MySQL】三十六、MySQL 其他函数 FORMAT(value,n)CONV(value,from,to)INET_ATON(ipvalue)INET_NTOA(value)BENCHMARK(n,expr)CONVERT(value USING char_code) MySQL中有些函数无法对其进行具体的分类&#xff0c;但是这些函数在MySQL的开发和运维过程中也是不容忽视的。 …
阅读更多...
【Geoserver使用】REST API调用（工作空间部分）

【Geoserver使用】REST API调用（工作空间部分）

文章目录 前言一、Geoserver REST API(GeoServer Workspace)二、GeoServer Workspace接口使用1.GET请求 /workspaces2.POST请求 /workspaces3.GET请求 /workspaces/{workspaceName}4.PUT /workspaces/{workspaceName}5.DELETE /workspaces/{workspaceName} 总结 前言 根据Geos…
阅读更多...
基于单片机的智能窗帘控制系统-设计说明书

基于单片机的智能窗帘控制系统-设计说明书

设计摘要&#xff1a; 智能窗帘控制系统是一种利用单片机技术实现的智能化控制系统&#xff0c;可以实现窗帘的自动开合和定时控制功能。本系统的设计基于单片机技术&#xff0c;结合传感器、电机和执行器等硬件设备&#xff0c;实现对窗帘的智能化控制。通过传感器采集环境信…
阅读更多...
ToB项目身份认证AD集成（二）：一分钟搞定window server 2003部署AD域服务并支持ssl加密（多图保姆教程+证书脚本）

ToB项目身份认证AD集成（二）：一分钟搞定window server 2003部署AD域服务并支持ssl加密（多图保姆教程+证书脚本）

在ToB的应用开发中&#xff0c;往往需要集成AD域控实现身份认证&#xff0c;同时也算是近期工作的总结&#xff0c;之前已介绍了基础的AD、Ldap&#xff0c;本文主要介绍如何大家一个本地的测试环境。 相关系列&#xff1a; ToB项目身份认证AD集成&#xff08;一&#xff09;&a…
阅读更多...
sqlite数据库导入数据后docsize, segdir, segments, stat为空

sqlite数据库导入数据后docsize, segdir, segments, stat为空

在 SQLite 中&#xff0c;如果你使用 FTS4 模块&#xff0c;并且在导入数据后发现 v_word_docsize、v_word_segdir、v_word_segments 和 v_word_stat 表为空&#xff0c;这通常表明全文索引未正确构建或触发。出现这种情况的原因可能包括&#xff1a; 可能原因 数据未触发索引…
阅读更多...
邮件发送高级功能详解：HTML格式、附件添加与SSL/TLS加密连接

邮件发送高级功能详解：HTML格式、附件添加与SSL/TLS加密连接

目录 一、邮件HTML格式设置 1.1 HTML邮件的优势 1.2 HTML邮件的编写 二、添加附件 2.1 附件的重要性 2.2 添加附件的代码示例 2.3 注意事项 三、使用SSL/TLS加密连接 3.1 SSL/TLS加密的重要性 3.2 SSL/TLS加密的工作原理 3.3 在邮件发送中启用SSL/TLS 3.3.1 邮件客…
阅读更多...
虚拟机安装xubuntu

虚拟机安装xubuntu

新建一个新的虚拟机&#xff0c;选择自定义安装 默认下一步 选择稍后安装操作系统 选择所要创建的系统及版本 填写虚拟机的名称及创建的虚拟机保存的位置 选择处理器和内核的数量 处理器数量指的是&#xff1a;虚拟的CPU数量。 每个处理器的内核数量指的是&#xff1a;虚拟CPU…
阅读更多...
最新文章

Copyright @ 2022~2023