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

Q : Python程式，我要用PyQt5.QtWidgets 做一个 Windows视窗程式，
在同一层（QVBoxLayout）里面，有三个水平布局（QHBoxLayout）。
由左而右，分别是四个按钮。一个textedit。四个按钮。
这些按钮由上而下，一次只出现一个按钮。一旦按下按钮，按钮就会变成绿色底色？

 

太辛苦了，没有工具切割版面，像是一笔一画在 "刻钢板"

建议完成上一篇文章后，有点概念再来做

上一篇文章： Python + PyQt5.QtWidgets - Windows视窗程式的UI基础架构 #1（上中下三层，每层有两个按钮範例）

                     https://dotblogs.com.tw/mis2000lab/2025/03/19/Python_PyQt5_QtWidgets_Layout_20250318 

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


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

   def initUI(self):
      self.setWindowTitle('多层布局')
      self.setGeometry(100, 100, 600, 400)

      main_layout = QVBoxLayout()
      ############################################################(start)
      h_layout = QHBoxLayout()
      # 左边四个按钮
      v_layout_left = QVBoxLayout()
      # v_layout_left.setSpacing(0)  # 按钮的间距（上下、垂直）。无效！
      for i in range(4):
         button = QPushButton(f'按钮 {i+1}')
         # button.setStyleSheet("margin-bottom: 2px;")  # 调整按钮之间的距离。无效！
         button.clicked.connect(self.change_color)
         v_layout_left.addWidget(button)
      h_layout.addLayout(v_layout_left)

      # 中间的TextEdit
      text_edit = QTextEdit()
      text_edit.setFixedSize(200, 200)  # 设定 QTextEdit 的尺寸
      h_layout.addWidget(text_edit)

      # 右边四个按钮
      v_layout_right = QVBoxLayout()
      # v_layout_right.setSpacing(0)  # 按钮的间距（上下、垂直）。无效！
      for i in range(4):
         button = QPushButton(f'按钮 {i+5}')
         # button.setStyleSheet("margin-bottom: 2px;")  # 调整按钮之间的距离。无效！
         button.clicked.connect(self.change_color)
         v_layout_right.addWidget(button)
      h_layout.addLayout(v_layout_right)
      ############################################################(end)
      
      main_layout.addLayout(h_layout)

      self.setLayout(main_layout)

   # 为每个按钮连接了clicked信号，并将其连接到change_color方法。当按钮被按下时，change_color方法会改变按钮的背景颜色为绿色。
   def change_color(self):
      sender = self.sender()
      sender.setStyleSheet("background-color: green;")
 

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

 

 

 

 

 

 

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

犹如一人以我的烛火点烛，光亮与他同在，我却不因此身处黑暗。----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.主讲   事先录好的影片，并非上课侧录！   观看时，有如「一对一」面对面讲课。