Skip to content

[PyQt5] 基本教學(7) hide, show, 自動適應窗口大小

Last Updated on 2021-04-10 by Clay

最近開始對布局元件的擺設有點追求了，不再像之前那樣隨便將元件亂擺。拜此所賜，我今天想要將兩件很重要的處理方法記錄下來——『如何隱藏元件、顯示元件』、『如何讓元件自動適應窗口大小』。

如何隱藏、顯示元件這件事比較直觀，就是能夠讓我們在界面上隱藏住我們的一些元件，我猜想這通常用在循序漸進的表單上，等到使用者需要時再把必要的元件展示出來。當然啦，這只是我個人的想法。

自動適應窗口大小這件事情聽起來有些拗口，我直接使用圖示來說明下：

這是我放置的一張圖片、兩個按鈕。

但是在我將這個 GUI 全螢幕之後，它的大小仍然沒有變化：

這種地方對於我們開發界面實在非常麻煩；以下我們就來進行這方面的教學吧。

Hide, Show

首先，我想先簡單提一下怎麼隱藏我們的布局元件，又該怎麼樣顯示我們隱藏起來的元件。

其實這兩個功能非常地單純，使用 hide() 以及 show() 就可以完成。

我們先來看看這個布局元件的程式碼（由 PyUIC 轉換出來的）：

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'resize_blog.ui'
#
# Created by: PyQt5 UI code generator 5.11.3
#
# WARNING! All changes made in this file will be lost!

from PyQt5 import QtCore, QtGui, QtWidgets

class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(840, 573)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.label = QtWidgets.QLabel(self.centralwidget)
        self.label.setGeometry(QtCore.QRect(0, 0, 421, 391))
        self.label.setText("")
        self.label.setPixmap(QtGui.QPixmap("../Board/Image/board02.png"))
        self.label.setObjectName("label")
        self.pushButton = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton.setGeometry(QtCore.QRect(520, 27, 171, 121))
        self.pushButton.setObjectName("pushButton")
        self.pushButton_2 = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton_2.setGeometry(QtCore.QRect(520, 170, 171, 121))
        self.pushButton_2.setObjectName("pushButton_2")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 840, 25))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.pushButton.setText(_translate("MainWindow", "DisplayButton"))
        self.pushButton_2.setText(_translate("MainWindow", "ShowPic"))


然後我們寫個簡單的 Python 檔繼承這份檔案。

# -*- coding: utf-8 -*-
from PyQt5 import QtWidgets
from resize_blog import Ui_MainWindow
import sys


class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.ui.label.setScaledContents(True)


if __name__ == '__main__':
    app = QtWidgets.QApplication([])
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())


我們可以看到，我只是使用了 setScaledContents(True) 自動對圖片進行了縮放而已，這樣才能完整顯示整個圖片。

就像這樣。

那麼，今天我們教導該如何隱藏元件。首先就拿 ShowPic 這個按鈕來測試。

# -*- coding: utf-8 -*-
from PyQt5 import QtWidgets
from resize_blog import Ui_MainWindow
import sys


class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.ui.label.setScaledContents(True)

        # Hide
        self.ui.pushButton_2.hide()


if __name__ == '__main__':
    app = QtWidgets.QApplication([])
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())


Output:

我們可以看到按鈕少了一個，被我們隱藏起來了。

緊接著我們測試按下按鈕時還原原本的按鈕。

# -*- coding: utf-8 -*-
from PyQt5 import QtWidgets
from resize_blog import Ui_MainWindow
import sys


class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        self.ui.label.setScaledContents(True)

        # Hide
        self.ui.pushButton_2.hide()

        # Event
        self.ui.pushButton.clicked.connect(self.showButtonEvent)

    def showButtonEvent(self):
        self.ui.pushButton_2.show()


if __name__ == '__main__':
    app = QtWidgets.QApplication([])
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())


Output:

按下按鍵之後：

出現了！我們的按鈕！

所以，只要熟悉 hide() 或 show()，就可以自由地選擇自己的元件是否要出現於視窗上。

自動適應窗口大小

這種方法感覺要弄得漂亮其實並不容易，目前我是直接使用 Qt Designer 來直接製作這樣的 GUI。

我以前有提過，想要讓元件自動適應窗口大小便只能使用布局的排列元件。這裡我就以剛才的範例來說明。

將按鈕元件選擇垂直排列。

然後對著整個布局按『水平布局』。

我們的元件就會自動排列成這樣。如果有對元件大小位置有不滿的地方，你可以到右邊的參數欄位去做更改。

緊接著我們存成 UI 檔，使用 PyUIC 自動轉換，並且再次執行我們的程式碼。（程式碼不須改動，因為我們界面跟功能是分離的。）

執行結果如下：

一開始的樣子。

點擊按鈕之後，第二個按鈕自動生成，並且按照原先設定的垂直排列。

然後我們再次將界面全螢幕化，這次我們會發現元件按照窗口被拉伸了。

當然這樣還不盡美觀，不過已經基本達到元件自動適應窗口大小的功能了。剩下的調整，大致不外乎是調整元件最大上限以及形狀。

那麼，這次的 PyQt5 教學至此告一段落。

Read More

Tags:

1 thought on “[PyQt5] 基本教學(7) hide, show, 自動適應窗口大小”

Leave a Reply