C++客户端Qt开发——常用控件（布局管理器）

于 2024-07-17 14:58:53 发布
阅读量1.2k 收藏 31
点赞数 16
分类专栏： qt 文章标签： c++ qt 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63596031/article/details/140407658
版权

7.布局管理器

之前使用Qt在界面上创建的控件，都是通过"绝对定位"的方式来设定的

也就是每个控件所在的位置，都需要计算坐标，最终通过setGeometry或者

move方式摆放过去，

这种设定方式其实并不方便，尤其是界面如果内容比较多，不好计算，而且一个窗口大小往往是可以调整的，按照绝对定位的方式，也无法自适应窗口大小

因此Qt引入"布局管理器"(Layout)机制，来解决上述问题.

布局管理器并非Qt独有.其他的GUI开发框架，像Android,前端等也有类似的机制

①垂直布局

使用QVBoxLayout表示垂直的布局管理器，V是vertical的缩写

属性

说明

layoutLeftMargin

左侧边距

layoutRightMargin

右侧边距

layoutTopMargin

上方边距

layoutBottomMargin

下方边距

layoutSpacing

相邻元素之间的间距

Layout只是用于界面布局，并没有提供信号，

①使用QVBoxLayout管理多个控件

#include "widget.h"
#include "ui_widget.h"
#include<QPushButton>
#include<QVBoxLayout>

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

    QPushButton* btn1 = new QPushButton("按钮1");
    QPushButton* btn2 = new QPushButton("按钮2");
    QPushButton* btn3 = new QPushButton("按钮3");

    //创建布局管理器，并把按钮添加进去
    //如果创建的时候指定父元素为this，则后面不需要setLayout方法了
    QVBoxLayout* layout = new QVBoxLayout();
    layout->addWidget(btn1);
    layout->addWidget(btn2);
    layout->addWidget(btn3);

    //把布局管理器设置到Widget中
    this->setLayout(layout);

}

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

②创建两个QVBoxLayout

按钮已经自动排列好，只不过当前这些按钮的位置不能随着窗口大小自动变化

通过Qt Designer创建的布局管理器，其实是先创建了一个widget,.设置过geometry属性的，再把这个layout设置到这个widget中

实际上，一个widget只能包含一个layout

打开ui文件的原始ml,可以看到其中的端倪

这种情况下layout并非是窗口widget的布局管理器，因此不会随着窗口大小改变

②水平布局

使用QHBox Layout，表示垂直的布局管理器.H是horizontal的缩写

核心属性（和QVBoxLayout属性是一致的)

属性

说明

layoutLeftMargin

左侧边距

layoutRightMargin

右侧边距

layoutTopMargin

上方边距

layoutBottomMargin

下方边距

layoutSpacing

相邻元素之间的间距

①使用QHBoxLayout管理控件

#include "widget.h"
#include "ui_widget.h"
#include<QPushButton>
#include<QHBoxLayout>

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

    //创建三个按钮，并且把按钮添加到布局控制器中
    QPushButton* btn1 = new QPushButton("按钮1");
    QPushButton* btn2 = new QPushButton("按钮2");
    QPushButton* btn3 = new QPushButton("按钮3");

    //创建布局管理器
    QHBoxLayout* layout = new QHBoxLayout();
    layout->addWidget(btn1);
    layout->addWidget(btn2);
    layout->addWidget(btn3);

    this->setLayout(layout);

}

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

②嵌套下的layout

Layout里面可以再嵌套上其他的layout，从而达到更复杂的布局效果

#include "widget.h"
#include "ui_widget.h"
#include<QVBoxLayout>
#include<QHBoxLayout>
#include<QPushButton>

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

    //创建顶层layout
    QVBoxLayout* layoutParent = new QVBoxLayout();
    this->setLayout(layoutParent);

    //添加两个按钮进去
    QPushButton* btn1 = new QPushButton("按钮1");
    QPushButton* btn2 = new QPushButton("按钮2");

    layoutParent->addWidget(btn1);
    layoutParent->addWidget(btn2);

    //创建子layout

    QHBoxLayout* layoutChild = new QHBoxLayout();

    //添加两个按钮进去
    QPushButton* btn3 = new QPushButton("按钮3");
    QPushButton* btn4 = new QPushButton("按钮4");

    layoutChild->addWidget(btn3);
    layoutChild->addWidget(btn4);

    //把子layout添加到父layout中
    layoutParent->addLayout(layoutChild);
}

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

③网格布局

Qt中还提供了QGridLayout用来实现网格布局的效果.可以达到M*N的这种网格的效果

核心属性

整体和QVBoxLayout以及QHBoxLayout相似，但是设置spacing的时候是按照垂直水平两个方向来设置的

属性

说明

layoutLeftMargin

左侧边距

layoutRightMargin

右侧边距

layoutTopMargin

上方边距

layoutBottomMargin

下方边距

layoutHorizontalSpacing

相邻元素之间水平方向的间距

layoutVerticalSpacing

相邻元素之间垂直方向的间距

layoutRowStretch

行方向的拉伸系数

layoutColumnStretch

列方向的拉伸系数

①使用QGridLayout管理元素

#include "widget.h"
#include "ui_widget.h"
#include<QPushButton>
#include<QGridLayout>

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

    //创建四个按钮
    QPushButton* btn1 = new QPushButton("按钮1");
    QPushButton* btn2 = new QPushButton("按钮2");
    QPushButton* btn3 = new QPushButton("按钮3");
    QPushButton* btn4 = new QPushButton("按钮4");

    //创建网格布局管理器，并添加元素
    QGridLayout* layout = new QGridLayout();
    layout->addWidget(btn1,0,0);
    layout->addWidget(btn2,0,1);
    layout->addWidget(btn3,1,0);
    layout->addWidget(btn4,1,1);

    this->setLayout(layout);
}

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



//假如是这种布局
//相当于QHBoxLayout
layout->addWidget(btn1,0,1);
layout->addWidget(btn2,0,2);
layout->addWidget(btn3,0,3);
layout->addWidget(btn4,0,4);
//假如是这种布局
//相当于QVBoxLayout
layout->addWidget(btn1, 1, 0);
layout->addWidget(btn2, 2, 0);
layout->addWidget(btn3, 3, 0);
layout->addWidget(btn4, 4, 0);

此处也要注意，设置行和列的时候，如果设置的是一个很大的值，但是这个值和上一个值之间并没有其他的元素，那么并不会在中间腾出额外的空间

假如把btn4设置在第10行，但是由于3-9行没有元素.因此btn4仍然会紧挨在btn3下方，看起来和上面的0 1 2 3的情况是相同的

②设置QGridLayout中元素的大小比例

#include "widget.h"
#include "ui_widget.h"
#include<QPushButton>
#include<QGridLayout>

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

    QPushButton* btn1 = new QPushButton("按钮1");
    QPushButton* btn2 = new QPushButton("按钮2");
    QPushButton* btn3 = new QPushButton("按钮3");
    QPushButton* btn4 = new QPushButton("按钮4");
    QPushButton* btn5 = new QPushButton("按钮5");
    QPushButton* btn6 = new QPushButton("按钮6");

    //创建网络布局管理器，添加元素
    QGridLayout* layout = new QGridLayout();
    layout->addWidget(btn1,0,0);
    layout->addWidget(btn2,0,1);
    layout->addWidget(btn3,0,2);
    layout->addWidget(btn4,1,0);
    layout->addWidget(btn5,1,1);
    layout->addWidget(btn6,1,2);

    //设置拉伸比例
    //第0列拉伸比例为1
    layout->setColumnStretch(0,1);
    //第1列拉伸比例为0，即为固定大小，不参与拉伸
    layout->setColumnStretch(1,0);
    //第2列拉伸比例为3，即为第2列的宽度是第0列的3倍
    layout->setColumnStretch(2,3);

    this->setLayout(layout);
}

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

另外，QGridLayout也提供了setRowStretch设置行之间的拉伸系数

上述案例中，直接设置setRowStretch效果不明显，因为每个按钮的高度是固定的.需要把按钮的垂直方向的sizePolicy属性设置为QSizePolicy::Expanding尽可能填充满布局管理器，才能看到效果

③设置垂直方向的拉伸系数

#include "widget.h"
#include "ui_widget.h"
#include<QPushButton>
#include<QGridLayout>

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

    QPushButton* btn1 = new QPushButton("按钮1");
    QPushButton* btn2 = new QPushButton("按钮2");
    QPushButton* btn3 = new QPushButton("按钮3");
    QPushButton* btn4 = new QPushButton("按钮4");
    QPushButton* btn5 = new QPushButton("按钮5");
    QPushButton* btn6 = new QPushButton("按钮6");

    //设置按钮的sizePolice，此时按钮的水平和垂直方向都会尽量舒展开
    btn1->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);
    btn2->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);
    btn3->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);
    btn4->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);
    btn5->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);
    btn6->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);

    //创建网络布局管理器，并添加元素
    QGridLayout* layout = new QGridLayout();
    layout->addWidget(btn1,0,0);
    layout->addWidget(btn2,0,1);
    layout->addWidget(btn3,1,0);
    layout->addWidget(btn4,1,1);
    layout->addWidget(btn5,2,0);
    layout->addWidget(btn6,2,1);

    //设置拉伸比例
    //第0行拉伸比例为1
    layout->setRowStretch(0,1);
    //第1行拉伸比例为0,即为固定大小，不参与拉伸
    layout->setRowStretch(1,0);
    //第2行拉伸比例为3，即为第2列的宽度是第0列的3倍
    layout->setRowStretch(2,3);

    this->setLayout(layout);

}

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

④表单布局

除了上述的布局管理器之外，Qt还提供了QFormLayout,属于是QGridLayout的特殊情况，专门用于实现两列表单的布局

这种表单布局多用于让用户填写信息的场景.左侧列为提示，右侧列为输入框

#include "widget.h"
#include "ui_widget.h"
#include<QFormLayout>
#include<QLabel>
#include<QLineEdit>
#include<QPushButton>

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

    QFormLayout* layout = new QFormLayout();
    this->setLayout(layout);

    //创建三个label
    QLabel* label1 = new QLabel("姓名");
    QLabel* label2 = new QLabel("年龄");
    QLabel* label3 = new QLabel("电话");

    //创建三个lineEdit
    QLineEdit* lineEdit1 = new QLineEdit();
    QLineEdit* lineEdit2 = new QLineEdit();
    QLineEdit* lineEdit3 = new QLineEdit();

    //创建一个提交按钮
    QPushButton* btn = new QPushButton("提交");

    //把上述元素都添加到layout中
    layout->addRow(label1,lineEdit1);
    layout->addRow(label2,lineEdit2);
    layout->addRow(label3,lineEdit3);
    layout->addRow(NULL,btn);

}

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

⑤Spacer 在控件之间添加一段空白

属性

说明

width

宽度

height

高度

hData

水平方向的sizePolicy

QSizePolicy::Ignored:忽略控件的尺寸，不对布局产生影响。

QSizePolicy::Minimum:控件的最小尺寸为固定值，布局时不会超过该值。

QSizePolicy:Maximum:控件的最大尺寸为固定值，布局时不会小于该值。

QSizePolicy::Preferred:控件的理想尺寸为固定值，布局时会尽量接近该值。

QSizePolicy::Expanding:控件的尺寸可以根据空间调整，尽可能占据更多空间。

QSizePolicy::Shrinking:控件的尺寸可以根据空间调整，尽可能缩小以适应空间。

vData

垂直方向的sizePolicy

选项同上

①创建一组左右排列的按钮

#include "widget.h"
#include "ui_widget.h"
#include<QVBoxLayout>
#include<QPushButton>

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

    QHBoxLayout* layout = new QHBoxLayout();
    this->setLayout(layout);

    QPushButton* btn1 = new QPushButton("按钮1");
    QPushButton* btn2 = new QPushButton("按钮2");

    //创建Spacer
    QSpacerItem* spacer = new QSpacerItem(200,20);

    layout->addWidget(btn1);

    //在两个Widget中间件加上空白
    layout->addSpacerItem(spacer);

    layout->addWidget(btn2);
}

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

调整QSpacerltem不同的尺寸，即可看到不同的间距

在Qt Designer中，也可以直接给界面上添加spacer

Outlier_9
关注
专栏目录
【 Qt 的“前世”与“今生”】Qt 的起源 | Qt 的发展历程 | 为什么选择 Qt | Qt 的授权模式 | Qt 版本选择 | Qt Widgets和QML | Qt 程序发布
dvlinker的技术专栏
12-03 2万+
【 Qt 的“前世”与“今生”】Qt 的起源 | Qt 的发展历程 | 为什么选择 Qt | Qt 的授权模式 | Qt 版本选择 | Qt Widgets和QML | Qt 程序发布
C++客户端Qt开发——Qt窗口（浮动窗口）
最新发布
m0_63596031的博客
07-27 354
浮动窗口一般是位于核心部件的周围，可以有多个。在Qt中，浮动窗口也称之为铆接部件。浮动窗口是位于中心部件的周围。
Qt从入门到放弃——元对象系统&布局管理器
Hey9771的博客
10-21 643
元对象系统 Qt5元对象系统提供了对象间的通信机制(信号和槽)、运行时类型信息和动态属性系统的支持,是标准C++的一个扩展,它使αt能够更好地实现GUI图形用户界面编程。Qt5的元对象系统不支持C++模板,尽管该模板扩展了标准C++的功能。但是,元对象系统提供了模板无法提供的一些特性。Qt5元对象系统基于以下三个事实。 (1)基类 QObject:任何需要使用元对象系统功能的类必须继承自 QObject (2) Q_OBJECT宏: Q OBJECT宏必须出现在类的私有声明区中,用于启动元对象的特性。 (3
QT布局Layout
10-23
本例中，使用了水平，垂直，表格布局
C++ Qt 布局
桜
11-28 418
#include &amp;quot;widget.h&amp;quot; #include &amp;amp;lt;QtGui&amp;amp;gt; #include &amp;amp;lt;QtCore&amp;amp;gt; Widget::Widget(QWidget *parent) :QWidget(parent) { QLabel *l1=new QLabel(tr(&amp;quot;姓名&amp;quot;));
Qt C++中使用布局器
quietbxj的博客
05-03 109
Qt C++中使用布局器
Qt布局
C++初学者
11-28 390
在Qt中除了用Layouts进行布局外，控件本身的布局策略也是关键的一点 SizeHint是布局管理中的控件默认尺寸，如果控件不在布局管理中就是无效的值； //水平策略/垂直策略 enum Policy { Fixed//控件不能放大或缩小，控件大小就是它的sizeHint Minimum//如果已经是最小，不能再被缩小，但能放大 Maximum//如果...
Qt深入浅出（四）布局管理器
qq769651718的专栏
02-24 2276
     布局管理器可以让程序员摆脱繁琐的窗口位置大小设置工作。并且布局管理器可以依据窗口大小变更布局控件的位置大小。​ 布局管理器基类为QLayout继承至QObject 和QLayoutItem，它是一个抽象基类，需要被进一步继承才能使用。它的派生类有QHBoxLayout、QVBoxLayout和QGridLayout。​ 每个窗口对象都可以设置一个布局管理器，来管理所有它的子窗口，由于...
基于C++&Qt实现的在线点餐系统（客户端+服务端——.zip
09-12
总的来说，这个基于C++&Qt的在线点餐系统展示了现代软件开发中的多种技术融合，包括面向对象编程、图形用户界面设计、网络通信、数据库管理和并发处理等。它不仅是一个实用的工具，也是学习和实践这些技术的优秀案例...
C++毕业设计：基于Qt的多线程局域网聊天系统（含客户端+服务端）.zip
12-22
在GUI设计方面，Qt提供丰富的控件和布局管理器，使得开发者可以快速搭建用户友好的界面。例如，可以使用QTextEdit用于显示聊天记录，QLineEdit用于输入消息，QPushButton用于发送消息。通过信号和槽机制，可以将用户...
Qt入门练习项目——TCP通讯.zip
08-03
3. **Qt GUI设计**：Qt Creator内置了可视化布局工具，可以方便地拖拽控件构建用户界面。在TCP通讯项目中，可能包含输入框（QLineEdit）用于输入数据，按钮（QPushButton）用于触发发送和接收操作，以及文本框...
C++ Qt 项目设计：跨平台的文件与视频压缩解压工具的设计与实现
探索C++编程的奥秘，分享深入的技术见解和实践，旨在激发读者创造力与解决问题的思维。
05-25 2153
C++ 项目实战：跨平台的文件与视频压缩解压工具的设计与实现
QT c++ 代码布局原则 简单例子
weixin_39926429的博客
04-28 1002
本文描述QT c++ widget代码布局遵循的原则：实中套虚，虚中套实。 所谓实是实体组件：比如界面框、文本标签、组合框、文本框、按钮、表格、图片框等。 所谓虚是Layout组件：比如垂直布局、水平布局、网格布局、表单布局、堆栈布局。 所谓布局是指定排列规则。
C++ Qt 学习（二）：常用控件使用与界面布局
qq_42994487的博客
11-01 1604
C++ Qt 学习（二）：常用控件使用与界面布局
QT C++ CLion ListView 使用教程
liuyangqi11的博客
03-10 717
paint函数就是绘制用sizeHint 可以改变item的大小以下方法也都可以用哦。戳我看文档。
C++实践之Qt学习（六）：Qt设计器之常用控件、布局和样式
大家随意
07-21 3043
文章目录常用控件按钮普通按钮单选按钮多选按钮其他的按钮显示控件标签其他显示控件输入控件数据项控件容器控件布局Qt布局介绍设置布局的方式样式外部样式表 常用控件 按钮 Buttons分类中包含了Qt中常用的按钮控件，其中常用的有： 普通按钮 Push Button：即常用的普通按钮，通常用来进行点击后执行某个命令。 设置按钮图片： 还可以设置按钮的三态图： ui->play_button->setStyleSheet( "QPushButton{border-image:url(:/n
C/C++ Qt StringListModel 字符串列表映射组件
热门推荐
CSDN
12-04 1万+
StringListModel 字符串列表映射组件，该组件用于处理字符串与列表框组件中数据的转换，通常该组件会配合ListView组件一起使用，例如将ListView组件与Model模型绑定，当ListView组件内有数据更新时，我们就可以利用映射将数据模型中的数值以字符串格式提取出来，同理也可实现将字符串赋值到指定的ListView组件内。属性将模型与ListView组件绑定，当ListView组件被选中是则触发。获取到ListView中的每行并将其赋值到。字符串链表中，最后通过循环的方式依次插入到。
QT控件之（ListView）中右击添加菜单栏的功能
Littlehero_121的博客
02-05 2974
以下内容是参考博客https://blog.csdn.net/lyblyblyblin/article/details/77838919 相关内容自己做了些整理，代码部分做了下优化与添加 最后实现的效果如下： 源码部分，主要如下： 新建个qt工程文件，拖动个listView控件在界面中，然后在mainwindow.h文件中如下： #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Outlier_9

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值