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

举报
虫无涯 发表于 2023/09/07 09:33:26 2023/09/07
【摘要】 1 Qt Designer入口之前文章设置好了Qt Designer工具；现在直接在Pycharm中打开；路径为：工具-External Tools-Qt Designer 2 Qt Designer-Widget Box一般情况下，我们创建一个应用程序选的是Main Window;选择后进入到Qt Designer的设计界面： 2.1 窗口部件盒（Widget Box）最左侧的就是Wid...

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 竖直布局 ![在这里插入图片描述](https://img-blog.csdnimg.cn/013df94b48f74dbe86c6f362450fa56d.png#pic_center =300x)
Horizontal Layout 水平布局 ![在这里插入图片描述](https://img-blog.csdnimg.cn/dec4fd2dc755411bb5907d74e7403c44.png#pic_center =300x)
Grid Layout 栅格布局 ![在这里插入图片描述](https://img-blog.csdnimg.cn/f520ceeaff5f4c7f9da1f867cc32a1d9.png#pic_center =300x)
Form Layout 表格布局 ![在这里插入图片描述](https://img-blog.csdnimg.cn/c7be73d865d44e3cb2d44baac0725c20.png#pic_center =300x)

2.3 Spacers间隔部件

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

2.4 Button按钮

按钮控件 说明 示例
Push Button 按压按钮 ![在这里插入图片描述](https://img-blog.csdnimg.cn/5796f59af35949cd946d515eae1d4766.png#pic_center =300x)
Tool Button 工具按钮 ![在这里插入图片描述](https://img-blog.csdnimg.cn/d3222642bf4f479f808a7512845adbb8.png#pic_center =300x)
Radio Button 单选按钮 ![在这里插入图片描述](https://img-blog.csdnimg.cn/07b5417e15084b7692f36385a2cf18e9.png#pic_center =300x)
Check Box 多选框 ![在这里插入图片描述](https://img-blog.csdnimg.cn/8a1e1eb56feb4c83ad7f4518c8930438.png#pic_center =300x)
Command Link Button 命令链接按钮 ![在这里插入图片描述](https://img-blog.csdnimg.cn/d2550626e8a74ec2a9ec27542378cc67.png#pic_center =300x)
Dialog Button Box 对话框按钮 ![在这里插入图片描述](https://img-blog.csdnimg.cn/d73720a7db28434ea5ea1fd8b998ef45.png#pic_center =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 组合框 ![在这里插入图片描述](https://img-blog.csdnimg.cn/060dcd9770c547d8b89fe3e3cef867f1.png#pic_center =300x)
Scroll Area 滚动区 ![在这里插入图片描述](https://img-blog.csdnimg.cn/f6ca99a09481467ca754d8091f96e18a.png#pic_center =300x)
Tool Box 工具箱 ![在这里插入图片描述](https://img-blog.csdnimg.cn/8237904987974caebbce607d7a675c52.png#pic_center =300x)
Tab Widget 选项卡 ![在这里插入图片描述](https://img-blog.csdnimg.cn/ce3a1a5060d64446925253d13c752dfa.png#pic_center =300x)
Stacked Widget 堆栈控件 ![在这里插入图片描述](https://img-blog.csdnimg.cn/87e7430817d1471aafef93fa8407c1d3.png#pic_center =300x)
Frame 边框控件 ![在这里插入图片描述](https://img-blog.csdnimg.cn/9c44cd2c0df04e63a0483d6fb226be03.png#pic_center =300x)
Widget 窗口控件 ![在这里插入图片描述](https://img-blog.csdnimg.cn/c82da3a5596b4db496ed46be319bcfce.png#pic_center =300x)
MDI Area 多文档区域 ![在这里插入图片描述](https://img-blog.csdnimg.cn/ab4b122a0951404f81a1e81aaac124fe.png#pic_center =300x)
Dock Widget 停靠小部件 ![在这里插入图片描述](https://img-blog.csdnimg.cn/868ebc39d5a2479c81ea22929a82ede4.png#pic_center =300x)

2.8 Input Widget输入部件

控件 说明
Combo Box 下拉选择框 ![在这里插入图片描述](https://img-blog.csdnimg.cn/5e31f44eb3374128bdad7b2a6ecbbfba.png#pic_center =300x)
Font Combo Box 字体下拉选择框 ![在这里插入图片描述](https://img-blog.csdnimg.cn/04db0551edf445bdb4af6da0d5dba63f.png#pic_center =300x)
Line Edit 单行文本编辑框 ![在这里插入图片描述](https://img-blog.csdnimg.cn/d0ec4f804fc34d8580984980263fa5e0.png#pic_center =300x)
Text Edit 文本编辑框 ![在这里插入图片描述](https://img-blog.csdnimg.cn/1e5cabf32b3545ab88542b9399b28677.png#pic_center =300x)
Plain Text Edit 纯文本编辑框 ![在这里插入图片描述](https://img-blog.csdnimg.cn/0c2b472b76c942f184a399908e69b679.png#pic_center =300x)
Spin Box 数字设定框 ![在这里插入图片描述](https://img-blog.csdnimg.cn/648da648bbd04604abbf6395834b9fe5.png#pic_center =300x)
Double Spin Box 小数设定框 ![在这里插入图片描述](https://img-blog.csdnimg.cn/cf9e9bc3be8e4152bc066c050450cd02.png#pic_center =300x)
Time Edit 时间编辑框 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2194ef33eed24aaba00d2f23e22d50ab.png#pic_center =300x)
Date Edit 日期编辑框 ![在这里插入图片描述](https://img-blog.csdnimg.cn/d63c6b39e70a46cfb6a818245803220e.png#pic_center =300x)
Date/Time Edit 日期/时间编辑框 ![在这里插入图片描述](https://img-blog.csdnimg.cn/744c98e8c7ab43c088900de2906262ab.png#pic_center =300x)
Dial 圆表盘 ![在这里插入图片描述](https://img-blog.csdnimg.cn/23cdc4a4b1ee4ef3a9e6443bb323af1a.png#pic_center =300x)
Horizontal Scroll Bar 水平滚动条 ![在这里插入图片描述](https://img-blog.csdnimg.cn/ca40faa8f65340c7ae593d039b834b9c.png#pic_center =300x)
Vertical Scroll Bar 垂直滚动条 ![在这里插入图片描述](https://img-blog.csdnimg.cn/db73c60806a440ccb2248fadc99cce8a.png#pic_center =300x)
Horizontal Slider 水平滑块 ![在这里插入图片描述](https://img-blog.csdnimg.cn/aefefa2455794f3b811bb7f3876bf62f.png#pic_center =300x)
Vertical Slider 垂直滑块 ![在这里插入图片描述](https://img-blog.csdnimg.cn/d75d73fa007e4f0395264ecbc3ccbb87.png#pic_center =300x)
Key Sequence Edit 键序列编辑器 ![在这里插入图片描述](https://img-blog.csdnimg.cn/355e54f4b9c341369ea8234e7ebae0f5.png#pic_center =300x)

2.9 Display Widget展示小部件

控件 说明 示例
Label 标签 ![在这里插入图片描述](https://img-blog.csdnimg.cn/d0e979f3ed1e420b889cf885da57bd79.png#pic_center =300x)
Text Browser 文本浏览器 ![在这里插入图片描述](https://img-blog.csdnimg.cn/a1dc605bf98a4193abfebbec3193c2ab.png#pic_center =300x)
Graphics View 图象视图 ![在这里插入图片描述](https://img-blog.csdnimg.cn/37bbc34f2c5a4550a93ef1bd64e1e87a.png#pic_center =300x)
Calendar Widget 日历小部件 ![在这里插入图片描述](https://img-blog.csdnimg.cn/ffa3574530c941719f7aa77ecf7c0943.png#pic_center =300x)
LCD Number LCD数字 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2c3a7d8e52254418a060f4ab209649c3.png#pic_center =300x)
Progress Bar 进度条 ![在这里插入图片描述](https://img-blog.csdnimg.cn/c0378dab786545a99f74dac8a3f45d90.png#pic_center =300x)
Horizontal Line 水平条 ![在这里插入图片描述](https://img-blog.csdnimg.cn/249827085bfd4ca6bf67e628156a2300.png#pic_center =300x)
Vertical Line 垂直条 ![在这里插入图片描述](https://img-blog.csdnimg.cn/1173c4e5646c415d9d57c997a2ebe37a.png#pic_center =300x)
openGL widget 开放图形库小部件 ![在这里插入图片描述](https://img-blog.csdnimg.cn/c7078156b1ab470a9380effed798c1f4.png#pic_center =300x)

3 部件属性

  • 比如LCD数字部件的属性如下：
    在这里插入图片描述
  • 比如QWidget部件属性：
    在这里插入图片描述
    在这里插入图片描述
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com
Python Qt 容器
  • 点赞
  • 收藏
  • 关注作者

评论（0）

0/1000
抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认 取消

加入云驻计划，成为创作者

  • 华为云周边好礼
  • 免费体验产品
  • 特殊身份标识
  • 线下官方门票
  • 内部专家零距离
  • 与10000+优质创作者共同成长
立即加入