Qt6教程之二(1) 布局 Layouts

这篇具有很好参考价值的文章主要介绍了Qt6教程之二(1) 布局 Layouts。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

(一)Qt布局 Layouts

若你的电脑还未安装Qt,那么请转至上篇文章 Qt-6下载安装教程 按照指导进行操作。

本篇所讲的内容为Qt布局,为了节省时间,所用项目也是使用上篇的hello world 。

那么什么是布局呢?

简单来说,布局就是有效组织屏幕上显示的各类资源的模板,如按钮、文本框、图片、视频等;

Qt常见的布局有四种:

vertical layout  垂直布局,horizontal layout 水平布局,grid layout 网格布局,form layout  表格布局。

Qt6教程之二(1) 布局 Layouts

下面将分为鼠标拖拽式实现及纯代码实现两种方式进行演示,对于这两种方式将进行简单介绍。

对于鼠标拖拽式实现界面元素摆放的方式非常简单、快捷、高效,但是不灵活;

对于纯代码实现绘制界面元素的方式则比较灵活(如隐藏、销毁、位置变动),但是实现难度较大(需要写很多代码)。

鼠标拖拽式演示四种布局

1、vertical layout  垂直布局

垂直布局是把控件进行垂直排列,下面我们在ui界面拉取五个button按钮,然后选择垂直布局。

首先拖取五个push button按钮,如下

Qt6教程之二(1) 布局 Layouts

 鼠标左键选中 vertical layout  垂直布局不放,拉到右边的面板上面后松开鼠标,即可完成一个垂直布局的放置,拖过来之后会显示一个红色的边框,可按照实际需求调整大小。

Qt6教程之二(1) 布局 Layouts

按下鼠标左键,以框选的方式选中五个按钮,然后按住鼠标左键不放把五个按钮拖入vertical layout布局中,

Qt6教程之二(1) 布局 Layouts 按钮拖入后垂直布局里面后,按钮自动以垂直排列,

Qt6教程之二(1) 布局 Layouts

程序运行后的效果:

Qt6教程之二(1) 布局 Layouts

2、horizontal layout  水平布局

水平布局是把控件进行水平排列,把上面的垂直布局更换为水平布局即可。

首先按住Ctrl+鼠标左键依次点击上一步垂直布局中的五个按钮,之后按住鼠标左键不放把五个按钮拖出垂直布局,

Qt6教程之二(1) 布局 Layouts

Qt6教程之二(1) 布局 Layouts 接着在拖入一个水平布局放到UI面板的空白区域,

Qt6教程之二(1) 布局 Layouts

按住鼠标左键以框选方式选中五个按钮 ,拖入水平布局中,

Qt6教程之二(1) 布局 Layouts

最后完成五个按钮的水平布局,

Qt6教程之二(1) 布局 Layouts

3、grid layout  网格布局

网格布局是把控件以行列的方式进行排列,把上面的水平布局更换为网格布局即可。

具体操作步骤与上面的操作类似,但是网格会对控件的大小做自动拉伸(自动调整宽、高),以确保每一个单元格中的控件大小一致。

选中一个按钮按住鼠标左键不放在拖到网格布局的左边或右边边缘,当网格布局的左侧或右侧出现蓝色条状时放开鼠标,此时会网格布局会增加一列,并把该按钮放进去。

相同的道理,选中一个按钮按住鼠标左键不放在拖到网格布局的上边或下边边缘,当网格布局的上侧或下侧出现蓝色条状时放开鼠标,此时会网格布局会增加一行,并把该按钮放进去。

Qt6教程之二(1) 布局 Layouts

最终效果如下,

Qt6教程之二(1) 布局 Layouts 是不是非常简单呢,赶紧试试吧,咋们评论区见!

4、form layout  表单布局

表格布局是把控件以行列的方式进行排列,把上面的网格布局更换为表格布局即可。

具体操作步骤与上面的操作类似,但是表格会对控件的大小做自动拉伸(自动调整宽、高),以确保一列中的每一个单元格中的控件大小一致。

选中一个按钮按住鼠标左键不放在拖到表格布局的左边或右边边缘,当表格布局的左侧或右侧出现蓝色条状时放开鼠标,此时会表格布局会增加一列,并把该按钮放进去。

相同的道理,选中一个按钮按住鼠标左键不放在拖到表格布局的上边或下边边缘,当表格布局的上侧或下侧出现蓝色条状时放开鼠标,此时会表格布局会增加一行,并把该按钮放进去。

Qt6教程之二(1) 布局 Layouts

布局效果:

Qt6教程之二(1) 布局 Layouts

采用鼠标拖拽式布局不用手写一行代码即可实现,是不是非常方便呢,欢迎评论区留言!

纯代码实现四种布局

这里需要说明一下: 纯代码实现的方式与拖拽式的实现方式差异非常大,纯代码实现控件布局的方式有五种,每种布局管理器对应一个类,分别是 QVBoxLayout(垂直布局)、QHBoxLayout(水平布局)、QGridLayout(网格布局)、QFormLayout(表格布局)和 QStackedLayout(分组布局),它们的继承关系如下图所示:

Qt6教程之二(1) 布局 Layouts

 总之,一种布局就是一个类,这个类提供了一系列API供开发者使用,用于设置布局的各种属性。

下面将逐一进行介绍与示范。

准备工作

首先需要重新创建一个Qt工程文件,名称叫est2,记得取消 ui文件的选项,如下:

Qt6教程之二(1) 布局 Layouts

 工程文件名改为test2,点击下一步,

Qt6教程之二(1) 布局 Layouts

 保持默认继续下一步,

Qt6教程之二(1) 布局 Layouts

取消勾选ui文件,其他保持默认,继续下一步, 

Qt6教程之二(1) 布局 Layouts

剩余的步骤一直下一步即可,最后点击完成,至此test2工程创建完成啦!

接下来依次使用纯代码的方式来实现开头介绍的五种布局管理器,其实质就是使用代码的方式实现了UI界面上的四种布局(垂直、水平、网格、表格布局)。 

为了方便起见,我们直接在程序入口函数 main.cpp里写代码,其他文件不做任何改变,如下:

Qt6教程之二(1) 布局 Layouts

废话不多说,那咋们开始敲代码吧!

1、vertical layout  垂直布局

main.cpp全部代码如下所示,

#include "mainwindow.h"

#include <QApplication>
#include <QPushButton>
#include <QVBoxLayout>
#include<QWidget>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    //创建主窗口
    QWidget widget;
    //设置窗口大小
    widget.setGeometry(100,100,800,400);
    //设置窗口标题
    widget.setWindowTitle("垂直布局");
    //创建垂直布局管理器
    QVBoxLayout *layout=new QVBoxLayout;
    //设置布局管理器中所有控件从下往上依次排列
    layout->setDirection(QBoxLayout::BottomToTop);

    //创建5个push button对象
    QPushButton btn("a");
    QPushButton btn2("b");
    QPushButton btn3("c");
    QPushButton btn4("d");
    QPushButton btn5("e");

    //将五个按钮加入布局中
    layout->addWidget(&btn);
    layout->addWidget(&btn2);
    layout->addWidget(&btn3);
    layout->addWidget(&btn4);
    layout->addWidget(&btn5);

    //将布局管理器加入到widget管理器中
    widget.setLayout(layout);

    //把widget窗口显示出来
    widget.show();


    return a.exec();
}

运行效果:

Qt6教程之二(1) 布局 Layouts

2、horizontal layout  水平布局

与水平布局不一样的代码就一句 :QHBoxLayout *layout=new QHBoxLayout;   就是把原来的垂直布局改为水平布局。

main.cpp中的全部代码如下,

#include "mainwindow.h"

#include <QApplication>
#include <QPushButton>
#include <QVBoxLayout>
#include<QWidget>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    //创建主窗口
    QWidget widget;
    //设置窗口大小
    widget.setGeometry(100,100,800,400);
    //设置窗口标题
    widget.setWindowTitle("水平布局");
    //创建水平布局管理器
    QHBoxLayout *layout=new QHBoxLayout;
    //设置布局管理器中所有控件从左往右依次排列
    layout->setDirection(QBoxLayout::LeftToRight);

    //创建5个push button对象
    QPushButton btn("a");
    QPushButton btn2("b");
    QPushButton btn3("c");
    QPushButton btn4("d");
    QPushButton btn5("e");

    //将五个按钮加入布局中
    layout->addWidget(&btn);
    layout->addWidget(&btn2);
    layout->addWidget(&btn3);
    layout->addWidget(&btn4);
    layout->addWidget(&btn5);

    //将布局管理器加入到widget管理器中
    widget.setLayout(layout);

    //把widget窗口显示出来
    widget.show();


    return a.exec();
}

运行效果如下:

Qt6教程之二(1) 布局 Layouts

3、grid layout  网格布局

网格布局与上面的两个布局不一样的地方主要是需要指定行列号,若不指定则默认按照一列排列。

//创建网格布局管理器
    QGridLayout *layout=new QGridLayout;


    //将6个按钮加入布局中,并指定各个控件的位置(行列号);
    layout->addWidget(&btn,0,0);
    layout->addWidget(&btn2,0,2);
    layout->addWidget(&btn3,1,0);
    layout->addWidget(&btn4,2,1);
    layout->addWidget(&btn5,2,2);
    //按钮5在4行1列,同时合并3行3列的区域给按钮5使用
    layout->addWidget(&btn6,3,0,3,3);

//按钮5在5行1列,同时合并3行3列的区域给按钮5使用
    layout->addWidget(&btn5,5,1,3,3);

main.cpp全部代码如下:

#include "mainwindow.h"

#include <QApplication>
#include <QPushButton>
#include <QVBoxLayout>
#include<QWidget>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    //创建主窗口
    QWidget widget;
    //设置窗口大小
    widget.setGeometry(100,100,800,400);
    //设置窗口标题
    widget.setWindowTitle("网格布局");
    //创建网格布局管理器
    QGridLayout *layout=new QGridLayout;

    //创建5个push button对象
    QPushButton btn("a");
    QPushButton btn2("b");
    QPushButton btn3("c");
    QPushButton btn4("d");
    QPushButton btn5("e");
    QPushButton btn6("f");

    //将五个按钮加入布局中,并指定各个控件的位置(行列号);
    layout->addWidget(&btn,0,0);
    layout->addWidget(&btn2,0,2);
    layout->addWidget(&btn3,1,0);
    layout->addWidget(&btn4,2,1);
    layout->addWidget(&btn5,2,2);
    //按钮5在4行1列,同时合并3行3列的区域给按钮5使用
    layout->addWidget(&btn6,3,0,3,3);

    //将布局管理器加入到widget管理器中
    widget.setLayout(layout);

    //把widget窗口显示出来
    widget.show();


    return a.exec();
}

执行结果:

Qt6教程之二(1) 布局 Layouts

4、form layout  表单布局

QFormLayout 只包含 2 列(不限制行数),且第一列放置标签,第二列放置输入框,总体实现代码与上面的类似,关键代码只有如下几行:

 //创建表单布局管理器
    QFormLayout *layout=new QFormLayout;

    //设置表单中的标签都位于控件的上方
    //layout->setRowWrapPolicy(QFormLayout::WrapAllRows);

    //添加 5 行输入框和标签
        layout->addRow("Name:",new QLineEdit());
        layout->addRow("Email:",new QLineEdit());
        layout->addRow("Adress:",new QLineEdit());
        layout->addRow("QQ:",new QLineEdit());
        layout->addRow("Wechat:",new QLineEdit());


        //设置行间距和列间距为 10
        layout->setSpacing(10);

main.cpp全部代码如下:

#include "mainwindow.h"

#include <QApplication>
#include <QPushButton>
#include <QVBoxLayout>
#include<QWidget>
#include<QFormLayout>
#include <QLineEdit>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    //创建主窗口
    QWidget widget;
    //设置窗口大小
    widget.setGeometry(100,100,800,400);
    //设置窗口标题
    widget.setWindowTitle("表单布局");
    //创建表单布局管理器
    QFormLayout *layout=new QFormLayout;

    //设置表单中的标签都位于控件的上方
    //layout->setRowWrapPolicy(QFormLayout::WrapAllRows);

    //添加 5 行输入框和标签
        layout->addRow("Name:",new QLineEdit());
        layout->addRow("Email:",new QLineEdit());
        layout->addRow("Adress:",new QLineEdit());
        layout->addRow("QQ:",new QLineEdit());
        layout->addRow("Wechat:",new QLineEdit());


        //设置行间距和列间距为 10
        layout->setSpacing(10);

    //将布局管理器加入到widget管理器中
    widget.setLayout(layout);

    //把widget窗口显示出来
    widget.show();


    return a.exec();
}

5、QStackedLayout 分组布局

QStackedLayout 布局管理器能容纳多个控件或者窗口,但是每次只能显示其中一个。这里的代码与上面几个区别较大,可以简单理解为上面几个布局的综合应用。如下:

#include <QApplication>
#include <QWidget>
#include <QPushButton>
#include <QLabel>
#include <QLineEdit>
#include <QStackedLayout>
#include <QListWidget>
#include <QHBoxLayout>


int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    //创建主窗口
    QWidget widget;
    widget.setWindowTitle("分组布局");
    //设置窗口布局
    widget.setGeometry(100,100,600,400);

    //向主窗口中添加一个水平布局控件
    QHBoxLayout *layout=new QHBoxLayout;

    //创建一个列表
    QListWidget listWidget(&widget);
    listWidget.setMinimumWidth(150);
    listWidget.setFont(QFont("宋体",14));
    listWidget.addItem("QPushButton");
    listWidget.addItem("QLabel");
    listWidget.addItem("QLineEdit");

    //新建 3 个窗口,分别放置文本框、按钮和单行输入框
    QWidget w1;
    w1.setMinimumSize(600,400);
    QPushButton but1("按钮",&w1);

    QWidget w2;
    w2.setMinimumSize(600,400);
    QLabel lab1("文本框",&w2);

    QWidget w3;
    w3.setMinimumSize(600,400);
    QLineEdit edit("单行输入框",&w3);

    //创建一个分组布局,将 3 个窗口添加到分组控件中
    QStackedLayout *stackedLayout = new QStackedLayout;
    stackedLayout->addWidget(&w1);
    stackedLayout->addWidget(&w2);
    stackedLayout->addWidget(&w3);

    //layout 第一列添加 QListWidget 控件,第二列添加分组布局控件,设置它们的伸缩系数比为 1:4
    layout->addWidget(&listWidget,1);
    layout->addLayout(stackedLayout,4);
    //将 layout 水平布局控件添加到 widget 窗口中
    widget.setLayout(layout);
    widget.show();
    //连接信号和槽,实现当点击列表中的某一项,切换分组布局管理器显示的控件
    QObject::connect(&listWidget,&QListWidget::currentRowChanged,stackedLayout,&QStackedLayout::setCurrentIndex);
    return a.exec();
}

程序运行后,点击的效果:

Qt6教程之二(1) 布局 Layouts

 至此,Qt的控件布局就讲完了,咋们下期见!

下一篇教程:Qt控件之Spacers(支撑 )

上一篇教程: Qt6教程之一 Qt介绍及准备工作文章来源地址https://www.toymoban.com/news/detail-481730.html

到了这里,关于Qt6教程之二(1) 布局 Layouts的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Qt6.2教程——3.Qt信号和槽

    信号和槽是Qt中一个强大的特性,用于处理对象之间的通信。它们是一种事件处理机制,允许一个对象在某个事件发生时通知另一个对象。 定义 : 信号是一个QObject的成员函数,当某个特定事件发生时,它被自动调用。它可以与一个或多个槽关联。 声明 : 在Qt类的声明中,信号

    2024年02月10日
    浏览(52)
  • Qt6 c++教程2 Qt Creator简介

    Qt Creator是Qt自带的集成开发环境(IDE),用于跨平台应用程序开发。在本章中,您将学习Qt Creator集成开发环境的基础知识,并了解集成开发环境的用户界面 (UI)。我们还将了解如何在 Qt Creator中创建和管理项目。本Qt 模块包括使用Qt Creator开发一个简单的Qt应用程序、快捷方式

    2024年02月05日
    浏览(45)
  • Qt6.2教程——7.QT常用控件QTextEdit

    QTextEdit 是 Qt 的一个用于编辑和显示纯文本和富文本的控件。它是功能强大且高度灵活的,可以用于实现多种任务,如文本编辑,数据表示,以及HTML的显示和编辑等。QTextEdit 支持富文本功能,这意味着它可以显示各种字体,颜色和文字格式。同时,QTextEdit 也支持文本搜索,

    2024年02月11日
    浏览(42)
  • Qt6.2教程——5.QT常用控件QLabel

    QLabel是Qt库中一个非常基础且重要的类。它主要用于在图形用户界面(GUI)中展示文本或图片。最常见的用法就是在窗口上显示一段文字或者标签,比如“用户名”,“密码”等等。QLabel继承自QFrame,因此它也可以具有框架。它能处理富文本格式,这意味着您可以改变部分文本的

    2024年02月10日
    浏览(44)
  • Qt6入门教程 6:Qt元对象系统

    目录 一.什么是Qt元对象系统? 二.编译时Qt Creator偷摸做了哪些事情? 1.uic 2.rcc 3.moc Qt中的元对象系统(Meta-Object System)提供了对象间通信的信号和槽机制、运行时类型信息和动态属性系统。元对象系统是基于以下3个条件的: ●该类必须继承自QObject类; ●必须在类的私有声

    2024年01月18日
    浏览(58)
  • Qt6入门教程 4:Qt Creator常用技巧

    在上一篇Qt6入门教程 3:创建Hello World项目中,通过创建一个Qt项目,对Qt Creator已经有了比较直观的认识,本文将介绍它的一些常用技巧。 Qt Creator启动后默认显示欢迎页面 创建项目已经用过了,打开项目也很简单,就是打开一个已经存在的项目。 项目历史记录非常有用,能

    2024年02月03日
    浏览(55)
  • 【QT教程】QT6QFuture与并发

    QT6QFuture与并发 使用AI技术辅助生成 QT界面美化视频课程 QT性能优化视频课程 QT原理与源码分析视频课程 QT QML C++扩展开发视频课程 免费QT视频课程 您可以看免费1000+个QT技术视频 免费QT视频课程 QT统计图和QT数据可视化视频免费看 免费QT视频课程 QT性能优化视频免费看 免费Q

    2024年04月24日
    浏览(38)
  • Qt6 c++教程9测试&调试

    调试和测试是软件开发的重要组成部分。在本章中,你将学习如何调试 Qt 项目、不同的调试技术以及 Qt 支持的调试器。调试是发现错误或不希望出现的行为的根本原因并加以解决的过程。我们还将讨论使用Qt Test框架进行单元测试。Qt Test是基于Qt的应用程序和库的单元测试框

    2024年02月05日
    浏览(43)
  • QT基础教程之二 第一个Qt小程序

    在Qt程序中,最常用的控件之一就是按钮了,首先我们来看下如何创建一个按钮 上面代码中,一个按钮其实就是一个QPushButton类下的对象,如果只是创建出对象,是无法显示到窗口中的,所以我们需要依赖一个父窗口,也就是指定一个父亲利用setParent函数即可,如果想设置按

    2024年02月11日
    浏览(41)
  • Linux Qt6 安装教程及错误解决

    在Linux环境,通常为Ubuntu,安装Qt开发环境,与Windows安装相比,还是稍显繁琐,需要多做几个步骤。 这里的Ubuntu版本采用的是 ubuntu-22.04.2-desktop-amd64 ,所以,比旧版本会少很多坑,但本文会尽量写出可能遇到的坑。 这里采用镜像地址进行下载,避免网络过慢。 镜像地址:h

    2024年02月16日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包