[PyQt5] 基本教學(6) 下拉選單、BoxLayout

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_())

# -*- 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_())

# -*- 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

https://www.riverbankcomputing.com/static/Docs/PyQt5/index.html?highlight=qicon

2 thoughts on “[PyQt5] 基本教學(6) 下拉選單、BoxLayout”

kayseri escort 2020-05-07 at 11:22


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!
1. ccs96307
  
  ccs96307 2020-05-07 at 12:06
  
  
  Thank you!

[PyQt5] 基本教學(6) 下拉選單、BoxLayout

下拉式選單

BoxLayout

References

Read More

2 thoughts on “[PyQt5] 基本教學(6) 下拉選單、BoxLayout”

Leave a Reply取消回覆

[PyQt5] 基本教學(6) 下拉選單、BoxLayout

下拉式選單

BoxLayout

References

Read More

分享此文：

2 thoughts on “[PyQt5] 基本教學(6) 下拉選單、BoxLayout”

Leave a Reply取消回覆