[{"data":1,"prerenderedAt":667},["ShallowReactive",2],{"post-2025-07-18-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":661,"_id":662,"_source":663,"_file":664,"_stem":665,"_extension":666},"\u002Fblog\u002F2025-07-18-pyqt5-qt-designer","blog",false,"","PyQt5-使用 Qt Designer 创建窗口","使用Qt Designer创建第一个窗口，.ui文件转.py文件与代码调试。","2025-07-18",[12,13,14],"Python","PyQt5","GUI",{"type":16,"children":17,"toc":651},"root",[18,27,31,62,97,110,116,119,147,156,162,165,178,186,192,195,216,224,229,243,251,259,267,275,283,289,292,311,319,332,340,362,365,406,419,452,460,472,480,486,489,524,617,637,645],{"type":19,"tag":20,"props":21,"children":23},"element","h2",{"id":22},"_1main-window介绍",[24],{"type":25,"value":26},"text","1  Main Window介绍",{"type":19,"tag":28,"props":29,"children":30},"hr",{},[],{"type":19,"tag":32,"props":33,"children":34},"p",{},[35,37,44,46,52,54,60],{"type":25,"value":36},"在PyQt5中最常用的窗口有三种，即",{"type":19,"tag":38,"props":39,"children":41},"code",{"className":40},[],[42],{"type":25,"value":43},"Main Window",{"type":25,"value":45},"、",{"type":19,"tag":38,"props":47,"children":49},{"className":48},[],[50],{"type":25,"value":51},"Widget",{"type":25,"value":53},"和",{"type":19,"tag":38,"props":55,"children":57},{"className":56},[],[58],{"type":25,"value":59},"Dialog",{"type":25,"value":61},"，说明如下：",{"type":19,"tag":63,"props":64,"children":65},"ul",{},[66,77,87],{"type":19,"tag":67,"props":68,"children":69},"li",{},[70,75],{"type":19,"tag":38,"props":71,"children":73},{"className":72},[],[74],{"type":25,"value":43},{"type":25,"value":76},"：即主窗口，它主要为用户提供一个带有菜单栏、工具栏和状态栏的窗口。",{"type":19,"tag":67,"props":78,"children":79},{},[80,85],{"type":19,"tag":38,"props":81,"children":83},{"className":82},[],[84],{"type":25,"value":51},{"type":25,"value":86},"：通用窗口，在PyQt5中，没有嵌入到其他控件中的控件都称为窗口。",{"type":19,"tag":67,"props":88,"children":89},{},[90,95],{"type":19,"tag":38,"props":91,"children":93},{"className":92},[],[94],{"type":25,"value":59},{"type":25,"value":96},"：对话框窗口，主要用来执行短期任务，或者与用户进行交互，没有菜单栏、工具栏和状态栏。",{"type":19,"tag":32,"props":98,"children":99},{},[100,102,108],{"type":25,"value":101},"下面主要对",{"type":19,"tag":38,"props":103,"children":105},{"className":104},[],[106],{"type":25,"value":107},"MainWindow",{"type":25,"value":109},"主窗口进行介绍。",{"type":19,"tag":20,"props":111,"children":113},{"id":112},"_2创建主窗口",[114],{"type":25,"value":115},"2  创建主窗口",{"type":19,"tag":28,"props":117,"children":118},{},[],{"type":19,"tag":32,"props":120,"children":121},{},[122,124,130,132,137,139,145],{"type":25,"value":123},"创建主窗口的方法非常简单，只需要打开Qt Designer设计器，在",{"type":19,"tag":38,"props":125,"children":127},{"className":126},[],[128],{"type":25,"value":129},"新建窗体",{"type":25,"value":131},"中选择",{"type":19,"tag":38,"props":133,"children":135},{"className":134},[],[136],{"type":25,"value":43},{"type":25,"value":138},"选项，然后单击",{"type":19,"tag":38,"props":140,"children":142},{"className":141},[],[143],{"type":25,"value":144},"创建",{"type":25,"value":146},"按钮即可，如图所示。",{"type":19,"tag":32,"props":148,"children":149},{},[150],{"type":19,"tag":151,"props":152,"children":155},"img",{"alt":153,"src":154},"Pasted image 20250827094921","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827094921.png",[],{"type":19,"tag":20,"props":157,"children":159},{"id":158},"_3设计主窗口",[160],{"type":25,"value":161},"3  设计主窗口",{"type":19,"tag":28,"props":163,"children":164},{},[],{"type":19,"tag":32,"props":166,"children":167},{},[168,170,176],{"type":25,"value":169},"创建完主窗口后，主窗口中默认只有一个菜单栏和一个状态栏，要设计主窗口时，只需要根据自己的需求，在左侧的",{"type":19,"tag":38,"props":171,"children":173},{"className":172},[],[174],{"type":25,"value":175},"Widget Box",{"type":25,"value":177},"工具箱中选中相应的控件，然后按住鼠标左键，将其拖放到主窗口中的指定位置即可，操作如图所示。",{"type":19,"tag":32,"props":179,"children":180},{},[181],{"type":19,"tag":151,"props":182,"children":185},{"alt":183,"src":184},"Pasted image 20250827095237","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827095237.png",[],{"type":19,"tag":20,"props":187,"children":189},{"id":188},"_4预览窗口效果",[190],{"type":25,"value":191},"4  预览窗口效果",{"type":19,"tag":28,"props":193,"children":194},{},[],{"type":19,"tag":32,"props":196,"children":197},{},[198,200,206,208,214],{"type":25,"value":199},"Qt Designer设计器提供了预览窗口效果的功能，可以预览设计的窗口在实际运行时的效果，以便根据该效果进行调整设计。具体使用方式为：在Qt Designer设计器的菜单栏中选择",{"type":19,"tag":38,"props":201,"children":203},{"className":202},[],[204],{"type":25,"value":205},"窗体",{"type":25,"value":207},"→",{"type":19,"tag":38,"props":209,"children":211},{"className":210},[],[212],{"type":25,"value":213},"预览于",{"type":25,"value":215},"，然后分别选择相应的菜单项即可，这里提供了3种风格的预览方式，如图所示。",{"type":19,"tag":32,"props":217,"children":218},{},[219],{"type":19,"tag":151,"props":220,"children":223},{"alt":221,"src":222},"Pasted image 20250827095744","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827095744.png",[],{"type":19,"tag":32,"props":225,"children":226},{},[227],{"type":25,"value":228},"以上3种风格的预览效果分别如下图所示。",{"type":19,"tag":63,"props":230,"children":231},{},[232],{"type":19,"tag":67,"props":233,"children":234},{},[235,241],{"type":19,"tag":38,"props":236,"children":238},{"className":237},[],[239],{"type":25,"value":240},"windowsvista",{"type":25,"value":242},"风格",{"type":19,"tag":32,"props":244,"children":245},{},[246],{"type":19,"tag":151,"props":247,"children":250},{"alt":248,"src":249},"Pasted image 20250827100001","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827100001.png",[],{"type":19,"tag":63,"props":252,"children":253},{},[254],{"type":19,"tag":67,"props":255,"children":256},{},[257],{"type":25,"value":258},"Windows风格",{"type":19,"tag":32,"props":260,"children":261},{},[262],{"type":19,"tag":151,"props":263,"children":266},{"alt":264,"src":265},"Pasted image 20250827100101","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827100101.png",[],{"type":19,"tag":63,"props":268,"children":269},{},[270],{"type":19,"tag":67,"props":271,"children":272},{},[273],{"type":25,"value":274},"Fusion风格",{"type":19,"tag":32,"props":276,"children":277},{},[278],{"type":19,"tag":151,"props":279,"children":282},{"alt":280,"src":281},"Pasted image 20250827100129","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827100129.png",[],{"type":19,"tag":20,"props":284,"children":286},{"id":285},"_5查看python代码",[287],{"type":25,"value":288},"5  查看Python代码",{"type":19,"tag":28,"props":290,"children":291},{},[],{"type":19,"tag":32,"props":293,"children":294},{},[295,297,302,303,309],{"type":25,"value":296},"设计完窗口之后，可以直接在Qt Designer设计器中查看其对应的Python代码，方法是选择菜单栏中的",{"type":19,"tag":38,"props":298,"children":300},{"className":299},[],[301],{"type":25,"value":205},{"type":25,"value":207},{"type":19,"tag":38,"props":304,"children":306},{"className":305},[],[307],{"type":25,"value":308},"View Python Code",{"type":25,"value":310},"菜单，如图所示。",{"type":19,"tag":32,"props":312,"children":313},{},[314],{"type":19,"tag":151,"props":315,"children":318},{"alt":316,"src":317},"Pasted image 20250827100327","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827100327.png",[],{"type":19,"tag":32,"props":320,"children":321},{},[322,324,330],{"type":25,"value":323},"出现一个显示当前窗口对应Python代码的窗体，如图所示，可以直接单击窗体工具栏中的",{"type":19,"tag":38,"props":325,"children":327},{"className":326},[],[328],{"type":25,"value":329},"复制全部",{"type":25,"value":331},"按钮，将所有代码复制到Python开发工具（比如PyCharm）中进行使用。",{"type":19,"tag":32,"props":333,"children":334},{},[335],{"type":19,"tag":151,"props":336,"children":339},{"alt":337,"src":338},"Pasted image 20250827100411","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827100411.png",[],{"type":19,"tag":20,"props":341,"children":343},{"id":342},"_6将ui文件转换为py文件",[344,346,352,354,360],{"type":25,"value":345},"6  将",{"type":19,"tag":38,"props":347,"children":349},{"className":348},[],[350],{"type":25,"value":351},".ui",{"type":25,"value":353},"文件转换为",{"type":19,"tag":38,"props":355,"children":357},{"className":356},[],[358],{"type":25,"value":359},".py",{"type":25,"value":361},"文件",{"type":19,"tag":28,"props":363,"children":364},{},[],{"type":19,"tag":32,"props":366,"children":367},{},[368,370,377,379,384,385,390,392,397,399,404],{"type":25,"value":369},"在 ",{"type":19,"tag":371,"props":372,"children":374},"a",{"href":373},"\u002Fblog\u002F2025-07-16-pyqt5-pyqt5",[375],{"type":25,"value":376},"PyQt5-环境搭建",{"type":25,"value":378}," 中，配置了将",{"type":19,"tag":38,"props":380,"children":382},{"className":381},[],[383],{"type":25,"value":351},{"type":25,"value":353},{"type":19,"tag":38,"props":386,"children":388},{"className":387},[],[389],{"type":25,"value":359},{"type":25,"value":391},"文件的扩展工具Pyuic，在Qt Designer窗口中就可以使用该工具将",{"type":19,"tag":38,"props":393,"children":395},{"className":394},[],[396],{"type":25,"value":351},{"type":25,"value":398},"文件转换为对应的",{"type":19,"tag":38,"props":400,"children":402},{"className":401},[],[403],{"type":25,"value":359},{"type":25,"value":405},"文件。步骤如下：",{"type":19,"tag":32,"props":407,"children":408},{},[409,411,417],{"type":25,"value":410},"1）首先在Qt Designer设计器窗口中设计完的GUI窗口，按下",{"type":19,"tag":38,"props":412,"children":414},{"className":413},[],[415],{"type":25,"value":416},"Ctrl + S",{"type":25,"value":418},"组合快捷键将窗体UI保存到指定路径下，这里直接保存到创建的Python项目中。",{"type":19,"tag":32,"props":420,"children":421},{},[422,424,429,431,437,438,444,445,451],{"type":25,"value":423},"2）在PyCharm的项目导航窗口中选择保存好的",{"type":19,"tag":38,"props":425,"children":427},{"className":426},[],[428],{"type":25,"value":351},{"type":25,"value":430},"文件，然后选择菜单栏中的",{"type":19,"tag":38,"props":432,"children":434},{"className":433},[],[435],{"type":25,"value":436},"Tools",{"type":25,"value":207},{"type":19,"tag":38,"props":439,"children":441},{"className":440},[],[442],{"type":25,"value":443},"External Tool",{"type":25,"value":207},{"type":19,"tag":38,"props":446,"children":448},{"className":447},[],[449],{"type":25,"value":450},"Pyuic",{"type":25,"value":310},{"type":19,"tag":32,"props":453,"children":454},{},[455],{"type":19,"tag":151,"props":456,"children":459},{"alt":457,"src":458},"Pasted image 20250827100906","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827100906.png",[],{"type":19,"tag":32,"props":461,"children":462},{},[463,465,470],{"type":25,"value":464},"3）即可自动将选中的.ui文件转换为同名的",{"type":19,"tag":38,"props":466,"children":468},{"className":467},[],[469],{"type":25,"value":359},{"type":25,"value":471},"文件，双击即可查看代码，如图所示。",{"type":19,"tag":32,"props":473,"children":474},{},[475],{"type":19,"tag":151,"props":476,"children":479},{"alt":477,"src":478},"Pasted image 20250827101042","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827101042.png",[],{"type":19,"tag":20,"props":481,"children":483},{"id":482},"_7运行主窗口",[484],{"type":25,"value":485},"7  运行主窗口",{"type":19,"tag":28,"props":487,"children":488},{},[],{"type":19,"tag":32,"props":490,"children":491},{},[492,494,499,501,507,509,514,516,522],{"type":25,"value":493},"通过上面的步骤，已经将在Qt Designer中设计的窗体转换为了",{"type":19,"tag":38,"props":495,"children":497},{"className":496},[],[498],{"type":25,"value":359},{"type":25,"value":500},"脚本文件，但还不能运行，因为转换后的文件代码中没有程序入口，因此需要通过判断名称是否为",{"type":19,"tag":38,"props":502,"children":504},{"className":503},[],[505],{"type":25,"value":506},"__main__",{"type":25,"value":508},"来设置程序入口，并在其中通过",{"type":19,"tag":38,"props":510,"children":512},{"className":511},[],[513],{"type":25,"value":107},{"type":25,"value":515},"对象的",{"type":19,"tag":38,"props":517,"children":519},{"className":518},[],[520],{"type":25,"value":521},"show()函数",{"type":25,"value":523},"来显示，代码如下：",{"type":19,"tag":525,"props":526,"children":530},"pre",{"className":527,"code":528,"language":529,"meta":7,"style":7},"language-python shiki shiki-themes github-dark","import sys  \n# 程序入口，程序从此处启动PyQt设计的窗体  \nif __name__ == '__main__':  \n   app = QtWidgets.QApplication(sys.argv)  \n   MainWindow = QtWidgets.QMainWindow() # 创建窗体对象  \n   ui = Ui_MainWindow()                 # 创建PyQt设计的窗体对象  \n   ui.setupUi(MainWindow)  # 调用PyQt窗体的方法对窗体对象进行初始化设置  \n   MainWindow.show()                    # 显示窗体  \n   sys.exit(app.exec_())                # 程序关闭时退出进程\n","python",[531],{"type":19,"tag":38,"props":532,"children":533},{"__ignoreMap":7},[534,545,554,563,572,581,590,599,608],{"type":19,"tag":535,"props":536,"children":539},"span",{"class":537,"line":538},"line",1,[540],{"type":19,"tag":535,"props":541,"children":542},{},[543],{"type":25,"value":544},"import sys  \n",{"type":19,"tag":535,"props":546,"children":548},{"class":537,"line":547},2,[549],{"type":19,"tag":535,"props":550,"children":551},{},[552],{"type":25,"value":553},"# 程序入口，程序从此处启动PyQt设计的窗体  \n",{"type":19,"tag":535,"props":555,"children":557},{"class":537,"line":556},3,[558],{"type":19,"tag":535,"props":559,"children":560},{},[561],{"type":25,"value":562},"if __name__ == '__main__':  \n",{"type":19,"tag":535,"props":564,"children":566},{"class":537,"line":565},4,[567],{"type":19,"tag":535,"props":568,"children":569},{},[570],{"type":25,"value":571},"   app = QtWidgets.QApplication(sys.argv)  \n",{"type":19,"tag":535,"props":573,"children":575},{"class":537,"line":574},5,[576],{"type":19,"tag":535,"props":577,"children":578},{},[579],{"type":25,"value":580},"   MainWindow = QtWidgets.QMainWindow() # 创建窗体对象  \n",{"type":19,"tag":535,"props":582,"children":584},{"class":537,"line":583},6,[585],{"type":19,"tag":535,"props":586,"children":587},{},[588],{"type":25,"value":589},"   ui = Ui_MainWindow()                 # 创建PyQt设计的窗体对象  \n",{"type":19,"tag":535,"props":591,"children":593},{"class":537,"line":592},7,[594],{"type":19,"tag":535,"props":595,"children":596},{},[597],{"type":25,"value":598},"   ui.setupUi(MainWindow)  # 调用PyQt窗体的方法对窗体对象进行初始化设置  \n",{"type":19,"tag":535,"props":600,"children":602},{"class":537,"line":601},8,[603],{"type":19,"tag":535,"props":604,"children":605},{},[606],{"type":25,"value":607},"   MainWindow.show()                    # 显示窗体  \n",{"type":19,"tag":535,"props":609,"children":611},{"class":537,"line":610},9,[612],{"type":19,"tag":535,"props":613,"children":614},{},[615],{"type":25,"value":616},"   sys.exit(app.exec_())                # 程序关闭时退出进程\n",{"type":19,"tag":32,"props":618,"children":619},{},[620,622,627,629,635],{"type":25,"value":621},"添加完上面代码后，在当前的",{"type":19,"tag":38,"props":623,"children":625},{"className":624},[],[626],{"type":25,"value":359},{"type":25,"value":628},"文件中，单击右键，在弹出的快捷菜单中选择",{"type":19,"tag":38,"props":630,"children":632},{"className":631},[],[633],{"type":25,"value":634},"Run'文件名'",{"type":25,"value":636},"按钮，即可运行。",{"type":19,"tag":32,"props":638,"children":639},{},[640],{"type":19,"tag":151,"props":641,"children":644},{"alt":642,"src":643},"Pasted image 20250827101401","\u002Fimages\u002Fblog\u002Fpyqt5\u002FPasted%20image%2020250827101401.png",[],{"type":19,"tag":646,"props":647,"children":648},"style",{},[649],{"type":25,"value":650},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":7,"searchDepth":547,"depth":547,"links":652},[653,654,655,656,657,658,660],{"id":22,"depth":547,"text":26},{"id":112,"depth":547,"text":115},{"id":158,"depth":547,"text":161},{"id":188,"depth":547,"text":191},{"id":285,"depth":547,"text":288},{"id":342,"depth":547,"text":659},"6  将.ui文件转换为.py文件",{"id":482,"depth":547,"text":485},"markdown","content:blog:2025-07-18-pyqt5-使用Qt Designer创建窗口.md","content","blog\u002F2025-07-18-pyqt5-使用Qt Designer创建窗口.md","blog\u002F2025-07-18-pyqt5-使用Qt Designer创建窗口","md",1780801018195]