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

news2024/9/22 4:11:44

目录

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有两个具体的子类:QVBoxLayoutQHBoxLayout,分别用于垂直布局和水平布局。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_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    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;
    // 将字符串值插入 list
    list<<"按钮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]);
    }
        }
    // 设置间隔为 50
    hLayout->setSpacing(10);
    //hWidget 与 vWidget 的布局设置为 hLayout/vLayout
    hWidget->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)rowcolumn参数指定控件应该放置在哪一行和哪一列,rowSpancolumnSpan参数指定控件应该跨越多少行和多少列,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_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    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 设置到 gWidget
    gWidget->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::ExpandingFieldsGrowQFormLayout::AllNonFixedFieldsGrow

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

  7. 设置标签的角色。setLabelRole(role),可以是QFormLayout::LabelRoleQFormLayout::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_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    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.coloradmin.cn/o/1536885.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

yarn的使用与安装

文章目录 1.安装方式一&#xff1a;全局安装yarn2.安装方式二&#xff1a;通过开启corepack安装3.其他部分yarn命令4.Yarn镜像配置5.Pnpm使用方法同yarn无区别,可按照以上yarn的安装以及使用方式来使用pnmp 1.安装方式一&#xff1a;全局安装yarn 全局安装yarn npm i yarn -g…

MySQL数据库-MySQL基础-下篇-函数、约束、多表查询、事务

文章目录 函数一、字符串函数练习 二、数值函数三、日期函数四、流程函数总结 约束概述约束演示外键约束概念语法删除/更新行为 总结 多表查询多表关系一对多&#xff08;多对一&#xff09;多对多一对一 多表查询概述内连接外连接自连接*联合查询-union, union all子查询标量子…

6.shell case控制语句

case控制语句 1.什么是case case条件语句相当于多分支的if/elif/else条件语句&#xff0c;主要还是用来做条件判断的,常被应用于实现系统服务启动脚本。 case语句中&#xff0c;会将case获取的变量值与表达式部分的值1、值2、值3等逐个进行比较&#xff0c;如果变量值和某个表…

大创项目推荐 协同过滤电影推荐系统

文章目录 1 简介1 设计概要2 课题背景和目的3 协同过滤算法原理3.1 基于用户的协同过滤推荐算法实现原理3.1.1 步骤13.1.2 步骤23.1.3 步骤33.1.4 步骤4 4 系统实现4.1 开发环境4.2 系统功能描述4.3 系统数据流程4.3.1 用户端数据流程4.3.2 管理员端数据流程 4.4 系统功能设计 …

六面体单元热应力问题有限元求解 | Matlab源码 | 理论文本 | 温度应力 | 热应变 |温度应变 |热力耦合

专栏导读 作者简介&#xff1a;工学博士&#xff0c;高级工程师&#xff0c;专注于工业软件算法研究本文已收录于专栏&#xff1a;《有限元编程从入门到精通》本专栏旨在提供 1.以案例的形式讲解各类有限元问题的程序实现&#xff0c;并提供所有案例完整源码&#xff1b;2.单元…

数字化转型导师坚鹏:数字化人才培养—企业数字化转型的核心力量

数字化人才培养&#xff1a;企业数字化转型的核心力量 ——数字化转型背景下重塑企业干部核心竞争力 授课背景&#xff1a; 很多银行存在以下问题&#xff1a; 企业干部不清楚企业需要哪些数字化人才&#xff1f; 企业干部不知道设计数字化人才培养方案&#xff1f; 企…

南京观海微电子---初识PCIe协议——PCIe接口专栏(一)

2. 概述 PCIe协议是一种端对端的互连协议&#xff0c;提供了高速传输带宽的解决方案。与传统的并行总线标准如PCI和PCI-X相比&#xff0c;PCIe提供了更低的延迟和更高的数据传输速率。每个连接到主板上的设备都通过独立的点对点连接与之相连&#xff0c;这避免了设备之间因为共…

桌面显示器PD芯片:引领桌面显示技术的新篇章

随着科技的飞速发展&#xff0c;桌面显示器作为人们日常工作与生活中不可或缺的重要设备&#xff0c;其性能与品质也在不断提升。其中&#xff0c;PD芯片作为桌面显示器中的核心组件&#xff0c;发挥着至关重要的作用。本文将对桌面显示器PD芯片进行详细介绍&#xff0c;探讨其…

Xinstall让App推广变得高效而简单

随着移动互联网的迅猛发展&#xff0c;App已成为人们生活中不可或缺的一部分。然而&#xff0c;对于众多开发者和广告主来说&#xff0c;如何高效地推广自己的App&#xff0c;却一直是一个令人头疼的问题。今天&#xff0c;我们要为大家介绍的&#xff0c;正是国内专业的App全渠…

ngrok实现内网穿透

在使用jenkins进行自动化部署时&#xff0c;需要设置github的webhook钩子来触发构建&#xff0c;由于jenkins运行在自己的电脑上&#xff0c;因此需要通过内网穿透来接受http请求。 Install ngrok via Homebrew with the following command: brew install ngrok/ngrok/ngrokP…

Wireshark 抓包工具与长ping工具pinginfoview使用,安装包

一、Wireshark使用 打开软件&#xff0c;选择以太网 1、时间设置时间显示格式 这个时间戳不易直观&#xff0c;我们修改 2、抓包使用的命令 1&#xff09;IP地址过滤 ip.addr192.168.1.114 //筛选出源IP或者目的IP地址是192.168.1.114的全部数据包。 ip.sr…

银河麒麟系统安装设备类型选择lvm简单模式之后,数据写入导致失败导致系统重启无法正常加载

银河麒麟系统安装设备类型选择lvm简单模式之后&#xff0c;数据写入导致失败导致系统重启无法正常加载 一 系统环境1.1 系统版本信息1.2 通过镜像安装的过程中选择设备类型选择的是lvm简单模式 二 问题描述三 问题修复过程3.1 挂载ISO镜像&#xff0c;引导到字符终端界面3.2 修…

如何注册 onlyFans? onlyFans 如何订阅教程

一、onlyFans 介绍 OnlyFans 是一个在线平台&#xff0c;允许创作者为他们的内容提供订阅服务&#xff0c;通常是成人内容或独家内容。该平台于2016年成立&#xff0c;起初被认为是一个用于演员、模特、艺术家和其他创意行业从业者分享内容的地方。随着时间的推移&#xff0c;O…

骑砍战团MOD开发(49)-使用ScoEditor编辑sco文件制作游戏场景

一.ScoEditor下载霸王•吕布 / ScoEditor GitCodehttps://gitcode.net/qq_35829452/scoeditor二.ScoEditor导出文件种类 mission_objects.json:场景物/出生点/通道等物体 layer_ground_elevation.pfm:场景terrain/ground地形增量,采用PFM深度图存储 ai_mesh.obj:AI网格静态模型…

二、SpringBoot3 配置文件

本章概要 统一配置管理概述属性配置文件使用YAML 配置文件使用批量配置文件注入多环境配置和使用 2.1 统一配置管理概述 SpringBoot工程下&#xff0c;进行统一的配置管理&#xff0c;你想设置的任何参数&#xff08;端口号、项目根路径、数据库连接信息等等)都集中到一个固定…

Echarts地图之——如何给省份名称添加背景图片背景色

上次添加的背景是给整张地图添加的&#xff0c;如果想要给省份名称设置背景图&#xff0c;我们就要在label配置里面去添加设置。 series: [ {type: map,map: china,aspectScale: 0.85,zoom: 1.2,top: 9%,left: 11%,roam: false,selectedMode: multiple,label: {show: true,col…

基于springboot的服装商城系统(含源文件)

&#xff08;源码附文章底部&#xff09; 摘 要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;时装购物系统当然也不能排除在外。时装购物系统是以实际运用为开发背景&#…

C++关键字:const

文章目录 一、const的四大作用1.修饰 变量、数组2.修饰 函数的形参、修饰 引用 (最常用&#xff09;3.修饰 指针&#xff1a;常量指针、指针常量 、只读指针4.修饰 类的成员函数、修饰 类的对象 一、const的四大作用 1.修饰 变量、数组 1.const修饰变量&#xff1a; 被const修…

牛客周赛 Round 37 E.魔法之森的蘑菇

广搜板子&#xff0c;加个方向就好了 注意多测清空问题 #include<bits/stdc.h> using namespace std; using ll long long; #define int long long const int N 1e510; const int inf 0x3f3f3f3f; const int mod 1e97;int n,m; char g[1010][1010]; bool vis[1010][1…

思科网络中DHCP协议的配置

一、什么是DHCP&#xff1f;DHCP有什么作用&#xff1f; &#xff08;1&#xff09;DHCP&#xff08;Dynamic Host Configuration Protocol&#xff09;是一种网络协议&#xff0c;用于在局域网中自动分配IP地址和其他网络配置信息给计算机设备。我们电脑连接WiFi的时一般就是…