Last Updated on 2021-04-10 by Clay
目前為止,我認為已經介紹過許多簡單便可調用、也是開發界面比較常用到的元件。(其實只是我自己常用到,哈哈哈哈)
所以今天我把比較不常放在一起講的『下拉式選單』以及『BoxLayout』放在一起講,希望能趕快結束掉基本介紹的部份。
往後,我想我還是會紀錄我開發界面(使用 PyQt5)的心得,畢竟這種心得筆記比較適合放在 Blog,而非 Github 這種代碼託管平台。
同樣,若你想參考 PyQt5 的官方指南,你可以參考:
下拉式選單
一樣,首先我先使用 Qt Desinger 拉出簡單的界面。
所使用到的元件分別為 comboBox、兩個 Label。
# -*- coding: utf-8 -*- from PyQt5 import QtWidgets, QtGui, QtCore from comboBox import Ui_MainWindow import sys class MainWindow(QtWidgets.QMainWindow): def __init__(self): super(MainWindow, self).__init__() self.ui = Ui_MainWindow() self.ui.setupUi(self) if __name__ == '__main__': app = QtWidgets.QApplication([]) window = MainWindow() window.show() sys.exit(app.exec_())
Output:
由於目前什麼功能都沒有放入,所以下拉式選單什麼東西都沒有顯示。
我們稍微修改我們的程式碼:
# -*- coding: utf-8 -*- from PyQt5 import QtWidgets, QtGui, QtCore from comboBox import Ui_MainWindow import sys class MainWindow(QtWidgets.QMainWindow): def __init__(self): super(MainWindow, self).__init__() self.ui = Ui_MainWindow() self.ui.setupUi(self) # ComboBox choices = ['1', '2', '3', '4'] self.ui.comboBox.addItems(choices) self.ui.comboBox.currentIndexChanged.connect(self.display) self.display() def display(self): self.ui.label_2.setText('你目前選擇的是:%s' % self.ui.comboBox.currentText()) if __name__ == '__main__': app = QtWidgets.QApplication([]) window = MainWindow() window.show() sys.exit(app.exec_())
ComboBox 的部份我們設定好了四個選項:1、2、3、4
然後我們使用 addItems 將這個 list 賦給 comboBox 元件。
使用 currentIndexChanged()
讓 comboBox 在每次選項改變的時候呼叫 self.display()
這個 function。
display() 這個 function 的功能在於將當前 comboBox 的選項加入 label_2,我們來看看效果。
這樣,就完成了簡單的下拉式選單的操作!
BoxLayout
這其實是一個很簡單的部份,用過 Android Studio 的人們想必會很熟悉這裡的觀念。
Box Layout 我基本上不打算講解 gridLayout,只打算講解簡單的 QVBoxLayout 以及 QHBoxLayout。
基本上你可以理解為:QVBoxLayout 是讓元件排列成縱向的模樣、QHVBoxLayout可以讓元件排列成橫向的模樣。
之後我們可以設計不同的元件排列模式,並依此實現窗口的自適應布局格式。
先上一張簡單的範例:
我們可以看到我已經事先設定好了兩種布局視窗,接著我們都分別填入四個 PushButton:
這樣有沒有比較能理解我所說的不同的排列模式的意思了呢?
當然,你在不同的布局格式中一樣可以填入不同的排列模式,讓自己的布局顯得更加精美,這點就任各位盡情嘗試了。
References
Read More
- [PyQt5] 基本教學(1) 安裝 PyQt5,印出 Hello World!
- [PyQt5] 基本教學(2) QLabel, QLineEdit, QPushButtom
- [PyQt5] 基本教學(3) QMainWindow, QIcon, QPixmap, QPalette
- [PyQt5] 基本教學(4) 菜單、工具欄
- [PyQt5] 基本教學(5) 進度條、滑動條、旋轉鈕
- [PyQt5] 基本教學(6) 下拉選單、BoxLayout
- [PyQt5] 基本教學(7) hide, show, 自動適應窗口大小
- [PyQt5] 基本教學(8) QTimer, QlcdNumber
- [PyQt5] 基本教學(9) QCaledar,使用 Python 輕鬆創造日曆元件
- [PyQt5] 基本教學(10) 使用鍵盤輸入指令、判斷滑鼠點擊位置
- [PyQt5] 基本教學(11) 使用 QColorDialog 調色盤來進行顏色的設定
Thanks for a marvelous posting! I certainly enjoyed reading it, you are a great
author.I will remember to bookmark your blog and definitely will come back later in life.
I want to encourage continue your great posts, have a nice
holiday weekend!
Thank you!