Python GUI教程(六):使用Qt设计师进行窗口布局

本篇要点

  • 使用Qt设计师布局我们的窗口部件;
  • 垂直布局;
  • 水平布局;
  • 网格布局;
  • 使用间隔;
  • 使用“伙伴”将label标签与窗口部件进行连接。

下面开始

在Qt中,我们可以直接从左侧的窗口部件栏中拖拽一个布局部件到GUI窗口中,然后再将具体的窗口部件拖拽到布局部件中,这样窗口部件就会自动进行相应方式的布局。

垂直布局

从左侧面板的“Layouts”栏中拖拽“Vertical Layout”到GUI窗口中,设置好布局大小,再在“Buttons”栏中拖拽3个“Push Button”到设置好大小的“Vertical Layout”中:

水平布局

从左侧面板的“Layouts”栏中拖拽“Horizontal Layout”到GUI窗口中,设置好布局大小,再在“Buttons”栏中拖拽3个“Push Button”到设置好大小的“Horizontal Layout”中:

水平布局、垂直布局的另一种方式

上面我们使用的是先设置一个布局部件,再将窗口部件放入布局部件之中布局方式。除此之外,我们还可以先在GUI窗口中放置窗口部件,框选需要进行布局的部件,再使用工具栏中的“水平布局”、“垂直布局”按钮对窗口部件进行布局管理:

网格布局

与垂直布局和水平布局一样,网格布局也可以使用上述的两种方法来对窗口部件进行布局管理:

嵌套布局

除了对部件进行布局之外,我们还可以在网格中再进行嵌套布局:

容器布局

除了使用布局控件之外,我们还能使用容器进行粗略的布局,下面以groupBox容器作为演示:

使用“Spacer”间隔

我们在布局部件中放置的窗口部件都是等距离的,如果我们需要对其中某个部件的距离设置远一点呢,可以使用“Spacer”间隔部件。 “Spacer”部件分为两种:

  • Horizontal Spacer:垂直间隔;
  • Vertical Spacer:水平间隔。

间隔部件在左侧部件的“Spacer”栏中,下面我们演示一下:

为标签设置“伙伴”

Pyqt中有一个好用的基本功能就是“伙伴”部件,当用户键入标签的快捷键时,光标的焦点会出现在标签的伙伴上。

例如:我们有一个用户名的标签和一个用户名的输入框,设置用户名标签与用户名输入框为“伙伴”,设置用户名标签的文本为"用户名(&2)",表示用户名标签的快捷键为Alt+2,如果我们按快捷键Alt+2,那么光标的输入符就会移动到用户名的输入框中。

qt设计师中,“伙伴”功能,在工具栏的“编辑伙伴”按钮中:

原文发布于微信公众号 - 州的先生(zmister2016)

原文发表时间:2017-11-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏QQ会员技术团队的专栏

H5直播避坑指南

面对着产品同学不断的询问:为什么 h5 的体验这么差?为什么不能和 app 的播放体验保持一致?我们对着 h5 不明确的文档和不同浏览器的怪异表现欲哭无泪。

42512
来自专栏Albert陈凯

Hadoop数据分析平台实战——190Highcharts介绍离线数据分析平台实战——190Highcharts介绍

离线数据分析平台实战——190Highcharts介绍 Highcharts介绍 Highcharts 是Highsoft提供的一个用纯JavaScript编写...

3319
来自专栏葡萄城控件技术团队

Webpack4干货分享(二),使用loader处理scss,图片以及转换JS

今天继续我们的Webpack 4入门教程。在介绍了Webpack的基本概念之后,是时候更深入一点了。这次我们会涉及Webpack中非常强大的一个东西:loade...

1072
来自专栏琯琯博客

awesome-javascript-cn

JS 资源列表,内容包括:包管理器、加载器、测试框架、运行器、QA、MVC框架和库、模板引擎、数据可视化、时间轴、编辑器等等。 包管理器 管理着 JavaScr...

4298
来自专栏QQ会员技术团队的专栏

H5直播避坑指南

作者简介: 文赫,2015年加入腾讯,作为前端开发工程师参与过手Q游戏公会,游戏中心,企鹅电竞等项目,具有丰富的移动端开发和直播开发经验。 导语 企鹅电竞项目,...

55010
来自专栏IT大咖说

解读移动端的跨平台开发:TypeScript + Angular

摘要 Google技术经理陈亮将为大家介绍TypeScript和Angular是什么以及如何利用TypeScript和Angular进行移动端的跨平台介绍。 ?...

3518
来自专栏开源项目

揭秘程序员眼中的 Vue 与 Angular | 码云周刊第 32 期

揭秘程序员眼中的 Vue 与 Angular 一 基于 Vue 的项目 1. 项目名称:基于 Vue.js 的 UI 组件库 ? 项目简介:iView 是一套...

3155
来自专栏子勰随笔

SDK开发经验之文档

1608
来自专栏互扯程序

5分钟了解swagger

随着互联网技术的发展,现在的网站架构基本都由原来的后端渲染,变成了:前端渲染、先后端分离的形态,而且前端技术和后端技术在各自的道路上越走越远。

943
来自专栏小特工作室

Navi.Soft31.Mobile框架(含下载地址)

1概述 1.1应用场景         互联网的发展,使用基于Web的软件异军突起,目前占据着相当大的市场份额,而手机,平板电脑等移动端设备的频繁使用,使移动端...

17910

扫码关注云+社区