Qt教程 — 3.7 深入了解Qt 控件： Layouts部件

目录

2 如何使用Layouts部件

2.1 QBoxLayout组件-垂直或水平布局

2.2 QGridLayout组件-网格布局

2.3 QFormLayout组件-表单布局

在Qt中，布局管理器（Layouts）是用来管理窗口中控件位置和大小的重要工具。布局管理器可以确保窗口中的控件在不同尺寸的窗口中正确排列和调整大小，使得界面具有良好的可伸缩性和适应性。

  1. 垂直布局（Vertical Layout）：垂直布局是一种布局方式，它会按照垂直方向依次排列控件。在Qt中，可以使用QVBoxLayout来创建垂直布局。通过使用这些布局管理器，你可以更加便捷地设计和管理界面，使得界面布局更加灵活和美观。
  2. 水平布局（Horizontal Layout）：水平布局是一种布局方式，它会按照水平方向依次排列控件。在Qt中，可以使用QHBoxLayout来创建水平布局。
  3. 网格布局（Grid Layout）：网格布局是一种布局方式，它会将控件放置在一个二维的网格中，每个控件占据一个网格。在Qt中，可以使用QGridLayout来创建网格布局。
  4. 表单布局（Form Layout）：表单布局是一种专门用于表单设计的布局方式，它会将标签和输入控件进行组合，使得界面看起来更加整洁。在Qt中，可以使用QFormLayout来创建表单布局。

2 如何使用Layouts部件

2.1 QBoxLayout组件-垂直或水平布局

垂直或水平布局，使用几个按钮，将他们设置为垂直排布和水平排布，以及设置它们的一些属性。

在Qt中，QBoxLayout是一个抽象基类，用于管理布局中的控件。QBoxLayout有两个具体的子类：QVBoxLayout和QHBoxLayout，分别用于垂直布局和水平布局。QBoxLayout提供了一些方法和属性，用于设置布局的各种属性和功能。QBoxLayout的常用方法和功能设置：

  • 将一个控件添加到布局中。addWidget(widget, stretch=0, alignment=0)：stretch参数用于设置控件在布局中的拉伸因子，alignment参数用于设置控件在布局中的对齐方式。
  • 将一个布局添加到当前布局中。addLayout(layout, stretch=0)：stretch参数用于设置布局在父布局中的拉伸因子。
  • 在指定位置插入一个控件。insertWidget(index, widget, stretch=0, alignment=0)
  • 在指定位置插入一个布局。insertLayout(index, layout, stretch=0)
  • 设置指定位置的控件或布局的拉伸因子。setStretch(index, stretch)
  • 设置指定控件的对齐方式。setAlignment(widget, alignment)
  • 设置布局中控件之间的间距。setSpacing(spacing)
  • 设置布局的内容边距。setContentsMargins(left, top, right, bottom)

案例：使用几个按钮，将他们设置为垂直排布和水平排布，以及设置它们的一些属性。

（1）首先按照文章新建项目（Qt教程 — 1.3 如何创建Qt项目-CSDN博客）。

（2）在头文件“mainwindow.h”修改代码，具体代码如下。1）导入<QHBoxLayout>、<QVBoxLayout>、<QPushButton>文件 —> 2）声明一个QPushButton、QWidget、QHBoxLayout对象。完整代码如下。

#ifndef MAINWINDOW_H
#define MAINWINDOW_H#include <QMainWindow>
#include <QHBoxLayout>
#include <QVBoxLayout>
#include <QPushButton>QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACEclass MainWindow : public QMainWindow
{Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr);~MainWindow();private:Ui::MainWindow *ui;// 声明按钮对象数组QPushButton *pushButton[6];// 定义两个 widget，用于容纳排布按钮QWidget *hWidget;QWidget *vWidget;// QHBoxLayout 与 QVBoxLayout 对象QHBoxLayout *hLayout;QVBoxLayout *vLayout;  
};
#endif // MAINWINDOW_H

（3）在文件“mainwindow.cpp”修改代码，具体代码如下。 1）设置主窗体的显示位置与大小。—>2）实例化两个QWidget、QHBoxLayout、QVBoxLayout对象。—>3）实例化6个QPushButton，将按钮垂直和水平布局中。—>4）设置布局间的间距。

#include "mainwindow.h"
#include "ui_mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);// 设置主窗口的位置与大小this->setGeometry(0, 0, 800, 480);// 实例化与设置位置大小hWidget = new QWidget(this);hWidget->setGeometry(0, 0, 400, 50);vWidget = new QWidget(this);vWidget->setGeometry(0, 50, 400, 100);hLayout = new QHBoxLayout();vLayout = new QVBoxLayout();// QList<T>是 Qt 的一种泛型容器类。它以链表方式存储一组值， 并能对这组数据进行快速索引QList <QString>list;// 将字符串值插入 listlist<<"按钮1"<<"按钮2"<<"按钮3"<<"按钮4"<<"按钮5"<<"按钮6";// 用一个循环实例化 6 个按钮 */for(int i = 0; i < 6; i++){pushButton[i] = new QPushButton();pushButton[i]->setText(list[i]);if(i < 3) {// 将按钮添加至 hLayout 中hLayout->addWidget(pushButton[i]);} else {// 将按钮添加至 vLayout 中vLayout->addWidget(pushButton[i]);}}// 设置间隔为 50hLayout->setSpacing(10);//hWidget 与 vWidget 的布局设置为 hLayout/vLayouthWidget->setLayout(hLayout);vWidget->setLayout(vLayout);
}MainWindow::~MainWindow()
{delete ui;
}

（4）程序编译运行的结果如下。可以看到在 hWidget 中添加了 3 个水平排布的按钮，在 vWidget中添加了 3 个垂直排布的按钮。 

​

2.2 QGridLayout组件-网格布局

在Qt中，QGridLayout是用于创建网格布局的类，可以将控件按照行和列的方式进行排列。QGridLayout提供了一系列方法和属性，用于设置布局的各种功能和属性。QGridLayout的常用方法和功能设置：

  1. 将一个控件添加到网格布局中。addWidget(widget, row, column, rowSpan=1, columnSpan=1, alignment=0)：row和column参数指定控件应该放置在哪一行和哪一列，rowSpan和columnSpan参数指定控件应该跨越多少行和多少列，alignment参数指定控件在网格中的对齐方式。

  2. 将一个布局添加到网格布局中。addLayout(layout, row, column, rowSpan=1, columnSpan=1, alignment=0)

  3. 设置指定行的拉伸因子，控制行的高度。setRowStretch(row, stretch)

  4. 设置指定列的拉伸因子，控制列的宽度。setColumnStretch(column, stretch)

  5. 设置指定行的最小高度。setRowMinimumHeight(row, minSize)

  6. 设置指定列的最小宽度。setColumnMinimumWidth(column, minSize)

  7. 设置网格布局中控件之间的间距。setSpacing(spacing)

  8. 设置网格布局的内容边距。setContentsMargins(left, top, right, bottom)

按钮：使用几个按钮，将他们设置为网格布局，同时设置它们的行、列比例系数（拉伸因子），以及设置它们的一些属性。

（1）首先按照文章新建项目（Qt教程 — 1.3 如何创建Qt项目-CSDN博客）。

（2）在头文件“mainwindow.h”修改代码，具体代码如下。1）导入<QGridLayout>、<QPushButton>文件 —> 2）声明一个QPushButton、QWidget、QGridLayout对象。完整代码如下。

​
#ifndef MAINWINDOW_H
#define MAINWINDOW_H#include <QMainWindow>
#include <QPushButton>
#include <QGridLayout>QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACEclass MainWindow : public QMainWindow
{Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr);~MainWindow();private:Ui::MainWindow *ui;// 声明 widget 窗口部件，用于容纳下面 4 个 pushButton 按钮QWidget *gWidget;// 声明 QGridLayout 对象QGridLayout *gridLayout;// 声明 pushButton 按钮数组QPushButton *pushButton[4];
};
#endif // MAINWINDOW_H​

（3）在文件“mainwindow.cpp”修改代码，具体代码如下。 1）设置主窗体的显示位置与大小。—>2）实例化两个QGridLayout对象。—>3）实例化4个QPushButton，将按钮网格布局中。—>4）设置布局间的比例系数。

#include "mainwindow.h"
#include "ui_mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);// 设置主窗口的位置与大小this->setGeometry(0, 0, 800, 480);/******* 2 *******/// 实例化gWidget = new QWidget(this);// 设置 gWidget 居中央this->setCentralWidget(gWidget);gridLayout = new QGridLayout();// QList 链表，字符串类型QList <QString> list;list<<"按钮 1"<<"按钮 2"<<"按钮 3"<<"按钮 4";for (int i = 0; i < 4; i++){pushButton[i] = new QPushButton();pushButton[i]->setText(list[i]);// 设置最小宽度与高度pushButton[i]->setMinimumSize(100, 30);// 自动调整按钮的大小pushButton[i]->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Expanding);switch (i) {case 0:/* 将 pushButton[0]添加至网格的坐标(0,0),下同 */gridLayout->addWidget(pushButton[i], 0, 0);break;case 1:gridLayout->addWidget(pushButton[i], 0, 1);break;case 2:gridLayout->addWidget(pushButton[i], 1, 0);break;case 3:gridLayout->addWidget(pushButton[i], 1, 1);break;default:break;}}// 设置第 0 行与第 1 行的行比例系数gridLayout->setRowStretch(1, 1);gridLayout->setRowStretch(1, 1);// 设置第 0 列与第 1 列的列比例系数gridLayout->setColumnStretch(1, 1);gridLayout->setColumnStretch(1, 1);// 将 gridLayout 设置到 gWidgetgWidget->setLayout(gridLayout);
}MainWindow::~MainWindow()
{delete ui;
}

（4）程序编译运行的结果如下。可以看到在 gWidget 中添加了 4 个按钮，因为设置了行、列的系数比（拉伸因子），所以看到的按钮是按系数比的比例显示。

2.3 QFormLayout组件-表单布局

在Qt中，QFormLayout是用于创建表单布局的类，通常用于显示表单数据。QFormLayout将控件按照标签-字段的形式进行排列，每个标签和字段组合在一行上。下面是QFormLayout的常用方法和功能参数：

  1. 在表单布局中添加一个标签和字段组合。addRow(label, field)：​​​​​​​label为标签部分，field为字段部分。

  2. 在指定的行中添加一个标签和字段组合。addRow(label, field, row)。

  3. 设置标签的对齐方式。setLabelAlignment(alignment)。

  4. 设置整个表单布局的对齐方式。setFormAlignment(alignment)。

  5. 设置字段部分的增长策略。setFieldGrowthPolicy(policy)，可以是QFormLayout::ExpandingFieldsGrow或QFormLayout::AllNonFixedFieldsGrow。

  6. 设置行的换行策略。setRowWrapPolicy(policy)，可以是QFormLayout::WrapLongRows或QFormLayout::DontWrapRows。

  7. 设置标签的角色。setLabelRole(role)，可以是QFormLayout::LabelRole或QFormLayout::FieldRole。

  8. 设置指定行的最小高度。setRowMinimumHeight(row, minSize)。

按钮：使用几个按钮，将他们设置为网格布局，同时设置它们的行、列比例系数（拉伸因子），以及设置它们的一些属性。

（1）首先按照文章新建项目（Qt教程 — 1.3 如何创建Qt项目-CSDN博客）。

（2）在头文件“mainwindow.h”修改代码，具体代码如下。1）导入<QLineEdit>、<QFormLayout>文件 —> 2）声明一个QWidget、两个QLineEdit、QFormLayout对象。完整代码如下。

#ifndef MAINWINDOW_H
#define MAINWINDOW_H#include <QMainWindow>
#include <QFormLayout>
#include <QLineEdit>QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACEclass MainWindow : public QMainWindow
{Q_OBJECTpublic:MainWindow(QWidget *parent = nullptr);~MainWindow();private:Ui::MainWindow *ui;// widget 对象QWidget *fWidget;// 用于输入用户名QLineEdit *userLineEdit;// 用于输入密码QLineEdit *passwordLineEdit;// 声明 QFormLayout 对象QFormLayout *formLayout;
};
#endif // MAINWINDOW_H

（3）在文件“mainwindow.cpp”修改代码，具体代码如下。 1）设置主窗体的显示位置与大小。—>2）实例化QWidget、QLineEdit、QFormLayout对象。—>3）添加登录用户名和密码。—>4）设置水平垂直间距和框的宽度。—>5）将 formLayout 布局到 fWidget

#include "mainwindow.h"
#include "ui_mainwindow.h"MainWindow::MainWindow(QWidget *parent): QMainWindow(parent), ui(new Ui::MainWindow)
{ui->setupUi(this);// 设置主窗口的位置与大小this->setGeometry(0, 0, 800, 480);/******* 3 ******//* 实例化及设置位置与大小，下同 */fWidget = new QWidget(this);fWidget->setGeometry(250, 100, 300, 200);userLineEdit = new QLineEdit();passwordLineEdit = new QLineEdit();formLayout = new QFormLayout();/* 添加行 */formLayout->addRow("用户名： ", userLineEdit);formLayout->addRow("密码 ： ", passwordLineEdit);/* 设置水平垂直间距 */formLayout->setSpacing(10);/* 设置布局外框的宽度 */formLayout->setMargin(20);/* 将 formLayout 布局到 fWidget */fWidget->setLayout(formLayout);
}MainWindow::~MainWindow()
{delete ui;
}

（4）程程序编译运行的结果如下。可以看到在 fWidget 中添加了两行，同时设置了它们的间隔，与距边框的宽度。与 QGirdLayout 布局比较， QFomLayout 布局比较适用于行与列比较少的布局格局。如果是多行多列的布局，应该使用 QGirdLayout 布局。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/764676.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

使用阿里CICD流水线打包Vue项目到阿里的docker镜像私仓，并自动部署到服务器启动服务

使用阿里CICD流水线打包Vue项目到阿里的docker镜像私仓，并自动部署到服务器启动服务

文章目录 使用阿里CICD流水线打包Vue项目到阿里的docker镜像私仓&#xff0c;并自动部署到服务器启动服务1、功能实现原理大家可以看我之前的两篇文章2、打包vue项目和打包咱们的Java项目过程差不多相同&#xff0c;大家可以看着上面的Java打包过程进行实验&#xff0c;下面是v…
阅读更多...
解决VM重新打开后找不到共享文件夹的问题

解决VM重新打开后找不到共享文件夹的问题

我的问题是之前按照网上的文档设置了vm的共享文件夹&#xff0c;能成功使用&#xff0c;但是问题是下一次打开之后就找不到了&#xff0c;虚拟机设置里共享文件夹是启用的&#xff0c;文件夹也完成了映射网络驱动器&#xff0c;但是就是找不到共享文件夹 解决方法&#xff1a;…
阅读更多...
GraphQL入门之变更输入类型

GraphQL入门之变更输入类型

前一篇文章介绍了变更操作&#xff0c;在创建 User 对象的时候&#xff0c;只传递了 name 和 email 参数&#xff0c;但是如果属性太多或者创建对象的时候只需要部分必选参数&#xff0c;直接把属性都当成参数就不合适了&#xff0c;这里 GraphQL 提供了 Input Type 参数来解决…
阅读更多...
关于在vue中有时候表格的位置不对是怎么个情况

关于在vue中有时候表格的位置不对是怎么个情况

今天在写代码的时候多了一个<div>标签&#xff0c;导致表格的位置大小不对 <template><div><tr><td><input type"checkbox" checked"true" /></td><td>xxxxx</td><td><button class"…
阅读更多...
搜索二维矩阵

搜索二维矩阵

题目链接 搜索二维矩阵 题目描述 注意点 每行中的整数从左到右按非严格递增顺序排列每行的第一个整数大于前一行的最后一个整数1 < matrix.length, matrix[0].length < 100 解答思路 先二分查找找到target所处的行&#xff0c;找到行后再二分查找找到target所处的列…
阅读更多...
C语言预编译#pragma宏的作用

C语言预编译#pragma宏的作用

在嵌入式编程中&#xff0c;#pragma 指令具有非常重要的作用&#xff0c;因为它允许开发者在不同的编译器之间传达特定的编译指令。由于嵌入式编程通常与硬件紧密相关&#xff0c;且资源有限&#xff0c;这些指令可以帮助开发者更有效地利用可用资源&#xff0c;优化程序&#…
阅读更多...
【Canvas与艺术】绘制动态太极图

【Canvas与艺术】绘制动态太极图

【图例】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>绘制旋转太极图</title><style type"text/css"&g…
阅读更多...
Rust 语言中 as 关键字用法

Rust 语言中 as 关键字用法

一、Rust 语言中 as 关键字的基本用法 在Rust编程语言中&#xff0c;"as"关键字有几种不同的用法&#xff0c;主要用于类型转换和引入模块或别名。 类型转换&#xff1a;在Rust中&#xff0c;当需要将一个类型转换为另一个类型时&#xff0c;可以使用"as"…
阅读更多...
Flutter中自定义Dialog

Flutter中自定义Dialog

Dialog在不同的平台&#xff0c;都是一种重要的交互方式&#xff0c;在Flutter中&#xff0c;Dialog也是有很多种&#xff0c;但大多数场景的交互&#xff0c;都需要根据项目的主题或一些特定的交互去实现自定义的Dialog。 为满足不同的诉求和兼容性&#xff0c;封装实现了两种…
阅读更多...
html5cssjs代码 039 元素尺寸

html5cssjs代码 039 元素尺寸

html5&css&js代码 039 元素尺寸 一、代码二、解释 使用CSS来定义HTML元素的尺寸&#xff0c;并通过不同的计量单位来设置元素的大小。 一、代码 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><tit…
阅读更多...
从0到1实现RPC | 03 重载方法和参数类型转换

从0到1实现RPC | 03 重载方法和参数类型转换

一、存在的问题 1.重载方法在当前的实现中还不支持&#xff0c;调用了会报错。 2.类型转换也还存在问题。 假设定义的接口如下&#xff0c;参数是float类型。 在Provider端接受到的是一个Double类型&#xff0c;这是因为web应用接收的请求后处理的类型。 在反射调用的时候就会…
阅读更多...
思腾合力受邀出席文化和旅游虚拟现实应用推广交流活动并作主题演讲

思腾合力受邀出席文化和旅游虚拟现实应用推广交流活动并作主题演讲

3月21日&#xff0c;由文化和旅游部产业发展司主办&#xff0c;中国信息通信研究院、北京市石景山区文化和旅游局、中国动漫集团有限公司承办的“数字赋能文旅场景建设行动——文化和旅游虚拟现实应用推广交流活动”在北京首钢一高炉SoReal科幻乐园成功举办。 思腾合力CMO徐莉受…
阅读更多...
openGauss学习笔记-249 openGauss性能调优-使用Plan Hint进行调优-Join顺序的Hint

openGauss学习笔记-249 openGauss性能调优-使用Plan Hint进行调优-Join顺序的Hint

文章目录 openGauss学习笔记-249 openGauss性能调优-使用Plan Hint进行调优-Join顺序的Hint249.1 功能描述249.2 语法格式249.3 参数说明249.4 示例 openGauss学习笔记-249 openGauss性能调优-使用Plan Hint进行调优-Join顺序的Hint 249.1 功能描述 指明join的顺序&#xff0…
阅读更多...
Flutter Widget：StatefulWidgetStatelessWidgetState

Flutter Widget：StatefulWidgetStatelessWidgetState

Widget 概念 Widget 将是构建Flutter应用的基石&#xff0c;在Flutter开发中几乎所有的对象都是一个 Widget 。 在Flutter中的widget 不仅表示UI元素&#xff0c;也表示一些功能性的组件&#xff0c;如&#xff1a;手势 、主题Theme 等。而原生开发中的控件通常只是指UI元素。…
阅读更多...
JAVA八股文面经问题整理第8弹

JAVA八股文面经问题整理第8弹

文章目录 目录 文章目录 提问问题 问题1 问题2 问题3 问题4 问题5 问题6 问题7 问题8 问题9 问题10 写在最后 提问问题 笔试题&#xff1a;n皇后问题笔试题&#xff1a;求一颗二叉搜索树中的众数TCP与UDP的概念&#xff0c;特点&#xff0c;区别和对应的使⽤场景&#xff1f;H…
阅读更多...
DashVector - 阿里云向量检索服务

DashVector - 阿里云向量检索服务

DashVector 文章目录 DashVector一、关于 DashVector二、使用 DashVector 前提准备1、创建Cluster&#xff1a;2、获得API-KEY3、安装最新版SDK 三、快速使用 DashVector1. 创建Client2. 创建Collection3、插入Doc4、相似性检索5、删除Doc6. 查看Collection统计信息7. 删除Coll…
阅读更多...
【阿里云物联网】上报设备数据

【阿里云物联网】上报设备数据

前言 MQTT客户端上传数据到阿里云服务端&#xff0c;并且能将数据显示出来。在此之前&#xff0c;我们先要懂得阿里云给设备管理划分的概念。首先是产品&#xff0c;所以在产品里要配置内容&#xff0c;产品下的设备才可以使用&#xff0c;比如主题大类都是在产品里面就可以查…
阅读更多...
2024-3-22-Qtday3作业

2024-3-22-Qtday3作业

1> 思维导图 2> 要求&#xff1a; 使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数 将登录按钮使用qt5版本的连接到自定义的槽函数中&#xff0c;在槽函数中判断ui界面上输入的账号是否…
阅读更多...
【目标检测】YOLOv9理论解读与代码分析

【目标检测】YOLOv9理论解读与代码分析

前言 YOLO这个系列的故事已经很完备了&#xff0c;比如一些Decoupled-Head或者Anchor-Free等大的策略改动已经在YOLOv8固定下来&#xff0c;后面已经估计只有拿一些即插即用的tricks进行小改。 mmdetection框架的作者深度眸也在知乎上对“是否会有YOLOv9”这一观点发表看法&a…
阅读更多...
Python爬取歌曲宝音乐:轻松下载Jay的歌

Python爬取歌曲宝音乐:轻松下载Jay的歌

歌曲宝是一个不用付费就能听jay的歌曲&#xff0c;但是每次都只能播放一首不方便&#xff0c;于是今天想把它下载下来&#xff0c;本地循环播放&#xff0c;它所用到的接口是某我的还不错哈 获取搜索接口 分析html请求接口&#xff0c;获取到的数据是直接渲染好的HTML内容&…
阅读更多...
最新文章

Copyright @ 2022~2023