[{"data":1,"prerenderedAt":628},["ShallowReactive",2],{"post-2025-07-17-pyqt5-qt-designer":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"tags":11,"body":15,"_type":622,"_id":623,"_source":624,"_file":625,"_stem":626,"_extension":627},"\u002Fblog\u002F2025-07-17-pyqt5-qt-designer","blog",false,"","PyQt5-认识 Qt Designer","认识Qt Designer可视化界面设计工具，了解各区域功能与基本操作。","2025-07-17",[12,13,14],"Python","PyQt5","GUI",{"type":16,"children":17,"toc":606},"root",[18,26,33,37,51,56,65,113,121,126,142,150,164,172,186,194,208,216,243,257,265,323,329,332,337,345,350,357,362,370,375,383,388,396,401,409,414,422,428,433,441,447,452,460,465,473,485,491,503,511,517,522,530,536,541,549,555,560,568,574,579,587,593,598],{"type":19,"tag":20,"props":21,"children":22},"element","p",{},[23],{"type":24,"value":25},"text","Qt Designer，中文名称为Qt设计师，它是一个强大的可视化GUI设计工具。通过使用Qt Designer设计GUI程序界面，可以大大地提高开发效率，本节先对Qt Designer及其支持的几种窗口类型进行介绍。",{"type":19,"tag":27,"props":28,"children":30},"h2",{"id":29},"_1几种常用的窗口类型",[31],{"type":24,"value":32},"1  几种常用的窗口类型",{"type":19,"tag":34,"props":35,"children":36},"hr",{},[],{"type":19,"tag":20,"props":38,"children":39},{},[40,42,49],{"type":24,"value":41},"按照 ",{"type":19,"tag":43,"props":44,"children":46},"a",{"href":45},"\u002Fblog\u002F2025-07-16-pyqt5-pyqt5",[47],{"type":24,"value":48},"PyQt5-环境搭建",{"type":24,"value":50}," 的步骤在PyCharm开发工具中配置完Qt Designer后，即可通过PyCharm开发工具中的“External Tools”（扩展工具）菜单快速打开Qt Designer，步骤如下：",{"type":19,"tag":20,"props":52,"children":53},{},[54],{"type":24,"value":55},"1）在PyCharm的菜单栏中依次单击Tools→External Tools→Qt Designer菜单，如图所示。",{"type":19,"tag":20,"props":57,"children":58},{},[59],{"type":19,"tag":60,"props":61,"children":64},"img",{"alt":62,"src":63},"Pasted image 20250827090902","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827090902.png",[],{"type":19,"tag":66,"props":67,"children":68},"blockquote",{},[69],{"type":19,"tag":20,"props":70,"children":71},{},[72,78,80,87,89,95,97,103,105,111],{"type":19,"tag":73,"props":74,"children":75},"strong",{},[76],{"type":24,"value":77},"Tip:",{"type":24,"value":79}," 多学两招\n除了在PyCharm中通过扩展工具打开Qt Designer设计器，还可以通过可执行文件打开，Qt Designer的可执行文件安装在当前虚拟环境下的",{"type":19,"tag":81,"props":82,"children":84},"code",{"className":83},[],[85],{"type":24,"value":86},"Lib\\site-packages\\QtDesigner",{"type":24,"value":88},"路径下，名称为designer.exe，通过双击该文件，也可以打开Qt Designer设计器；另外，为了使用方便，可以为其创建一个桌面快捷方式，具体方式为：选中",{"type":19,"tag":81,"props":90,"children":92},{"className":91},[],[93],{"type":24,"value":94},"designer.exe",{"type":24,"value":96},"文件，单击右键，在弹出的快捷菜单中依次选择",{"type":19,"tag":81,"props":98,"children":100},{"className":99},[],[101],{"type":24,"value":102},"发送到",{"type":24,"value":104},"→",{"type":19,"tag":81,"props":106,"children":108},{"className":107},[],[109],{"type":24,"value":110},"桌面快捷方式",{"type":24,"value":112},"，如下图所示，创建designer.exe文件在系统桌面上的快捷方式。这样以后就可以直接在桌面上面通过双击该快捷方式打开Qt Designer设计器了。",{"type":19,"tag":20,"props":114,"children":115},{},[116],{"type":19,"tag":60,"props":117,"children":120},{"alt":118,"src":119},"Pasted image 20250827091341","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827091341.png",[],{"type":19,"tag":20,"props":122,"children":123},{},[124],{"type":24,"value":125},"2）即可打开Qt Designer设计器，并显示“新建窗体”窗口，该窗口中以列表形式列出Qt支持的几种窗口类型，分别如下：",{"type":19,"tag":127,"props":128,"children":129},"ul",{},[130],{"type":19,"tag":131,"props":132,"children":133},"li",{},[134,140],{"type":19,"tag":81,"props":135,"children":137},{"className":136},[],[138],{"type":24,"value":139},"Dialog with Buttons Bottom",{"type":24,"value":141},"：按钮在底部的对话框窗口，效果如图所示。",{"type":19,"tag":20,"props":143,"children":144},{},[145],{"type":19,"tag":60,"props":146,"children":149},{"alt":147,"src":148},"Pasted image 20250827091525","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827091525.png",[],{"type":19,"tag":127,"props":151,"children":152},{},[153],{"type":19,"tag":131,"props":154,"children":155},{},[156,162],{"type":19,"tag":81,"props":157,"children":159},{"className":158},[],[160],{"type":24,"value":161},"Dialog with Buttons Right",{"type":24,"value":163},"：按钮在右上角的对话框窗口，效果如图所示。",{"type":19,"tag":20,"props":165,"children":166},{},[167],{"type":19,"tag":60,"props":168,"children":171},{"alt":169,"src":170},"Pasted image 20250827091625","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827091625.png",[],{"type":19,"tag":127,"props":173,"children":174},{},[175],{"type":19,"tag":131,"props":176,"children":177},{},[178,184],{"type":19,"tag":81,"props":179,"children":181},{"className":180},[],[182],{"type":24,"value":183},"Dialog without Buttons",{"type":24,"value":185},"：没有按钮的对话框窗口，效果如图所示。",{"type":19,"tag":20,"props":187,"children":188},{},[189],{"type":19,"tag":60,"props":190,"children":193},{"alt":191,"src":192},"Pasted image 20250827091722","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827091722.png",[],{"type":19,"tag":127,"props":195,"children":196},{},[197],{"type":19,"tag":131,"props":198,"children":199},{},[200,206],{"type":19,"tag":81,"props":201,"children":203},{"className":202},[],[204],{"type":24,"value":205},"Main Window",{"type":24,"value":207},"：一个带菜单、停靠窗口和状态栏的主窗口，效果如图所示。",{"type":19,"tag":20,"props":209,"children":210},{},[211],{"type":19,"tag":60,"props":212,"children":215},{"alt":213,"src":214},"Pasted image 20250827091820","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827091820.png",[],{"type":19,"tag":66,"props":217,"children":218},{},[219],{"type":19,"tag":20,"props":220,"children":221},{},[222,227,229,234,236,241],{"type":19,"tag":73,"props":223,"children":224},{},[225],{"type":24,"value":226},"Info:",{"type":24,"value":228}," 说明\n",{"type":19,"tag":81,"props":230,"children":232},{"className":231},[],[233],{"type":24,"value":205},{"type":24,"value":235},"窗口是使用PyQt5设计GUI程序时最常用的窗口，本教程中的所有案例都将以创建",{"type":19,"tag":81,"props":237,"children":239},{"className":238},[],[240],{"type":24,"value":205},{"type":24,"value":242},"窗口为基础进行讲解。",{"type":19,"tag":127,"props":244,"children":245},{},[246],{"type":19,"tag":131,"props":247,"children":248},{},[249,255],{"type":19,"tag":81,"props":250,"children":252},{"className":251},[],[253],{"type":24,"value":254},"Widget",{"type":24,"value":256},"：通用窗口，效果如图所示。",{"type":19,"tag":20,"props":258,"children":259},{},[260],{"type":19,"tag":60,"props":261,"children":264},{"alt":262,"src":263},"Pasted image 20250827092000","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827092000.png",[],{"type":19,"tag":66,"props":266,"children":267},{},[268,291],{"type":19,"tag":20,"props":269,"children":270},{},[271,275,277,282,284,289],{"type":19,"tag":73,"props":272,"children":273},{},[274],{"type":24,"value":226},{"type":24,"value":276}," 说明\n从图可以看出，",{"type":19,"tag":81,"props":278,"children":280},{"className":279},[],[281],{"type":24,"value":254},{"type":24,"value":283},"窗口和",{"type":19,"tag":81,"props":285,"children":287},{"className":286},[],[288],{"type":24,"value":205},{"type":24,"value":290},"窗口看起来是一样的，但它们其实是有区别的，区别是：",{"type":19,"tag":127,"props":292,"children":293},{},[294,311],{"type":19,"tag":131,"props":295,"children":296},{},[297,302,304,309],{"type":19,"tag":81,"props":298,"children":300},{"className":299},[],[301],{"type":24,"value":205},{"type":24,"value":303},"窗口会",{"type":19,"tag":73,"props":305,"children":306},{},[307],{"type":24,"value":308},"自带一个菜单栏和一个状态栏",{"type":24,"value":310},"；",{"type":19,"tag":131,"props":312,"children":313},{},[314,316,321],{"type":24,"value":315},"而",{"type":19,"tag":81,"props":317,"children":319},{"className":318},[],[320],{"type":24,"value":254},{"type":24,"value":322},"窗口没有，默认就是一个空窗口。",{"type":19,"tag":27,"props":324,"children":326},{"id":325},"_2熟悉qt-designer窗口区域",[327],{"type":24,"value":328},"2  熟悉Qt Designer窗口区域",{"type":19,"tag":34,"props":330,"children":331},{},[],{"type":19,"tag":20,"props":333,"children":334},{},[335],{"type":24,"value":336},"在Qt Designer设计器的“新建窗体”窗口中选择“Main Window”，即可创建一个主窗口，Qt Designer设计器的几个主要组成部分如图所示。",{"type":19,"tag":20,"props":338,"children":339},{},[340],{"type":19,"tag":60,"props":341,"children":344},{"alt":342,"src":343},"Pasted image 20250827092743","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827092743.png",[],{"type":19,"tag":20,"props":346,"children":347},{},[348],{"type":24,"value":349},"下面对Qt Designer设计器的主要区域进行介绍。",{"type":19,"tag":351,"props":352,"children":354},"h3",{"id":353},"_1菜单栏",[355],{"type":24,"value":356},"1）菜单栏",{"type":19,"tag":20,"props":358,"children":359},{},[360],{"type":24,"value":361},"菜单栏显示了所有可用的Qt命令，Qt Designer的菜单栏如图所示。",{"type":19,"tag":20,"props":363,"children":364},{},[365],{"type":19,"tag":60,"props":366,"children":369},{"alt":367,"src":368},"Pasted image 20250827092835","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827092835.png",[],{"type":19,"tag":20,"props":371,"children":372},{},[373],{"type":24,"value":374},"在Qt Designer的菜单栏中，最常用的是前面4个菜单，即文件、Edit（编辑）、窗体和视图。其中，文件菜单主要提供基本的新建、保存、关闭等功能菜单，如图所示；",{"type":19,"tag":20,"props":376,"children":377},{},[378],{"type":19,"tag":60,"props":379,"children":382},{"alt":380,"src":381},"Pasted image 20250827093013","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827093013.png",[],{"type":19,"tag":20,"props":384,"children":385},{},[386],{"type":24,"value":387},"Edit（编辑）菜单除了提供常规的复制、粘贴、删除等操作外，还提供了特定于Qt的几个菜单，即编辑窗口部件、编辑信号\u002F槽、编辑伙伴、编辑Tab顺序，这4个菜单主要用来切换Qt窗口的设计状态，Edit（编辑）菜单如图所示。",{"type":19,"tag":20,"props":389,"children":390},{},[391],{"type":19,"tag":60,"props":392,"children":395},{"alt":393,"src":394},"Pasted image 20250827093115","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827093115.png",[],{"type":19,"tag":20,"props":397,"children":398},{},[399],{"type":24,"value":400},"窗体菜单提供布局及预览窗体效果、C++代码和Python代码相关的功能，如图所示；",{"type":19,"tag":20,"props":402,"children":403},{},[404],{"type":19,"tag":60,"props":405,"children":408},{"alt":406,"src":407},"Pasted image 20250827093218","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827093218.png",[],{"type":19,"tag":20,"props":410,"children":411},{},[412],{"type":24,"value":413},"视图菜单主要用来提供Qt常用窗口的快捷打开方式，如图所示。",{"type":19,"tag":20,"props":415,"children":416},{},[417],{"type":19,"tag":60,"props":418,"children":421},{"alt":419,"src":420},"Pasted image 20250827093245","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827093245.png",[],{"type":19,"tag":351,"props":423,"children":425},{"id":424},"_2工具栏",[426],{"type":24,"value":427},"2）工具栏",{"type":19,"tag":20,"props":429,"children":430},{},[431],{"type":24,"value":432},"为了操作更加方便、快捷，将菜单项中常用的命令放入了工具栏中。通过工具栏可以快速访问常用的菜单命令。Qt Designer的工具栏如图所示。",{"type":19,"tag":20,"props":434,"children":435},{},[436],{"type":19,"tag":60,"props":437,"children":440},{"alt":438,"src":439},"Pasted image 20250827093408","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827093408.png",[],{"type":19,"tag":351,"props":442,"children":444},{"id":443},"_3工具箱",[445],{"type":24,"value":446},"3）工具箱",{"type":19,"tag":20,"props":448,"children":449},{},[450],{"type":24,"value":451},"工具箱是Qt Designer最常用、最重要的一个窗口，每一个开发人员都必须对这个窗口非常熟悉。工具箱提供了进行PyQt5 GUI界面开发所必需的控件。通过工具箱，开发人员可以方便地进行可视化的窗体设计，简化程序设计的工作量，提高工作效率等。根据控件功能的不同，工具箱分为8个分类，如图所示。",{"type":19,"tag":20,"props":453,"children":454},{},[455],{"type":19,"tag":60,"props":456,"children":459},{"alt":457,"src":458},"Pasted image 20250827093625","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827093625.png",[],{"type":19,"tag":20,"props":461,"children":462},{},[463],{"type":24,"value":464},"而展开每个分类，都可以看到各个分类下包含的控件，如图所示。",{"type":19,"tag":20,"props":466,"children":467},{},[468],{"type":19,"tag":60,"props":469,"children":472},{"alt":470,"src":471},"Pasted image 20250827093709","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827093709.png",[],{"type":19,"tag":66,"props":474,"children":475},{},[476],{"type":19,"tag":20,"props":477,"children":478},{},[479,483],{"type":19,"tag":73,"props":480,"children":481},{},[482],{"type":24,"value":226},{"type":24,"value":484}," 说明\n在设计GUI界面时，如果需要使用某个控件，可以在工具箱中选中需要的控件，直接将其拖放到设计窗口的指定位置即可。",{"type":19,"tag":351,"props":486,"children":488},{"id":487},"_4窗口设计区域",[489],{"type":24,"value":490},"4）窗口设计区域",{"type":19,"tag":20,"props":492,"children":493},{},[494,496,501],{"type":24,"value":495},"窗口设计区域是GUI界面的可视化显示窗口，任何对窗口的改动，都可以在该区域实时显示出来，例如，下图是一个默认的",{"type":19,"tag":81,"props":497,"children":499},{"className":498},[],[500],{"type":24,"value":205},{"type":24,"value":502},"窗口，该窗口中包含一个默认的菜单和状态栏。",{"type":19,"tag":20,"props":504,"children":505},{},[506],{"type":19,"tag":60,"props":507,"children":510},{"alt":508,"src":509},"Pasted image 20250827094023","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827094023.png",[],{"type":19,"tag":351,"props":512,"children":514},{"id":513},"_5对象查看器",[515],{"type":24,"value":516},"5）对象查看器",{"type":19,"tag":20,"props":518,"children":519},{},[520],{"type":24,"value":521},"对象查看器主要用来查看设计窗口中放置的对象列表，如图所示。",{"type":19,"tag":20,"props":523,"children":524},{},[525],{"type":19,"tag":60,"props":526,"children":529},{"alt":527,"src":528},"Pasted image 20250827094055","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827094055.png",[],{"type":19,"tag":351,"props":531,"children":533},{"id":532},"_6属性编辑器",[534],{"type":24,"value":535},"6）属性编辑器",{"type":19,"tag":20,"props":537,"children":538},{},[539],{"type":24,"value":540},"属性编辑器是Qt Designer中的另一个常用且关键的窗口，该窗口为PyQt5设计的GUI界面提供了对窗口、控件和布局等相关属性的修改功能。对设计窗口中的各个控件属性都可以在属性编辑器中进行设置完成。属性编辑器窗口如图所示。",{"type":19,"tag":20,"props":542,"children":543},{},[544],{"type":19,"tag":60,"props":545,"children":548},{"alt":546,"src":547},"Pasted image 20250827094135","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827094135.png",[],{"type":19,"tag":351,"props":550,"children":552},{"id":551},"_7信号槽编辑器",[553],{"type":24,"value":554},"7）信号\u002F槽编辑器",{"type":19,"tag":20,"props":556,"children":557},{},[558],{"type":24,"value":559},"信号\u002F槽编辑器主要用来编辑控件的信号和槽函数，另外也可以为控件添加自定义的信号和槽函数，效果如图所示。",{"type":19,"tag":20,"props":561,"children":562},{},[563],{"type":19,"tag":60,"props":564,"children":567},{"alt":565,"src":566},"Pasted image 20250827094241","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827094241.png",[],{"type":19,"tag":351,"props":569,"children":571},{"id":570},"_8动作编辑器",[572],{"type":24,"value":573},"8）动作编辑器",{"type":19,"tag":20,"props":575,"children":576},{},[577],{"type":24,"value":578},"动作编辑器主要用来对控件的动作进行编辑，包括提示文字、图标及图标主题、快捷键等，如图所示。",{"type":19,"tag":20,"props":580,"children":581},{},[582],{"type":19,"tag":60,"props":583,"children":586},{"alt":584,"src":585},"Pasted image 20250827094305","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827094305.png",[],{"type":19,"tag":351,"props":588,"children":590},{"id":589},"_9资源浏览器",[591],{"type":24,"value":592},"9）资源浏览器",{"type":19,"tag":20,"props":594,"children":595},{},[596],{"type":24,"value":597},"在资源浏览器中，开发人员可以为控件添加图片（例如Label、Button等背景图片）、图标等资源，如图所示。",{"type":19,"tag":20,"props":599,"children":600},{},[601],{"type":19,"tag":60,"props":602,"children":605},{"alt":603,"src":604},"Pasted image 20250827094528","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827094528.png",[],{"title":7,"searchDepth":607,"depth":607,"links":608},2,[609,610],{"id":29,"depth":607,"text":32},{"id":325,"depth":607,"text":328,"children":611},[612,614,615,616,617,618,619,620,621],{"id":353,"depth":613,"text":356},3,{"id":424,"depth":613,"text":427},{"id":443,"depth":613,"text":446},{"id":487,"depth":613,"text":490},{"id":513,"depth":613,"text":516},{"id":532,"depth":613,"text":535},{"id":551,"depth":613,"text":554},{"id":570,"depth":613,"text":573},{"id":589,"depth":613,"text":592},"markdown","content:blog:2025-07-17-pyqt5-认识Qt Designer.md","content","blog\u002F2025-07-17-pyqt5-认识Qt Designer.md","blog\u002F2025-07-17-pyqt5-认识Qt Designer","md",1780801018200]