搜尋此網誌

2016年12月12日 星期一

PyQt5 教學 Part 2: Layout排版系統

此篇是介紹物件的擺放方式,物件要擺放在視窗上面總共有兩個方式
分別是用自動排版跟設定座標的方式

這個要介紹的就是Layout自動排版

自動排版有四種排版方法
  • QHBoxLayout:水平排版
  • QVBoxLayout:垂直排版
  • QGridLayout:格線排版
  • QFormLayout:表格排版



下面我會介紹垂直跟表格排版,並且組合成一個排版

layout.py
import sys
from PyQt5.QtWidgets import QApplication, QWidget, QLabel, QPushButton, QLineEdit, QVBoxLayout, QFormLayout


class MainWindow(QWidget):
    def __init__(self):
        super(self.__class__, self).__init__()
        self.setupUi()
        self.show()

    def setupUi(self):
        self.setWindowTitle("Hello World!")

        self.label = QLabel()
        self.label.setText("加油加油加油加油")

        self.button_hello = QPushButton()
        self.button_hello.setText("hello")

        self.button_world = QPushButton()
        self.button_world.setText("world")

        self.line_hello = QLineEdit()
        self.line_world = QLineEdit()

        form_layout = QFormLayout()
        form_layout.addRow(self.button_hello, self.line_hello)
        form_layout.addRow(self.button_world, self.line_world)

        h_layout = QVBoxLayout()
        h_layout.addWidget(self.label)
        h_layout.addLayout(form_layout)

        self.setLayout(h_layout)


if __name__ == "__main__":
    app = QApplication(sys.argv)
    MainWindow = MainWindow()
    sys.exit(app.exec_())



執行結果如下


透過這個排版管理,顯而易見的我們不需要設定任何座標,
就可以簡單的把物件擺放上去。

Part.1 比起來,這一節我們多引用了一些東西。

  • QLabel:標籤,用於顯示資料
  • QPushButton:按鈕,可以拿來點擊
  • QLineEdit:文字框,可以輸入資料
  • QVBoxLayout:垂直排版
  • QFormLayout:表格排版



接著介紹程式碼內部的運作

self.label = QLabel()
self.label.setText("加油加油加油加油")

self.button_hello = QPushButton()
self.button_hello.setText("hello")

self.button_world = QPushButton()
self.button_world.setText("world")

self.line_hello = QLineEdit()
self.line_world = QLineEdit()

在這8行中做的事情就是新增一個物件(QLabel, QPushButton, QLineEdit),
產生完物件之後,設定物件的顯示文字




form_layout = QFormLayout()
form_layout.addRow(self.button_hello, self.line_hello)
form_layout.addRow(self.button_world, self.line_world)

產生一個表格排版工具,
先把hello的Button跟LineEdit新增進排版工具內
再把world的Button跟LineEdit新增進排版工具內

請注意這邊使用的是 addRow跟其他的排版工具會不相同。



h_layout = QVBoxLayout()
h_layout.addWidget(self.label)
h_layout.addLayout(form_layout)

產生一個垂直排版工具,
把標籤(加油)新增進垂直排版的工具
然後把我們剛剛製作好的表格排版新增進這個排版

水平、垂直、格線都是使用addWidget,另外要注意添加layout時另外使用addLayout





self.setLayout(h_layout)


最後將我們設定好的layout新增進我們的QWidget裡面



上面就是整個排版管理工具的解說,利用不同的組合方法
就可以完成大多數的排版。
如果有任何疑問或指教,歡迎底下回覆,謝謝。

PyQt5 教學 Part 1: 安裝與開始 PyQt5 教學 Part 3: 信號觸發

1 則留言:

  1. 你好
    請問為什麼form_layout 跟 h_layout 宣告時前面不用加 self.?
    謝謝.

    回覆刪除

對於文章內有任何問題,都可以提出來討論看看哦。