Python + PyQt5.QtWidgets - Windows视窗程式的UI基础架构 #1（上中下三层，每层有两个

Q : 用PyQt5.QtWidgets 做一个 Windows视窗程式，画面分呈上中下三层。

第一层（上层），先有一个 Label。然后有两个按钮。第二层（中层），有一个TextEdit。第三层（下层）有三个按钮。 

如同上面的需求，我要作一个雏形。但没有好的开发工具，单纯用程式码描述UI、切版面，真的很辛苦

Q : 用PyQt5.QtWidgets 做一个 Windows视窗程式，画面分呈上中下三层。

    第一层（上层），先有一个 Label。然后底下有两个按钮。

    第二层（中层），有一个TextEdit。

    第三层（下层）有三个按钮。 

# coding=utf-8

import sys
from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout, QHBoxLayout, QLabel, QPushButton, QTextEdit

class MyWindow(QWidget):
   def __init__(self):
       super().__init__()
       self.initUI()

   def initUI(self):
       self.setWindowTitle('三层视窗範例')
       self.setGeometry(100, 100, 800, 600)

       # 创建 主 垂直布局
       main_layout = QVBoxLayout()

       # 第一层（上层）
       top_layout = QVBoxLayout()  # 注意！这一层是垂直布局（V） 

       label = QLabel('这是上层的Label - 视窗主题（标题文字） ')
       top_layout.addWidget(label)

       button1 = QPushButton('按钮1')
       button2 = QPushButton('按钮2')

       button_layout = QHBoxLayout()   # 水平（H）布局。这一列（Row, 这一行）有两个按钮 
       button_layout.addWidget(button1)
       button_layout.addWidget(button2)

       top_layout.addLayout(button_layout)  # 这一层里面，又分成两小层（上: Label、下: button）

       main_layout.addLayout(top_layout)  # 第一层（上层）完成 

       # 第二层（中层）
       middle_layout = QVBoxLayout()  # 注意！这一层是垂直布局（V） 

       text_edit = QTextEdit()
       middle_layout.addWidget(text_edit)

       main_layout.addLayout(middle_layout)

       # 第三层（下层）#####################################################
       bottom_layout = QHBoxLayout()  # 注意！这一层是水平布局（H），跟上面两层不同！ 

      ####################################################################

       buttonA = QPushButton('按钮A')
       buttonB = QPushButton('按钮B')
       buttonC = QPushButton('按钮C')
       bottom_layout.addWidget(buttonA)
       bottom_layout.addWidget(buttonB)
       bottom_layout.addWidget(buttonC)

       main_layout.addLayout(bottom_layout)

      ####################################################################

       self.setLayout(main_layout)  # 最后，完成！ 把上面三层组合起来。如下图

  

if __name__ == '__main__':
   app = QApplication(sys.argv)
   window = MyWindow()
   window.show()
   sys.exit(app.exec_())

 

说真的，没有对照上面的图片一起看，还真的看不懂！

没有一个UI工具帮忙，只看文字、程式码真的不容易

下一篇文章：Python + PyQt5.QtWidgets - Windows视窗程式的UI基础架构 #2 多层布局範例

                     https://dotblogs.com.tw/mis2000lab/2025/03/20/Python_PyQt5_QtWidgets_Muliti-Layout_20250319 

 

 

我将思想传授他人， 他人之所得，亦无损于我之所有；

犹如一人以我的烛火点烛，光亮与他同在，我却不因此身处黑暗。----Thomas Jefferson

线上课程教学，远距教学 (Web Form 约 51hr)  https://dotblogs.com.tw/mis2000lab/2016/02/01/aspnet_online_learning_distance_education_VS2015

线上课程教学，远距教学 (ASP.NET MVC 约 140hr)  https://dotblogs.com.tw/mis2000lab/2018/08/14/ASPnet_MVC_Online_Learning_MIS2000Lab

 

写信给我，不要私讯 --  mis2000lab (at) yahoo.com.tw  或  school (at) mis2000lab.net

 (1) 第一天 ASP.NET MVC5 完整影片（5.5小时 / .NET 4.x版）免费试听。影片 https://youtu.be/9spaHik87-A 

 (2) 第一天 ASP.NET Core MVC 完整影片（3小时 / .NET Core 6.0~8.0）免费试听。影片 https://youtu.be/TSmwpT-Bx4I 

[学员感言] mis2000lab课程评价 - ASP.NET MVC , WebForm  。 https://mis2000lab.medium.com/%E5%AD%B8%E5%93%A1%E6%84%9F%E8%A8%80-mis2000lab%E8%AA%B2%E7%A8%8B%E8%A9%95%E5%83%B9-asp-net-mvc-webform-77903ce9680b  

ASP.NET远距教学、线上课程（Web Form + MVC）。 第一天课程， "完整" 试听。 

.........   facebook社团   https://www.facebook.com/mis2000lab   ......................

.........  YouTube (ASP.NET) 线上教学影片  https://www.youtube.com/channel/UC6IPPf6tvsNG8zX3u1LddvA/

 

Blog文章 "附的範例" 无法下载，请看 https://dotblogs.com.tw/mis2000lab/2016/03/14/2008_2015_mis2000lab_sample_download

请看我们的「售后服务」範围（严格认定）。

...................................................................................................................................................... 

ASP.NET MVC  => .NET Core MVC 线上教学  ...... 第一天课程 完整内容 "免费"让您评估 / 试听

[远距教学、教学影片] ASP.NET (Web Form) 课程 上线了！MIS2000Lab.主讲   事先录好的影片，并非上课侧录！   观看时，有如「一对一」面对面讲课。