『PyQt5-基础篇』｜ 04 Qt Designer的初步快速了解

虫无涯
100 阅读4分钟

1 Qt Designer入口

  • 之前文章设置好了Qt Designer工具；
  • 现在直接在Pycharm中打开；
  • 路径为：工具-External Tools-Qt Designer 在这里插入图片描述 在这里插入图片描述

2 Qt Designer-Widget Box

  • 一般情况下，我们创建一个应用程序选的是Main Window;
  • 选择后进入到Qt Designer的设计界面： 在这里插入图片描述

2.1 窗口部件盒（Widget Box）

  • 最左侧的就是Widget Box； 在这里插入图片描述
  • 所有同类的控件会在一起显示；

2.2 Layouts布局

  • Layouts是Qt Designer支持的4中布局； 在这里插入图片描述
布局说明示例
Vertical Layout竖直布局![在这里插入图片描述](img-blog.csdnimg.cn/013df94b48f… =300x)
Horizontal Layout水平布局![在这里插入图片描述](img-blog.csdnimg.cn/dec4fd2dc75… =300x)
Grid Layout栅格布局![在这里插入图片描述](img-blog.csdnimg.cn/f520ceeaff5… =300x)
Form Layout表格布局![在这里插入图片描述](img-blog.csdnimg.cn/c7be73d865d… =300x)

2.3 Spacers间隔部件

部件说明示例
Horizontal Spacer水平间隔部件![在这里插入图片描述](img-blog.csdnimg.cn/05c6ee4d1d8… =300x)
Vertical Spacer竖直间隔部件![在这里插入图片描述](img-blog.csdnimg.cn/9b08c28cda4… =300x)

2.4 Button按钮

按钮控件说明示例
Push Button按压按钮![在这里插入图片描述](img-blog.csdnimg.cn/5796f59af35… =300x)
Tool Button工具按钮![在这里插入图片描述](img-blog.csdnimg.cn/d3222642bf4… =300x)
Radio Button单选按钮![在这里插入图片描述](img-blog.csdnimg.cn/07b5417e150… =300x)
Check Box多选框![在这里插入图片描述](img-blog.csdnimg.cn/8a1e1eb56fe… =300x)
Command Link Button命令链接按钮![在这里插入图片描述](img-blog.csdnimg.cn/d2550626e8a… =300x)
Dialog Button Box对话框按钮![在这里插入图片描述](img-blog.csdnimg.cn/d73720a7db2… =300x)

2.5 Item Views(Model-Based)

  • item视图（基于模型）；
控件说明
List View列表视图
Tree View树视图
Table View表格视图
Column View列视图
Undo View撤销视图

2.6 Item Widgets(Item-Based)

  • item小部件（基于item）；
控件说明
List Widget列表小部件
Tree Widget树小部件
Table Widget表格小部件

2.7 Containers容器

控件说明示例
Group Box组合框![在这里插入图片描述](img-blog.csdnimg.cn/060dcd9770c… =300x)
Scroll Area滚动区![在这里插入图片描述](img-blog.csdnimg.cn/f6ca99a0948… =300x)
Tool Box工具箱![在这里插入图片描述](img-blog.csdnimg.cn/82379049879… =300x)
Tab Widget选项卡![在这里插入图片描述](img-blog.csdnimg.cn/ce3a1a5060d… =300x)
Stacked Widget堆栈控件![在这里插入图片描述](img-blog.csdnimg.cn/87e7430817d… =300x)
Frame边框控件![在这里插入图片描述](img-blog.csdnimg.cn/9c44cd2c0df… =300x)
Widget窗口控件![在这里插入图片描述](img-blog.csdnimg.cn/c82da3a5596… =300x)
MDI Area多文档区域![在这里插入图片描述](img-blog.csdnimg.cn/ab4b122a095… =300x)
Dock Widget停靠小部件![在这里插入图片描述](img-blog.csdnimg.cn/868ebc39d5a… =300x)

2.8 Input Widget输入部件

控件说明
Combo Box下拉选择框![在这里插入图片描述](img-blog.csdnimg.cn/5e31f44eb33… =300x)
Font Combo Box字体下拉选择框![在这里插入图片描述](img-blog.csdnimg.cn/04db0551edf… =300x)
Line Edit单行文本编辑框![在这里插入图片描述](img-blog.csdnimg.cn/d0ec4f804fc… =300x)
Text Edit文本编辑框![在这里插入图片描述](img-blog.csdnimg.cn/1e5cabf32b3… =300x)
Plain Text Edit纯文本编辑框![在这里插入图片描述](img-blog.csdnimg.cn/0c2b472b76c… =300x)
Spin Box数字设定框![在这里插入图片描述](img-blog.csdnimg.cn/648da648bbd… =300x)
Double Spin Box小数设定框![在这里插入图片描述](img-blog.csdnimg.cn/cf9e9bc3be8… =300x)
Time Edit时间编辑框![在这里插入图片描述](img-blog.csdnimg.cn/2194ef33eed… =300x)
Date Edit日期编辑框![在这里插入图片描述](img-blog.csdnimg.cn/d63c6b39e70… =300x)
Date/Time Edit日期/时间编辑框![在这里插入图片描述](img-blog.csdnimg.cn/744c98e8c7a… =300x)
Dial圆表盘![在这里插入图片描述](img-blog.csdnimg.cn/23cdc4a4b1e… =300x)
Horizontal Scroll Bar水平滚动条![在这里插入图片描述](img-blog.csdnimg.cn/ca40faa8f65… =300x)
Vertical Scroll Bar垂直滚动条![在这里插入图片描述](img-blog.csdnimg.cn/db73c60806a… =300x)
Horizontal Slider水平滑块![在这里插入图片描述](img-blog.csdnimg.cn/aefefa24557… =300x)
Vertical Slider垂直滑块![在这里插入图片描述](img-blog.csdnimg.cn/d75d73fa007… =300x)
Key Sequence Edit键序列编辑器![在这里插入图片描述](img-blog.csdnimg.cn/355e54f4b9c… =300x)

2.9 Display Widget展示小部件

控件说明示例
Label标签![在这里插入图片描述](img-blog.csdnimg.cn/d0e979f3ed1… =300x)
Text Browser文本浏览器![在这里插入图片描述](img-blog.csdnimg.cn/a1dc605bf98… =300x)
Graphics View图象视图![在这里插入图片描述](img-blog.csdnimg.cn/37bbc34f2c5… =300x)
Calendar Widget日历小部件![在这里插入图片描述](img-blog.csdnimg.cn/ffa3574530c… =300x)
LCD Number LCD数字![在这里插入图片描述](img-blog.csdnimg.cn/2c3a7d8e522… =300x)
Progress Bar进度条![在这里插入图片描述](img-blog.csdnimg.cn/c0378dab786… =300x)
Horizontal Line水平条![在这里插入图片描述](img-blog.csdnimg.cn/249827085bf… =300x)
Vertical Line垂直条![在这里插入图片描述](img-blog.csdnimg.cn/1173c4e5646… =300x)
openGL widget 开放图形库小部件![在这里插入图片描述](img-blog.csdnimg.cn/c7078156b1a… =300x)

3 部件属性

  • 比如LCD数字部件的属性如下： 在这里插入图片描述
  • 比如QWidget部件属性： 在这里插入图片描述 在这里插入图片描述
avatar
文章
阅读
粉丝