(04 Qt Designer的初步快速了解)
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
部件属性: