从0开始界面设计师 Qt Designer

QT程序界面的 一个个窗口、控件，就是像上面那样用相应的代码创建出来的。
但是，把你的脑海里的界面，用代码直接写出来，是有些困难的。
很多时候，运行时呈现的样子，不是我们要的。我们经常还要修改代码调整界面上控件的位置，再运行预览。反复多次这样操作。
可是这样，真的…太麻烦了。
其实，我们可以用QT界面生成器 Qt Designer ，拖拖拽拽就可以直观的创建出程序大体的界面。
怎么运行这个工具呢？
Windows下，运行 Python安装目录下 Scripts\pyside2-designer.exe 这个可执行文件

如果你安装的是pyqt5， 运行 Python安装目录下 Scripts\pyqt5designer.exe 这个可执行文件

根据上面链接的视频讲解，大家初步了解一下 Qt Designer 的使用方法。

通过 Qt Designer 设计的界面，最终是保存在一个ui文件中的。
大家可以打开这个ui文件看看，就是一个XML格式的界面定义。
动态加载UI文件

  1. 执行如下的命令 把UI文件直接转化为包含界面定义的Python代码文件

pyside2-uic main.ui > ui_main.py

如果你安装的是PyQt5，执行如下格式的命令转化
pyuic5 main.ui > ui_main.py
然后在你的代码文件中这样使用定义界面的类
from PySide2.QtWidgets import QApplication,QMainWindow from ui_main import Ui_MainWindow class MainWindow(QMainWindow): def __init__(self): super().__init__() # 使用ui文件导入定义界面类 self.ui = Ui_MainWindow() # 初始化界面 self.ui.setupUi(self) # 使用界面定义的控件，也是从ui里面访问 self.ui.webview.load('http://www.baidu.com') app = QApplication([]) mainw = MainWindow() mainw.show() app.exec_()

那么我们该使用哪种方式比较好呢？动态加载还是转化为Python代码？
白月黑羽建议：通常采用动态加载比较方便，因为改动界面后，不需要转化，直接运行，特别方便。
但是，如果 你的程序里面有非qt designer提供的控件， 这时候，需要在代码里面加上一些额外的声明，而且 可能还会有奇怪的问题。往往就 要采用 转化Python代码的方法。
一个练习
请大家利用Qt Designer 实现一个 类似 Postman 的 HTTP 接口测试工具。
界面如下


要实现的功能，点击这里观看视频说明
这个界面里面用到了常见的几个控件：按钮，单行文本框，多行文本框，组合选择框，表格。
其中 选择框、表格 这两个控件 没有接触过的朋友，可以先学习一下本教程 后面章节 常见控件2 。
如果你对 使用Python语言发送HTTP请求不熟悉，可以先把界面做出来。
然后点击这里，学习白月黑羽的 HTTP Requests 教程后，再去实现。

游客 也可以 做这个练习，并且得到参考代码，点击这里查看
界面布局 Layout

点击这里，边看视频讲解，边学习以下内容
我们前面写的界面程序有个问题，如果你用鼠标拖拽主窗口边框右下角，进行缩放，就会发现里面的控件一直保持原有大小不变。这样会很难看。
我们通常希望，随着主窗口的缩放， 界面里面的控件、控件之间的距离也相应的进行缩放。
Qt是通过界面布局Layout类来实现这种功能的。

我们最常用的 Layout布局 有4种，分别是

  • QHBoxLayout 水平布局

QHBoxLayout 把控件从左到右 水平横着摆放，如下所示

  • QVBoxLayout 垂直布局

QHBoxLayout 把控件从上到下竖着摆放，如下所示

  • QGridLayout 表格布局

QGridLayout 把多个控件 格子状摆放，有的控件可以 占据多个格子，如下所示

  • QFormLayout 表单布局

QFormLayout 表单就像一个只有两列的表格，非常适合填写注册表单这种类型的界面，如下所示


Layout 示例
请看视频讲解， 用 layout进行布局。
MainWindow 的Layout
如果我们选择的主窗口是MainWindow类型，要给MainWindow整体设定Layout，必须 先添加一个控件到 centralwidget 下面 ，如下


然后才能右键点击 MainWindow，选择布局，如下


调整控件位置和大小

点击这里，边看视频讲解，边学习以下内容
调整layout中控件的大小比例
可以通过设定控件的sizePolicy来调整，具体操作请看视频讲解。
调整控件间距
要调整控件上下间距，可以给控件添加layout，然后通过设定layout的上下的padding 和 margin 来调整间距，具体操作请看视频讲解。
要调整控件的左右间距，可以通过添加 horizontal spacer 进行控制，也可以通过layout的左右margin
调整控件次序
有的时候 我们需要调整 一个layout里面，控件的上下显示次序，或者左右显示次序，该怎么做呢？
如果是简单的两个控件在 layout里面，通常直接拖动就行了。
但如果是更复杂的情况，比如，
大家点击这里，下载一个白月黑羽实战班学员开发的程序界面代码，解压后，拖动里面的main.ui界面文件到Qt设计师里面。
如果我们要在原来的界面上做一些修改，如下图所示


大家可以自己尝试 新建一个垂直layout，把原来的两个layout 拖动到垂直layout里面。
就会发现，如果要调整两个layout的上下显示次序，直接拖动经常会导致界面混乱。
怎么办呢？
本节讲解仅 内部学员 可见
界面布局步骤建议
点击这里，边看视频讲解，边学习以下内容
对界面控件进行布局，白月黑羽的经验是 按照如下步骤操作

  • 先不使用任何Layout，把所有控件 按位置 摆放在界面上
  • 然后先从 最内层开始 进行控件的 Layout 设定
  • 逐步拓展到外层 进行控件的 Layout设定
  • 最后调整 layout中控件的大小比例， 优先使用 Layout的 layoutStrentch 属性来控制

从一个窗口跳转到另外一个窗口
经常有朋友问我，程序开始的时候显示一个窗口（比如登录窗口），操作后进入到另外一个窗口，怎么做。
方法很简单，主要就是 实例化另外一个窗口，显示新窗口，关闭老窗口。
如下代码所示
from PySide2 import QtWidgets import sys class Window2(QtWidgets.QMainWindow): def __init__(self): super().__init__() self.setWindowTitle('窗口2') centralWidget = QtWidgets.QWidget() self.setCentralWidget(centralWidget) button = QtWidgets.QPushButton('按钮2') grid = QtWidgets.QGridLayout(centralWidget) grid.addWidget(button) class MainWindow(QtWidgets.QMainWindow): def __init__(self): super().__init__() self.setWindowTitle('窗口1') centralWidget = QtWidgets.QWidget() self.setCentralWidget(centralWidget) button = QtWidgets.QPushButton('打开新窗口') button.clicked.connect(self.open_new_window) grid = QtWidgets.QGridLayout(centralWidget) grid.addWidget(button) def open_new_window(self): # 实例化另外一个窗口 self.window2 = Window2() # 显示新窗口 self.window2.show() # 关闭自己 self.close() if __name__ == '__main__': app = QtWidgets.QApplication(sys.argv) window = MainWindow() window.show() sys.exit(app.exec_())

点击这里下载 一个登录切换到主窗口 的示例代码包

如果经常要在两个窗口来回跳转，可以使用 hide() 方法 隐藏窗口， 而不是 closes() 方法关闭窗口。 这样还有一个好处：被隐藏的窗口再次显示时，原来的操作内容还保存着，不会消失。
弹出模式对话框
有的时候，我们需要弹出一个模式对话框输入一些数据，然后回到 原窗口。
所谓模式对话框，就是弹出此对话框后， 原窗口就处于不可操作的状态，只有当模式对话框关闭才能继续。
参考如下代码
from PySide2 import QtWidgets import sys class MyDialog(QtWidgets.QDialog): def __init__(self): super().__init__() self.setWindowTitle('模式对话框') self.resize(500, 400) self.textEdit = QtWidgets.QPlainTextEdit(self) self.textEdit.setPlaceholderText("请输入薪资表") self.textEdit.move(10, 25) self.textEdit.resize(300, 350) self.button = QtWidgets.QPushButton('统计', self) self.button.move(380, 80) class MainWindow(QtWidgets.QMainWindow): def __init__(self): super().__init__() self.setWindowTitle('主窗口') centralWidget = QtWidgets.QWidget() self.setCentralWidget(centralWidget) button = QtWidgets.QPushButton('打开模式对话框') button.clicked.connect(self.open_new_window) grid = QtWidgets.QGridLayout(centralWidget) grid.addWidget(button) def open_new_window(self): # 实例化一个对话框类 self.dlg = MyDialog() # 显示对话框，代码阻塞在这里， # 等待对话框关闭后，才能继续往后执行 self.dlg.exec_() if __name__ == '__main__': app = QtWidgets.QApplication(sys.argv) window = MainWindow() window.show() sys.exit(app.exec_())
课后练习
VIP实战班学员请联系老师，完成一个数据抽样的程序开发，界面如下

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

day12--java高级编程：网络通讯

day12--java高级编程：网络通讯

5 Day19–网络通信(Socket通信) 说明： io流是跟本地的文件进行数据的传输，读或者写。网络通信：数据在网络中进行的传输。 本章专题与脉络 1. 网络编程概述 Java是 Internet 上的语言，它从语言级上提供了对网络应用程序的支持&…
阅读更多...
Maven项目提示Ignored pom.xml问题

Maven项目提示Ignored pom.xml问题

1 环境 （1）IDEA开发工具：2022.2.1 （2）JDK：Java17（Spring6要求JDK最低版本是Java17） （3）Spring：6.1.2 （4）Maven 3.8.8 2 …
阅读更多...
react+redux+antd-mobile 之 记账本案例

react+redux+antd-mobile 之 记账本案例

1.环境搭建 //使用CRA创建项目，并安装必要依赖，包括下列基础包 //1. Redux状态管理 - reduxjs/toolkit 、 react-redux //2. 路由 - react-router-dom //3. 时间处理 - dayjs //4. class类名处理 - classnames //5. 移动端组件库 - antd-mobile //6. 请…
阅读更多...
linux常见基础指令

linux常见基础指令

入门常见基础指令 ls、stat、 pwd 、cd、tree、 whoami、 touch、 mkdir、 rm 、 man、 cp、mv、cat、tac、echo、>、 >>、 < 、more、 less、 head、 tail、date、 cal、 find、 which、alias、whereis、grep、zip与unzip、 tar、bc、uname、xargs... 热键Tab、…
阅读更多...
【信息安全原理】——期末复习（冲刺篇）

【信息安全原理】——期末复习（冲刺篇）

&#x1f4d6; 前言&#xff1a;快考试了&#xff0c;做篇期末总结&#xff0c;都是重点与必考点。 题型&#xff1a;简答题&#xff08;45分&#xff09;、协议分析题&#xff08;210分&#xff09;&#xff08;给一个报文或工作流程&#xff0c;分析存在的问题&#xff09;、…
阅读更多...
操作系统：linux（在虚拟机上详细步骤安装）Centos

操作系统：linux（在虚拟机上详细步骤安装）Centos

文章目录 前言&#xff1a;一、如何在自己的电脑上安装centos?二、在虚拟机上安装centos2.1安装步骤&#xff1a; 前言&#xff1a; 操作系统有&#xff1a;windows server 不开源的收费的、linux 开源的免费的&#xff0c;精简安装&#xff08;没有UI)。国产的操作系统有&am…
阅读更多...
Pytest框架 —— 用例标记和测试执行篇！

Pytest框架 —— 用例标记和测试执行篇！

pytest用例标记和测试执行篇 上一篇文章入门篇咱们介绍了pytest的前后置方法和fixture机制&#xff0c;这个章节主要给大家介绍pytest中的标记机制和用例执行的方法。pytest可以通过标记将数据传入于测试函数中&#xff0c;也可以通过标记中对执行的用例做筛选&#xff0c;接下…
阅读更多...
『亚马逊云科技产品测评』活动征文｜云服务器如何快速搭建个人博客（图文详解）

『亚马逊云科技产品测评』活动征文｜云服务器如何快速搭建个人博客（图文详解）

授权声明&#xff1a;本篇文章授权活动官方亚马逊云科技文章转发、改写权&#xff0c;包括不限于在 Developer Centre, 知乎&#xff0c;自媒体平台&#xff0c;第三方开发者媒体等亚马逊云科技官方渠道 文章目录 引言一、前期准备步骤1.1 准备一个亚马逊 EC2 服务器1.2 进入控…
阅读更多...
过年过节通过html+css+js代码实现：超级好看的放烟花效果(含背景音乐)

过年过节通过html+css+js代码实现：超级好看的放烟花效果(含背景音乐)

文章目录&#xff1a; 一&#xff1a;放烟花 1. 运行效果 2.代码 二&#xff1a;新年快乐 1.运行效果 2.代码 一&#xff1a;放烟花 1. 运行效果 效果图◕‿◕✌✌✌ 过年过节通过htmlcssjs实现放烟花效果代码(含背景音乐) 2.代码 修改后缀为".html"的格式…
阅读更多...
数模混合SoC芯片中LEF2Milkyway的golden flow

数模混合SoC芯片中LEF2Milkyway的golden flow

在数模混合芯片中的项目中&#xff0c;特别是数字模块很少甚至只有一个简单的数字控制逻辑时&#xff0c;我们要做数字模块的后端实现时&#xff0c;通常模拟那边会问我们实现需要他们提供哪些数据。 通常来说&#xff0c;我们可以让模拟设计提供数字模块的GDS或LEF文件即可。…
阅读更多...
QT中的信号与槽的讲解

QT中的信号与槽的讲解

文章目录 信号及其特点槽及其特点代码演示标准信号与标准槽函数方式一方式二 自定义信号和槽connect()函数信号和槽函数存在函数重载的情况下Qt的信号槽机制注意事项 信号及其特点 信号&#xff1a;是一种特殊的函数&#xff0c;又称信号函数&#xff0c;俗称信号&#xff0c;…
阅读更多...
＜软考高项备考＞《论文专题 - 37 采购管理（1） 》

＜软考高项备考＞《论文专题 - 37 采购管理（1） 》

1 成本管理基础 1.1 写作要点 过程定义、作用写作要点、思路规划采购管理规划采购管理是记录项目采购决策、明确采购方法&#xff0c;及识别潜在卖方的过程。作用:确定是否从项目外部获取货物和服务&#xff0c;如果是&#xff0c;则还要确定将在什么时间、以什么方式获取什么…
阅读更多...
项目实战--Message Queue

项目实战--Message Queue

一. 概念篇 我们在学习多线程的时候,学习过生产者-消费者模型,为了实现解耦合和削峰填谷,引入了阻塞队列. 在实际的后端开发中,跨主机之间使用生产者消费者模型,也是非常普遍的需求,因此,阻塞队列会被封装成一个独立的服务器程序,实现更丰富的功能.这样的程序称为"消息队列…
阅读更多...
Grafana监控数据可视化

Grafana监控数据可视化

Grafana 是一个可视化面板&#xff0c;有着非常漂亮的图表和布局展示&#xff0c;功能齐全的度量仪表盘和图形编辑器&#xff0c;支持 Graphite、zabbix、InfluxDB、Prometheus、OpenTSDB、Elasticsearch 等作为数据源&#xff0c;比 Prometheus 自带的图表展示功能强大太多&am…
阅读更多...
运行时错误‘53’文件未找到：MathPage.WLL，安装MathType后Word不能复制粘贴问题的解决

运行时错误‘53’文件未找到：MathPage.WLL，安装MathType后Word不能复制粘贴问题的解决

两步解决&#xff1a; 1. 打开Word-->文件-->选项-->信任中心-->信任中心设置-->受信任位置&#xff0c;解决宏问题 添加如下受信任位置&#xff0c; 我的路径&#xff1a;C:\Program Files\Microsoft Office\root\Office16\STARTUP\ 2. 找到MathType下的MathT…
阅读更多...
Unity关于动画混合树（Blend Tree）的使用

Unity关于动画混合树（Blend Tree）的使用

在动画与动画的切换过程中&#xff0c;常因为两个动画之间的差距过大&#xff0c;而显得动画的切换很不自然。 这时候就需要动画混合树Blend Tree这个功能。使用混合树可以将多个动画混合在一起&#xff0c;例如在处理角色的移动中&#xff0c;走动画与跑动画切换的时候&#x…
阅读更多...
vue3引入百度地图（两种方法）

vue3引入百度地图（两种方法）

首先要有百度开放平台并进行注册&#xff0c;不懂看这里 ### 第一种方法 地图引入流程 安装vue-baidu-map-3x插件 参考官网地址&#xff1a;快速上手 | vue-baidu-map-3x npm install vue-baidu-map-3x --save 在public/index.html文件中引入 <!-- 百度地图 --> &…
阅读更多...
pytorch03：transforms常见数据增强操作

pytorch03：transforms常见数据增强操作

目录 一、数据增强二、transforms--Crop裁剪2.1 transforms.CenterCrop2.2 transforms.RandomCrop2.3 RandomResizedCrop2.4 FiveCrop和TenCrop 三、transforms—Flip翻转、旋转3.1RandomHorizontalFlip和RandomVerticalFlip3.2 RandomRotation 四、transforms —图像变换4.1 t…
阅读更多...
HarmonyOS4.0系统性深入开发09卡片使用动效能力

HarmonyOS4.0系统性深入开发09卡片使用动效能力

卡片使用动效能力 ArkTS卡片开放了使用动画效果的能力&#xff0c;支持显式动画、属性动画、组件内转场能力。需要注意的是&#xff0c;ArkTS卡片使用动画效果时具有以下限制&#xff1a; 名称参数说明限制描述duration动画播放时长限制最长的动效播放时长为1秒&#xff0c;当…
阅读更多...
SpringMVC源码解析——DispatcherServlet的逻辑处理

SpringMVC源码解析——DispatcherServlet的逻辑处理

DispatcherServlet类相关的结构图如下&#xff1a; 其中jakarta.servlet.http.HttpServlet的父类是jakarta.servlet.GenericServlet&#xff0c;实现接口jakarta.servlet.Servlet。我们先看一下jakarta.servlet.Servlet接口的源码如下&#xff1a; /*** 定义所有servlet必须实…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023