QT入门之布局 水平布局、垂直布局、表单布局、网格布局
布局
- 1 简介
- 2 QVBoxLayout 垂直布局
- 3 QHBoxLayout 水平布局
- 4 常用函数
- 4.1 setSpacing()
- 4.2 addSpacing()
- 4.3 setStretch ( int index, int stretch ) 设置拉伸比例
- 4.4 setContentsMargins(int left, int top, int right, int bottom)
- 5 QFormLayout 表单布局
- 6 QGridLayout 网格布局
- 7 布局嵌套
1 简介
布局主要是用来管理多个组件如何排列的。如果没有布局的话,我们可能需要给每个组件都设置一下在界面中的位置,这样就比较麻烦了。有了布局,我们就可以将一些组件放在一个布局中,通过布局去管理各个组件的位置,我们就只需要给布局设置在界面中的位置即可。
在 QT 中一共有 5 种布局,他们的继承关系如下图:
此图来源于博客:QT 的QLayout布局属性
2 QVBoxLayout 垂直布局
QVBoxLayout 其中的 “V” 就是单词 vertical 的简写,垂直的意思,就是该布局中的组件都是垂直方向排列的。
简单示例:
int main(int argc, char *argv[])
{QApplication a(argc, argv);Widget w;QVBoxLayout layout;QPushButton btn1("btn1",&w);//创建 3 个按钮QPushButton btn2("btn2",&w);QPushButton btn3("btn3",&w);layout.addWidget(&btn1);//将按钮添加到布局管理器中layout.addWidget(&btn2);layout.addWidget(&btn3);w.setLayout(&layout);//设置当前界面(widget)的布局管理器w.show();return a.exec();
}
如上图所示,3 个按钮就按垂直方向显示在了界面上。
3 QHBoxLayout 水平布局
水平布局与垂直布局相反,其中的各个组件按照水平方向进行排列。
简单示例:
int main(int argc, char *argv[])
{QApplication a(argc, argv);Widget w;QHBoxLayout layout;QPushButton btn1("btn1",&w);//创建 3 个按钮QPushButton btn2("btn2",&w);QPushButton btn3("btn3",&w);layout.addWidget(&btn1);//将按钮添加到布局管理器中layout.addWidget(&btn2);layout.addWidget(&btn3);w.setLayout(&layout);//设置当前界面(widget)的布局管理器w.show();return a.exec();
}
4 常用函数
4.1 setSpacing()
该方法用于设置布局容器中各个组件的距离。
layout.setSpacing(50);
我们将前面的水平布局的距离的 layout 设置 spacing 为 50 :
可以看到,三个按钮之间的距离变长了。
4.2 addSpacing()
该方法不要与 setSpacing() 方法混淆了,addSpacing() 用于在布局容器的任意位置加上指定大小的区域。
layout.addWidget(&btn1);//将按钮添加到布局管理器中layout.addWidget(&btn2);layout.addSpacing(50);layout.addWidget(&btn3);
上述代码表示在 btn2 和 btn3 之间增加 50 单位的区域:
4.3 setStretch ( int index, int stretch ) 设置拉伸比例
该函数用于设置布局容器中某个组件的拉伸比例。
index:容器中某个组件的下标
stretch:拉伸比例
int main(int argc, char *argv[])
{QApplication a(argc, argv);Widget w;QHBoxLayout layout;QPushButton btn1("btn1",&w);//创建 3 个按钮QPushButton btn2("btn2",&w);QPushButton btn3("btn3",&w);layout.addWidget(&btn1);//将按钮添加到布局管理器中layout.addWidget(&btn2);layout.addWidget(&btn3);//设置拉伸比例layout.setStretch(0,2);//btn1 拉伸比例设置为 2layout.setStretch(1,2);//btn2 拉伸比例设置为 2layout.setStretch(2,1);//btn3 拉伸比例设置为 1w.setLayout(&layout);//设置当前界面(widget)的布局管理器w.show();return a.exec();
}
运行程序后,我们稍微调整一下窗口大小,如上图所示,btn1 和 btn2 都变大了,btn3 没有变化,但是 btn1 与 btn2 并没有变成 btn3 的 2 倍,因为此时的窗口大小还不足以显示 btn1 、btn2 扩大两倍后的情形。当我们再次调整窗口大小:
此时 btn1 与 btn2 差不多有 btn3 的两倍大了。如果我们再将窗口调大:
btn3 也变大了。整个过程中,btn1(btn2) 与 btn3 的大小比例一介于 btn3 <= btn1 <=2btn3。
setStretch ( int index, int stretch ) 方法还有两个类似的方法:
//设置部件拉伸系数,如果*widget存在,则设置成功,返回true
bool QBoxLayout::setStretchFactor ( QWidget * widget, int stretch );
//设置子布局拉伸系数,如果*layout存在,则设置成功,返回true
bool QBoxLayout::setStretchFactor ( QLayout * layout, int stretch );
layout.addWidget(&btn1);//将按钮添加到布局管理器中layout.addWidget(&btn2);layout.addWidget(&btn3);layout.setStretchFactor(&btn1,2);layout.setStretchFactor(&btn2,2);layout.setStretchFactor(&btn3,1);
该段代码运行后的效果与前面的示例一致。
4.4 setContentsMargins(int left, int top, int right, int bottom)
该函数用于设置布局容器中组件到容器的 4 个方向的距离。
layout.setContentsMargins(50,100,70,200);
5 QFormLayout 表单布局
该布局可以快速的帮我们完成一个表单界面,如下图:
这个布局比较简单,直接上代码:
int main(int argc, char *argv[]){QApplication a(argc, argv);Widget w;QFormLayout layout;QLineEdit* text1 = new QLineEdit();QLineEdit* text2 = new QLineEdit();QLineEdit* text3 = new QLineEdit();layout.addRow("Name:",text1);layout.addRow("Email:",text2);layout.addRow("Adress:",text3);layout.setSpacing(10);layout.setLabelAlignment(Qt::AlignRight);//设置标签的对齐方式w.setLayout(&layout);//设置当前界面(widget)的布局管理器w.show();return a.exec();
}
6 QGridLayout 网格布局
该布局将布局区域划分成很多个小格子,其中的组件占一个或多个格子。
常用函数:
//表示将 widget 放在网格的第几行第几列
void addWidget ( QWidget * widget, int row, int column, Qt::Alignment alignment = 0 );//表示将 widget 放在网格的第几行第几列 , rowSpan 表示该组件占几行,columnSpan 表示该组件占几列
void addWidget ( QWidget * widget, int fromRow, int fromColumn, int rowSpan, int columnSpan, Qt::Alignment alignment = 0 );//设置第几列的拉伸系数
void setColumnStretch(int column,int stretch);
//设置第几行的拉伸系数
void setRowStretch(int row,int stretch);
简单示例:
int main(int argc, char *argv[]){QApplication a(argc, argv);Widget w;QGridLayout layout;QPushButton btn1("btn1",&w);QPushButton btn2("btn2",&w);QPushButton btn3("btn3",&w);QPushButton btn4("btn4",&w);QPushButton btn5("btn5",&w);QPushButton btn6("btn6",&w);layout.addWidget(&btn1,0,0,1,2);//第一行,第一列,占一行两列layout.addWidget(&btn2,1,0,1,1);//第二行,第一列,占一行一列layout.addWidget(&btn3,1,1);//第二行,第二列,占一行一列layout.addWidget(&btn4,2,0,2,3);//第三行,第一列,占两行三列//由于 btn4 占了两行,所以后面的要从第五行开始layout.addWidget(&btn5,4,0,1,2);//第五行,第一列,占一行两列//由于 btn5 占了两列,所以 btn6 要从三列开始layout.addWidget(&btn6,4,2,1,1);//第五行,第三列,占一行一列w.setLayout(&layout);//设置当前界面(widget)的布局管理器w.show();return a.exec();
}
使用网格布局时需要注意的是,当前添加的 widget 所在的行和列位置,例如前面的 btn6 的列应该设置为 2 而不是 1。
7 布局嵌套
布局嵌套就是指一个布局可以嵌套在另一个布局中,比如网格布局的某一行某一列可以设置为一个水平布局。
我们以前面的例子做一个简单示例,将一个水平布局作为界面的主布局,然后将前面表单示例代码与网格布局的示例代码都设置到这个水平布局上。
int main(int argc, char *argv[]){QApplication a(argc, argv);Widget w;QHBoxLayout hlayout;//主布局QGridLayout gridLayout;QPushButton btn1("btn1",&w);QPushButton btn2("btn2",&w);QPushButton btn3("btn3",&w);QPushButton btn4("btn4",&w);QPushButton btn5("btn5",&w);QPushButton btn6("btn6",&w);gridLayout.addWidget(&btn1,0,2,1,2);gridLayout.addWidget(&btn2,1,0,1,1);gridLayout.addWidget(&btn3,1,1);gridLayout.addWidget(&btn4,2,0,2,3);gridLayout.addWidget(&btn5,4,0,1,2);gridLayout.addWidget(&btn6,4,2,1,1);QFormLayout formLayout;QLineEdit* text1 = new QLineEdit();QLineEdit* text2 = new QLineEdit();QLineEdit* text3 = new QLineEdit();formLayout.addRow("Name:",text1);formLayout.addRow("Email:",text2);formLayout.addRow("Adress:",text3);//将表单布局、网格布局作为子布局添加到主布局中hlayout.addLayout(&formLayout);hlayout.addLayout(&gridLayout);w.setLayout(&hlayout);//设置当前界面(widget)的布局管理器w.show();return a.exec();
}
布局的嵌套是很随意的,可以无限的套娃。不过表单布局没有子布局,它只有 addRow()。
QT入门之布局 水平布局、垂直布局、表单布局、网格布局相关推荐
- CSS学习笔记(九)display: inline-block,CSS 布局- 水平和垂直对齐
CSS 布局 - display: inline-block display: inline-block 与 display: inline 相比,主要区别在于 display: inline-blo ...
- Bootstrap表单的可选布局
Bootstrap还提供了 3 个辅助类 .form-search..form-inline..form-horizontal,用来实现搜索表单.行内表单.水平布局的表单. 1.搜索表单 为 < ...
- Bootstrap表单的默认布局
Bootstrap 自带了基本的表单样式,不需要添加任何辅助类,即可使用表单的默认布局.默认布局中,表单元素采用垂直布局,标签和输入框使用顶对齐方式.如: <form> <fie ...
- 实战课【1】jQuery实现表单校验及布局
实战课[1]jQuery实现表单校验及布局 在学习完html,css,js,mysql,jdbc,Servlet,filter,ajax,maven等web基础知识后,开始进行项目实战.此文就会记录在 ...
- html flex 表单样式,Flexbox 布局的最简单表单的实现
弹性布局(Flexbox)逐渐流行,越来越多人使用,因为它写 CSS 布局真是太方便了. 三年前,我写过 Flexbox 的介绍(上,下),但是有些地方写得不清楚.今天,我看到一篇 教程 ,才意识到一 ...
- 基于VUE的ElementUi可视化表单设计器布局器
码农苦码农懂的个人空间 工作日志 正文 基于VUE的ElementUi可视化表单设计器布局器 顶 原 码农苦码农懂 发布于 09/11 15:35 字数 1187 阅读 41 收藏 0 点赞 1 评论 ...
- Flutter布局锦囊---蜡笔画的表单
设计给的效果如下: 拿到设计后,先把整体拆分成几个部分: "手机号输入框",使用自定义的登录表单字段组件实现的输入框. "验证码输入框",使用自定义的登录表单验 ...
- html 栅格表单,col 栅格布局
## col 栅格布局规则 ### 该文档不再维护,新版文档地址: [form-create 文档](http://fc.gd8.top) **所有组件均支持布局配置规则,详细参考**[iview栅格 ...
- QT程序“用户基本资料修改”的功能表单
修改用户资料.最外层是一个分割窗体QSplitter,分割窗口的左侧是一个QListWidget,右侧是一个QVBoxLayout,这个布局包括一个堆栈窗体QStackWidget和一个按钮布局.在这 ...
- H5 css3入门 基础练习特效、动画、表单
知识回顾: 1)SQL优化,规范,(本身这些细碎的知识点,) 不是马上掌握,面对这么多it技术,扩展眼界 jsp+servlet java做页面,马上被市场淘汰 初学者 a. 提高打字速度, 1- 每 ...
最新文章
- CentOS系统安装(上):图形/文本界面安装
- html js 如何判断页面是第一次访问还是重复刷新访问,使用JS判断页面是首次被加载还是刷新...
- 编程之美-快速费波拉契数列
- pano2vr怎么制作漫游_如何制作全景图?Pano2VR制作FLASH全景图教程
- Airtag小贵但好用?Beacon防丢功能体验
- 深入浅出计算机组成原理:冒险和预测(一)-hazard是“危”也是“机(第22讲)...
- Z39.50客户端源代码(C#)
- 怎么获取微信公众号的音频视频
- Matlab曲线拟合(2)(自用笔记)
- 高德地图 SDK 的应用 01:绘制多边形区域图
- 京东之鉴:兄弟是兄弟,员工是员工!-千氪
- 第八节 Electron主进程和渲染进程之间的通信
- 安科瑞智能操控无线测温装置在江苏某化工产业园项目的应用
- Unity 入门笔记 - 05 - 动画事件类音效对话框
- 制造商是指什么呢? 主要是什么呢?
- 2021最后一次Java面试,java工程师职业生涯规划
- 基于egret的mud客户端(一)
- 创建python虚拟环境,安装Django
- 结构体,共用体与枚举
- 一本正经前端的面试清单
热门文章
- Web前端知识——JavaScript
- GitLab CI/CD 配置指南 .gitlab-ci.yml文件的配置
- android 沉浸式按钮,android – 如何完全退出沉浸式全屏模式?
- console接口配置登录密码
- Python爬虫抓取链家二手房数据
- 企业级需求管理工具选型报告(2020年3月20日)
- HTML5浪漫生日祝福电子贺卡网页模板(HTML5+CSS3+JS)_520表白/七夕情人节表白/告白网页制作/生日快乐html模板...
- 罗技无线键盘linux能用吗,罗技多款产品能否只用一个无线接收器
- 301work 不积跬步无以至千里Asp.net程序
- Activiti学习之根据条件判断流程走向