QTdesigner

最新推荐文章于 2024-11-21 23:34:05 发布

Once-Day

最新推荐文章于 2024-11-21 23:34:05 发布

阅读量481

点赞数

文章标签： python css qt5

本文链接：https://blog.csdn.net/Once_day/article/details/117259611

版权

QT 专栏收录该内容

1 篇文章

订阅专栏

Qt designer 在Python的简单使用（兼容C++)

1.下载Python及配置相关包

1.1下载最新版Python

官网下载：Welcome to Python.org

在这里插入图片描述

点击Download下的Python 3.9.5（版本号随时间会变）

在这里插入图片描述

跳转该页面后，下滑到最底层。

在这里插入图片描述

这里有很多安装版本，在Windows上，最好使用推荐版本，这个会附带一些工具如pip，setup等，不然新手寸步难行。因为我们只装Python，不使用传统意义上的集成平台，如Anaconda、visual studio等。

下载好了后，点击安装：

在这里插入图片描述

注意勾选图示选项，添加到系统环境变量里面后，就可以通过Power Shell工具直接操作了。

（这里用3.8版本做例子截图，因为已经装了3.9版本）

直接Install now即可，也可以客制化安装（Customize installation），区别不大。

安装过程可能安全软件可能提示dll文件被修改，直接全选允许程序全部操作（或类似选项），也许你会说关闭杀毒软件再安装，但是你应该明白，作为一个计算机学者，就要“与狼共舞”，这种话是小白的特权，毕竟哪个程序没有“BUG”呢？

在这里插入图片描述

搜索python，出来红线选项即可，说明安装成功。

打开Power Shell 工具，输入python：

在这里插入图片描述

出来如图所示信息，说明python已添加到系统路径中了，如果没有，搜索编辑系统环境变量：

在这里插入图片描述

点击环境变量：

在这里插入图片描述

找到Path，点击编辑：

在这里插入图片描述

点击新建，浏览，找到python安装根目录，确定，就可以。

（默认安转位置：C:\Users\(用户名）\AppData\Local\Programs)

在这里插入图片描述

打开之后，再打开用户名文件夹（非公用）：

在这里插入图片描述

你会发现，没有AppData文件夹。。。。。。，这个时候要打开隐藏项目：

在这里插入图片描述

接下来按照之前的默认路径找下去就可以了。也可以直接直接搜索：

在这里插入图片描述

右键对应项直接打开文件位置，不过这里是快捷方式，再次右键打开文件位置就到了：

在这里插入图片描述

点击如图位置可以直接复制，之前的系统环境变量也支持直接复制路径。方法太多了，动脑子就可以了。

下面也可以直接点击开始栏，然后右键打开文件位置找到安转目录。

在这里插入图片描述

python安装就结束了，很简单，默认安转，什么都不用设置。

1.2安装一些有用的包

在这里插入图片描述

直接通过pip命令安转就可以了，实测，python3.9非常好使，老版本可能不行，什么镜像之类，或者去pypi官网下载再装等方法，这里就不说了，一般而言，非要使用老版本的人肯定有自己独门秘诀，下个包太简单了。

pip install 包名

上面命令行即可，当然还有诸多修饰符，如版本号等。但对新手来说这些不太重要，直接下就完了！

依次安转下列包：

pip install PyQt5

安装Qt的python支持包。

pip install pyqt5-tools

安转Qt的工具包

其他的包看情况吧，至少在简易ui处暂不需要，因为这个主要讲述UI的简单设计。

在这里插入图片描述

安转完成后搜索designer，顺利的话会出来designer.exe,不顺利的话，恭喜你要多找几步了。

在这里插入图片描述

打开python安装根目录，建议直接搜索designer.exe，因为这个文件随版本不同，所处的文件夹位置也不同。当前版本在Python39\Lib\site-packages\qt5_applications\Qt\bin中。

在这里插入图片描述

可以创建快捷方式到桌面，这样下次打开就快了。

2.designer简单使用

2.1常用的模块

在这里插入图片描述

这是新建的窗体：

（1）前三个是对话框

（2）MainWindow是常见的带有菜单区以及下边框说明区的窗体。

（3）Widget是单纯的窗口

在这里插入图片描述

很熟悉吧，绝大数应用是如此布局的。

在这里插入图片描述

点击右边的palette，可以有一个框体结构大概，这基本覆盖了绝大数可能的桌面操作。如果你看到那种非常炫酷的界面，一般制作复杂，作为编程爱好者，更多的精力应该花到代码和学习数学等知识上，UI界面点到即止。

关于这些模块内部的方法和函数，以及描述，应该看官方手册，以及百度搜索，这是学习能力的培养。

Qt官方函数介绍：All Classes | Qt 6.1

全英文，但是。。。。。。现在是2021年了，这种网页排版英文，有太多方法可以翻译了，没错，机翻质量差，所以加油！！！

下面我针对这个页面讲讲用到的东西：

在这里插入图片描述

2.2 Push Button

这是按钮，大概就是点击一下反馈一下，当然，它也有很多内部函数，可操作的空间很大。

在这里插入图片描述

上面是它的初始状态,我们主要修改styleSheet来改变它的外部特性，这个在程序里也是可以修改的，不过这里不管了。

在这里插入图片描述

右键该组件，选中“改变样式表”，这里面是CSS命令，是一种规范，具体格式网上找即可，因为挺多的，而且简单设计用不着那么多。

提供三个参考网址：

（1）QT之样式表（样式表规则以及使用大全） - 长脚的思想 - 博客园 (cnblogs.com)

（2）常用css样式属性大全（中文注释）_Stzyz_121314的博客-CSDN博客

（3）HTML+CSS属性样式汇总_ancientear的博客-CSDN博客_css样式属性大全

你可能会发现有些命令无效，有时候设置出问题。很正常，因为这就是编程。

QPushButton{
border:2px solid black;
border-radius:5px;
background:rgb(249,222,160);
color:rgb(0, 0, 0);
font: 12pt "楷体";
}
QPushButton:hover{
border:2px solid red;
border-radius:5px;
background:rgb(249,222,160);
color:rgb(0, 0, 0);
font: 12pt "楷体";
}
QPushButton:pressed{
border:2px solid red;
background:rgb(255, 205, 72);
border-radius:5px;
font: 12pt "楷体";
padding-left:9px;
padding-top:3px;
}

这是按钮的样式表，一次设计永久复制，没错，UI有套模板就好了，又不是商业程序，没必要多费力气，顶多看吐了换个颜色。

第一个是平常状态，设置了一下边界（border）的宽度、线类型、颜色，border-radius设置边界框为圆角矩形，挺好看的，background是背景颜色，使用Alpha通道即rgba（0,0,0,0）可以设置透明膜效果，当然，这是极具艺术性的工作，需要专业认识来干，包括对比色等，所以你跳了你喜欢的UI风格，模仿设计就好。

color是文字的颜色，font设置了文字大小和字体风格，Padding-方向：这个是边框偏移，实际效果是文字朝相反方向偏移，hover指鼠标移到按钮时的情况，pressed指鼠标按下的情况，如果你设计得合理，就可以营造出强烈的反馈效果。

在这里插入图片描述

这是平常显示效果。

在这里插入图片描述

鼠标移到按钮上的效果：

在这里插入图片描述

按下的效果（点击时，由于Padding的移动，会形成文字抖动效果）

按钮的效果是可以继续丰富下去的，比如加入动画特效，但这需要兴趣来驱动。

2.3 RadioButton、CheckBox、ToolButton、Command Link Button、Dialog Button Box

这些按钮是分化程度高的按钮，但是除了内部函数的差异外，外部的样式没有太多改变。

也就是说，在designer里面你纠结用哪个没有太大意义，根本还是阅读官方文档调用其内部方法、函数。

QCheckBox{
border:2px solid black;
border-radius:5px;
background:rgb(249,222,160);
color:rgb(0, 0, 0);
font: 12pt "楷体";
padding-left:6px;
}
QCheckBox:hover{
border:2px solid red;
border-radius:5px;
background:rgb(249,222,160);
color:rgb(0, 0, 0);
font: 12pt "楷体";
}
QCheckBox:pressed{
border:2px solid red;
background:rgb(255, 205, 72);
border-radius:5px;
font: 12pt "楷体";
padding-left:9px;
padding-top:3px;
}