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_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)：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_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::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_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 布局。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

BAAI 北京智源研究院

BAAI 北京智源研究院

文章目录 关于 BAAI产品悟道大模型FlagOpen 大模型技术天演 生物智能九鼎 智算平台 关于 BAAI BAAI : Beijing Academy of Artificial Intelligence 北京智源研究院 官网&#xff1a;https://www.baai.ac.cnhf : https://huggingface.co/BAAI百度百科 https://baike.baidu.co…
阅读更多...
物联网云组态是什么？部署物联网云组态有什么作用？

物联网云组态是什么？部署物联网云组态有什么作用？

在信息化与工业化的深度融合进程中&#xff0c;物联网云组态以其独特的优势&#xff0c;正在成为企业数字化转型的重要工具。那么&#xff0c;物联网云组态究竟是什么呢&#xff1f;部署物联网云组态又能给企业带来哪些实质性的好处呢&#xff1f;今天&#xff0c;我们将围绕这…
阅读更多...
2核4G服务器多少钱？阿里云价格30元起

2核4G服务器多少钱？阿里云价格30元起

阿里云2核4G服务器租用优惠价格&#xff0c;轻量2核4G服务器165元一年、u1服务器2核4G5M带宽199元一年、云服务器e实例30元3个月&#xff0c;活动链接 aliyunfuwuqi.com/go/aliyun 活动链接如下图&#xff1a; 阿里云2核4G服务器优惠价格 轻量应用服务器2核2G4M带宽、60GB高效…
阅读更多...
AI智能分析网关V4在养老院视频智能监控场景中的应用

AI智能分析网关V4在养老院视频智能监控场景中的应用

随着科技的快速发展&#xff0c;智能监控技术已经广泛应用于各个领域&#xff0c;尤其在养老院这一特定场景中&#xff0c;智能监控方案更是发挥着不可或缺的作用。尤其是伴随着社会老龄化趋势的加剧&#xff0c;养老院的安全管理问题也日益凸显。为了确保老人的生活安全&#…
阅读更多...
Ruby选择结构实战

Ruby选择结构实战

文章目录 一、Ruby选择结构实战概述二、Ruby选择结构实战案例&#xff08;一&#xff09;闰年判断1、编写程序&#xff0c;实现功能2、程序的解释说明3、运行程序&#xff0c;查看结果 &#xff08;二&#xff09;求解一元二次方程1、编写程序&#xff0c;实现功能2、程序的解释…
阅读更多...
界面控件DevExpress ASP.NET Ribbon组件 - 完美复刻Office 365体验！

界面控件DevExpress ASP.NET Ribbon组件 - 完美复刻Office 365体验！

无论用户是喜欢传统工具栏菜单外观、样式&#xff0c;还是想在下一个项目中复制Office 365 web UI&#xff0c;DevExpress ASP.NET都提供了所需要的工具&#xff0c;帮助用户打造更好的应用程序界面。 P.S&#xff1a;DevExpress ASP.NET Web Forms Controls拥有针对Web表单&a…
阅读更多...
ky10.aarch64安装Jenkins

ky10.aarch64安装Jenkins

参考地址&#xff1a;《安装部署 Jenkins》 前言 有war包和rpm两种安装方式&#xff0c;如果是长期使用更加推荐rpm的安装方式&#xff0c;可以更好的管理Jenkins&#xff1b; 我此次安装jenkins主要用于测试和简单的个人使用&#xff0c;所以选择更轻便的war安装。 1 下载J…
阅读更多...
如何用java使用es

如何用java使用es

添加依赖 如何连接es客户端 RestHighLevelClient 代表是高级客户端 其中hostname&#xff1a;es的服务器地址&#xff0c;prot端口号 &#xff0c;scheme&#xff1a;http还是https 如果不在使用es可以进行关闭&#xff0c;可以防止浪费一些资源 java如何创建索引&#xff1…
阅读更多...
Python RPA简单开发实践（selenium登陆浏览器自动输入密码登陆）

Python RPA简单开发实践（selenium登陆浏览器自动输入密码登陆）

打开csdn博客&#xff0c;简单版 class BS:def __init__(self, url):self.url url# self.password password# self.username usernamedef login_url(self):from selenium import webdriver# 不自动关闭浏览器option webdriver.ChromeOptions()option.add_experimental_opt…
阅读更多...
每日OJ题_牛客_QQ2 微信红包

每日OJ题_牛客_QQ2 微信红包

目录 牛客_QQ2 微信红包 解析代码 牛客_QQ2 微信红包 微信红包_牛客题霸_牛客网 解析代码 class Gift { public: int getValue(vector<int> gifts, int n) {int cnt 0, ret 0;// for(int i 0; i < n; i) // 摩尔投票法// {// if(cnt 0)// {// ret gifts[i];/…
阅读更多...
STM32不使用中断实现定时器微秒级精确延时

STM32不使用中断实现定时器微秒级精确延时

我们在写代码的时候避免不了要使用延时函数&#xff0c;很多延时函数都是使用中断或者tick来实现的&#xff0c;tick的方式最大到毫秒ms级别&#xff0c;通过中断方式的通用定时器来实现&#xff0c;如果实现1us的延时那么每1us就来一次中断&#xff0c;很影响cpu的效率。 本文…
阅读更多...
【webpack】----错误解决【Cannot read properties of undefined (reading ‘tap‘)】

【webpack】----错误解决【Cannot read properties of undefined (reading ‘tap‘)】

1. 报错场景 安装 webpack-obfuscator 后&#xff0c;进行 js 代码混淆编译的时候报错。 2. 报错截图 3. 错误原因 通常是由于版本不兼容或配置错误引起的。 4. 查询本地 webpack 版本 4.1 查询命令 npm 查询 npm view webpack versionyarn 查询 yarn info webpack ver…
阅读更多...
C++ —— 日期计算器

C++ —— 日期计算器

1. 头文件 #pragma once #include <iostream> using namespace std;class Date { public:Date(int year 1, int month 1, int day 1);int GetMonthDay();bool operator>(const Date& d) const;bool operator>(const Date& d)const;bool operator<(c…
阅读更多...
opencv函数使用查找

opencv函数使用查找

opencv官方文档地址&#xff1a;https://docs.opencv.org/4.x/index.html 先选对应的版本opencv-python 以这个函数为例子 model cv2.face.LBPHFaceRecognizer.create() 点开后找face类的LBP里面就有create函数的用法
阅读更多...
vue 安装脚手架报错 certificate has expired

vue 安装脚手架报错 certificate has expired

vue 安装脚手架的时候报错&#xff0c;报错信息如下&#xff1a; 错误信息&#xff1a;npm ERR! request to https://registry.npm.taobao.org/vue%2fcli failed, reason: certificate has expired 翻译&#xff1a;npm ERR&#xff01;请求到https://registry.npm.taobao.org…
阅读更多...
python的街道办管理系统flask-django-php-nodejs

python的街道办管理系统flask-django-php-nodejs

随着世界经济信息化、全球化的到来和互联网的飞速发展&#xff0c;推动了各行业的改革。若想达到安全&#xff0c;快捷的目的&#xff0c;就需要拥有信息化的组织和管理模式&#xff0c;建立一套合理、动态的、交互友好的、高效的街道办管理系统。当前的信息管理存在工作效率低…
阅读更多...
python的BBS论坛系统flask-django-nodejs-php

python的BBS论坛系统flask-django-nodejs-php

为了更好地发挥本系统的技术优势&#xff0c;根据BBS论坛系统的需求&#xff0c;本文尝试以B/S架构设计模式中的django/flask框架&#xff0c;python语言为基础&#xff0c;通过必要的编码处理、BBS论坛系统整体框架、功能服务多样化和有效性的高级经验和技术实现方法&#xff…
阅读更多...
XS2186，八通道，兼容IEEE802.3at/af，以太网供电PSE控制器

XS2186，八通道，兼容IEEE802.3at/af，以太网供电PSE控制器

XS2186是一个八通道、供电设备&#xff08;PSE&#xff09;电源 控制器&#xff0c;设计用于IEEE 802.3at/af兼容PSE。器 件提供用电设备&#xff08;PD&#xff09;检测、分级、限流以及负载 断开检测。器件支持全自动工作、软件编程和外挂 eeprom。器件还支持最新二事件分级。…
阅读更多...
4核16G服务器租用优惠价格，26.52元1个月，半年149元

4核16G服务器租用优惠价格，26.52元1个月，半年149元

阿里云4核16G服务器优惠价格26.52元1个月、79.56元3个月、149.00元半年&#xff0c;配置为阿里云服务器ECS经济型e实例ecs.e-c1m4.xlarge&#xff0c;4核16G、按固定带宽 10Mbs、100GB ESSD Entry系统盘&#xff0c;活动链接 aliyunfuwuqi.com/go/aliyun 活动链接打开如下图&a…
阅读更多...
C语言基础知识复习（考研）

C语言基础知识复习（考研）

&#xff08;1&#xff09;C语言文件操作 1 什么是文件 文件有不同的类型&#xff0c;在程序设计中&#xff0c;主要用到两种文件&#xff1a; (1)程序文件。包括源程序文件(后缀为.c)、目标文件(后缀为.obj)、可执行这种文件的内容是程序代码。 (2)数据文件。文件的内容不是…
阅读更多...
最新文章

Copyright @ 2022~2023