PyQt5的QSplitter+QHBoxLayout/QVBoxLayout布局以及裝部件時調用的函數

PyQt提供了一個特殊的布局管理器QSplitter，支持拖動子控件的邊界來控制子控件的大小，算是一個動態的布局管理器。

QSplitter對象中各子控件默認是橫向布局（Qt.Horizontal）的，可以使用Qt.Vertical進行垂直布局。

 總結：

    1. 可使用QSplitter進行動態布局，通過拉動網格線改變大小
    2. QHBoxLayout或者QVBoxLayout裝小部件，使用addWidget()方法
    3. QHBoxLayout和QVBoxLayout相互裝，使用addLayout()方法
    4. QFrame裝QHBoxLayout或者QVBoxLayout，使用setLayout()方法，1個QFrame只能裝1個QHBoxLayout或QVBoxLayout，裝多個，則第一個有效
    5. QSplitter裝QFrame，使用addWidget()方法
    6. QHBoxLayout或者QVBoxLayout裝QSplitter，使用addWidget()方法
    7. 主窗口self只支持.setLayout()方法，參數不能是QSplitter對象

代碼如下（python3+PyQt5）：

# coding=utf-8
import sys
from PyQt5.QtWidgets import (QApplication, QWidget, QLabel, QPushButton, QFrame,
                             QSplitter, QHBoxLayout, QVBoxLayout, QLineEdit)
from PyQt5.QtGui import QIcon
from PyQt5.QtCore import Qt


SECRET = {
    '秘鑰一:': 'ABCDEFGHIJKLMNOP',
    '秘鑰二:': 'ABCDEFGHIJKLMNOQ',
    '秘鑰三:': 'ABCDEFGHIJKLMNOR',
}


class MyGui(QWidget):
    """基礎Gui頁面"""
    def __init__(self):
        super().__init__()
        self.init_ui()  # 主窗口

    def init_ui(self):
        self.setGeometry(300, 300, 1000, 600)        # 設置主窗口的位置和大小
        self.setWindowTitle('Simple Little tools')   # 設置主窗口的標題
        self.setWindowIcon(QIcon('pics/icon1.gif'))  # 設置主窗口的圖標(左上角)

        # 通用樣式。頁面上創建的一些部件，會默認使用設置的通用樣式
        self.setStyleSheet(
            'QPushButton{font-weight: bold; background: skyblue; border-radius: 14px;'
            'width: 64px; height: 28px; font-size: 20px; text-align: center;}'
            'QPushButton:hover{background: rgb(50, 150, 255);}'
            'QLabel{font-weight: bold; font-size: 20px; color: orange}'
            'QLineEdit{width: 100px; font: 微軟雅黑}'
        )
        self.main_layout()  # 布局函數
        self.show()  # 顯示窗口

    def main_layout(self):
        """
        2x2界面。第一個區域里面裝了點東西
        """
        hbox = QHBoxLayout()  # 外層大盒子

        top_left = QFrame()  # 上左QFrame
        top_left.setFrameShape(QFrame.StyledPanel)  # 顯示邊框
        top_right = QFrame()  # 上右QFrame
        top_right.setFrameShape(QFrame.StyledPanel)

        # 布局管理器QSplitter
        
        splitter_top = QSplitter(Qt.Horizontal)  # 橫向QSplitter
          
         # QSplitter裝QFrame使用addWidget()方法　　
        splitter_top.addWidget(top_left)         # 將QFrame裝入QSplitter中
        splitter_top.addWidget(top_right)

        bottom_left = QFrame()  # 下左QFrame
        bottom_left.setFrameShape(QFrame.StyledPanel)
        bottom_right = QFrame()  # 下右QFrame
        bottom_right.setFrameShape(QFrame.StyledPanel)

        splitter_bottom = QSplitter(Qt.Horizontal)  # 橫向QSplitter
        splitter_bottom.addWidget(bottom_left)      # 將QFrame裝入QSplitter中
        splitter_bottom.addWidget(bottom_right)

        splitter = QSplitter(Qt.Vertical)  # 豎向QSplitter
        splitter.addWidget(splitter_top)   # 將橫向的兩個QSplitter裝在豎向的那個QSplitter中，這樣才是2x2，不然是1x4布局
        splitter.addWidget(splitter_bottom)

        # 谷歌驗證碼相關
        # gsk(谷歌秘鑰) --> google_secret_key、 gc(谷歌驗證碼) --> google_code
        gsk_title_label = QLabel("谷歌驗證碼生成器")
        gsk_title_label.setStyleSheet("font:24px; font-weight: bold; color: black")

        gsk_label = QLabel("秘  鑰:")  # 秘鑰 字體 QLabel
        gsk_input_box = QLineEdit()  # 秘鑰輸入框
        gsk_input_box.setPlaceholderText("請輸入谷歌秘鑰")  # 秘鑰輸入框的提示信息
        gsk_input_box.setMaxLength(16)  # 最大輸入位數
        gsk_cal_btn = QPushButton("生成")  # 生成驗證碼按鈕，點擊生成

        gc_label = QLabel("驗證碼:")  # 驗證碼字體QLabel
        # QLabel不能設置長度，使用空格占位，讓它和QLineEdit一樣長，排版好看些
        gc_show_label = QLabel("              ")
        gc_show_label.setStyleSheet('color: black; height: 28px; background: skyblue;'
                                    'border-radius: 14px;')  # gc_show_label樣式
        gc_show_label.setAlignment(Qt.AlignCenter)  # QLabel文字居中。 text-align: center無效
        gc_copy_btn = QPushButton("復制")  # 復制按鈕

        gsk_hbox1 = QHBoxLayout()  # 手動更新驗證碼布局的第一行QHBoxLayout
        gsk_hbox2 = QHBoxLayout()  # 手動更新驗證碼布局的第二行QHBoxLayout
        gsk_vbox = QVBoxLayout()   # 整個驗證碼即將會裝入一個QVBoxLayout

 # QHBoxLayout或者QVBoxLayout裝小部件時使用addWidget()方法
        gsk_hbox1.addWidget(gsk_label)
        gsk_hbox1.addWidget(gsk_input_box)
        gsk_hbox1.addWidget(gsk_cal_btn)
        gsk_hbox2.addWidget(gc_label)
        gsk_hbox2.addWidget(gc_show_label)
        gsk_hbox2.addWidget(gc_copy_btn)

 # QHBoxLayout和QVBoxLayout相互裝，需要使用addLayout()方法
        gsk_vbox.addWidget(gsk_title_label)
        gsk_vbox.addLayout(gsk_hbox1)
        gsk_vbox.addLayout(gsk_hbox2)

        gsk_vbox.addStretch()  # 拉伸因子，自動占據剩余的空白位置。如果不使用這個，則兩個QHBoxLayout會平分QFrame

 # QFrame裝QHBoxLayout或者QVBoxLayout，需要使用setLayout()方法
 # 只能裝1個，如果裝多個，則僅第一個有效果
 # 因此這里先使用一個QVBoxLayout裝下多個QHBoxLayout，之后再裝入QFrame中
        top_left.setLayout(gsk_vbox)

 # QHBoxLayout或者QVBoxLayout裝QSplitter使用addWidget()方法
        hbox.addWidget(splitter)  # 將豎向的QSplitter裝入外層大盒子hbox中

        # self只支持.setLayout()方法，參數不能是QSplitter對象
        self.setLayout(hbox)  # 主窗口裝入外層大盒子hbox

if __name__ == '__main__':
    # 創建應用程序和對象。
    # 每一pyqt5應用程序必須創建一個應用程序對象。sys.argv參數是一個列表，從命令行輸入參數。
    app = QApplication(sys.argv)
    qt = MyGui()
    # 系統exit()方法確保應用程序干凈的退出
    # exec_()方法有下划線。因為執行是一個Python關鍵詞。因此，exec_()代替
    sys.exit(app.exec_())

效果圖：（左上角圖標路徑是錯的，因此顯示的默認圖標）

如圖，整個主窗口有四個區域，第一個區域裝了部分東西。四個區域可以通過網格線拉動改變大小。
當然PyQt5還支持柵格布局（QGridLayout()）、絕對布局（move方法，通過坐標）、QHBoxLayout/QVBoxLayout布局，幾種布局應該能夠
結合起來使用，比如QHBoxLayout/QVBoxLayout+柵格布局+QSplitter等，這里沒有繼續深究了（不是因為懶、不是因為懶、不是因為懶...）