φυβλαςのβλογ
บล็อกของ phyblas



pyqt เบื้องต้น บทที่ ๑๒: การสร้างและใช้งานกล่องเลือกข้อความ
เขียนเมื่อ 2021/08/14 08:11
แก้ไขล่าสุด 2021/09/28 16:42

ต่อจาก บทที่ ๑๑

บทนี้จะพูดถึง QComboBox ซึ่งเป็นกล่องที่มีข้อความเป็นตัวเลือกให้เลือกข้อความใดข้อความหนึ่ง

QComboBox มีไว้ใช้สำหรับเลือกอย่างใดอย่างหนึ่ง เช่นเดียวกับ QRadioButton ที่แนะนำไปในบทที่แล้ว แต่วิธีการสร้างและใช้งานดูจะเรียบง่ายว่า




การสร้างกล่องเลือกข้อความ {QComboBox}

การใช้งาน QComboBox นั้นเริ่มจากสร้างออบเจ็กต์ตัว QComboBox ขึ้นมาแล้วใช้เมธอด .addItem เพื่อใส่ข้อความตัวเลือกทั้งหมดที่ต้องการลงไป

ตัวอย่าง
import sys
from PyQt5.QtWidgets import QApplication,QWidget,QLabel,QComboBox,QHBoxLayout

qAp = QApplication(sys.argv)
natang = QWidget()
natang.setStyleSheet('font-family: Tahoma; color: #914; font-size: 18px;')

hbl = QHBoxLayout()
natang.setLayout(hbl)
khokhwam = QLabel('อยู่ภาค')
hbl.addWidget(khokhwam)
combo = QComboBox()
combo.addItem('เหนือ')
combo.addItem('กลาง')
combo.addItem('อีสาน')
combo.addItem('ใต้')
# หรือ combo.addItems(['เหนือ','กลาง','อีสาน','ใต้'])
hbl.addWidget(combo)

natang.show()
qAp.exec_()






การตั้งให้เลือกตัวเลือก {.setCurrentIndex .setCurrentText}

ปกติโดยเริ่มต้น กล่องเลือกข้อความจะถูกตั้งให้เลือกที่ตัวเลือกแรกอยู่ แต่ก็สามารถตั้งให้เป็นตัวอื่นได้โดยใช้เมธอด .setCurrentIndex โดยระบุลำดับของตัวเลือกที่ต้องการ (เริ่มจาก 0) หรือใช้ .setCurrentText โดยระบุข้อความที่ต้องการให้เลือก

แต่หากต้องการให้ยกเลิกตัวเลือกทั้งหมดก็ให้ใส่ .setCurrentIndex แล้วใส่เป็นค่าที่ไม่มีอยู่ก็จะเป็นการไม่เลือกตัวไหนเลย

ตัวอย่าง ลองสร้างกล่องเลือกข้อความมา พร้อมกับปุ่มที่เมื่อกดแล้วยกเลิกตัวเลือก
import sys
from PyQt5.QtWidgets import QApplication,QWidget,QComboBox,QHBoxLayout,QPushButton

qAp = QApplication(sys.argv)
natang = QWidget()
hbl = QHBoxLayout()
natang.setLayout(hbl)

def lueak(): # เมื่อกดปุ่มแล้วให้ยกเลิกการเลือกในกล่อง
    combo.setCurrentIndex(-1)

pumkot = QPushButton('o_O"')
hbl.addWidget(pumkot)
pumkot.clicked.connect(lueak)

combo = QComboBox() # กล่องเลือกข้อความ
combo.addItems(['alpha','beta','gamma']) # ใส่ข้อความไป ๓ ตัว
hbl.addWidget(combo)

natang.show()
qAp.exec_()



ขอยกอีกตัวอย่างคือกรณีที่ใช้ .setCurrentText ซึ่งจะกำหนดด้วยสายอักขระที่ต้องการเลือก แทนที่จะใช้เลขลำดับเหมือนอย่าง .setCurrentIndex

นอกจากนี้ ถ้าหากสายอักขระที่ใส่ไปนั้นไม่มีอยู่ในตัวเลือก ก็จะไม่เกิดอะไรขึ้น

ตัวอย่าง ลองสร้างปุ่มที่กดแล้วให้มีการเลือก
import sys
from PyQt5.QtWidgets import QApplication,QWidget,QComboBox,QHBoxLayout,QVBoxLayout,QPushButton

qAp = QApplication(sys.argv)
natang = QWidget()
hbl = QHBoxLayout()
natang.setLayout(hbl)

combo = QComboBox()
combo.addItem('muramura')
combo.addItem('iraira')
combo.addItem('sarasara')
hbl.addWidget(combo)
combo.setCurrentText('iraira')

vbl = QVBoxLayout()
hbl.addLayout(vbl)
pumkot = QPushButton('') # ปุ่มนี้กดแล้วยกเลิกการเลือก
pumkot.clicked.connect(lambda: combo.setCurrentIndex(-1)) 
vbl.addWidget(pumkot)
pumkot = QPushButton('mm')
pumkot.clicked.connect(lambda: combo.setCurrentText('muramura'))
vbl.addWidget(pumkot)
pumkot = QPushButton('ff') # ปุ่มนี้ไม่มีในตัวเลือก กดแล้วจะไม่เกิดอะไรขึ้น
pumkot.clicked.connect(lambda: combo.setCurrentText('furafura'))
vbl.addWidget(pumkot)
pumkot = QPushButton('ii')
pumkot.clicked.connect(lambda: combo.setCurrentText('iraira'))
vbl.addWidget(pumkot)
pumkot = QPushButton('ss')
pumkot.clicked.connect(lambda: combo.setCurrentText('sarasara'))
vbl.addWidget(pumkot)

natang.show()
qAp.exec_()

ก็จะได้ปุ่ม ๕ ปุ่มแบบนี้ ซึ่งถ้ากดปุ่มไหนก็จะเป็นการเลือกตัวเลือกนั้น แต่ในที่นี้ในช่องตัวเลือกมีแค่ ๓ ตัว ถ้ากดปุ่ม 'ff' ซึ่งใช้ .setCurrentText เป็นคำว่า furafura ซึ่งไม่มีตัวเลือกก็จะไม่เกิดอะไรขึ้น



อย่างไรก็ตาม ถ้าหากกล่องข้อความนี้ตั้งให้สามารถแก้ข้อความเอาเองได้ โดยใช้ .setEditable ดังที่จะกล่าวถึงต่อไป แบบนี้ .setCurrentText ก็จะแก้เป็นข้อความที่ต้องการไม่ว่าจะมีในตัวเลือกก็ตาม




การตั้งให้แก้ข้อความในกล่องได้ด้วย {.setEditable}

ปกติแล้วข้อความที่เป็นตัวเลือกในกลุ่มจะเลือกได้แค่ข้อความที่อยู่ในตัวเลือกเท่านั้น แต่ก็สามารถทำให้พิมพ์ข้อความเพิ่มไปเองนอกจากตัวเลือกได้ โดยใช้เมธอด .setEditable ตั้งเป็น True

ตัวอย่างเช่น
import sys
from PyQt5.QtWidgets import QApplication,QWidget,QComboBox,QLabel,QVBoxLayout,QPushButton

qAp = QApplication(sys.argv)
natang = QWidget()
natang.setStyleSheet('font-family: Tahoma; font-size: 17px;')
vbl = QVBoxLayout()
natang.setLayout(vbl)

khokhwam = QLabel('จะเบิกเงินเท่าไหร่')
vbl.addWidget(khokhwam)

combo = QComboBox()
vbl.addWidget(combo)
for ngoen in [0,100,500,1000,5000]:
    combo.addItem('%d'%ngoen)
combo.setCurrentText('0')
combo.setEditable(True)

natang.show()
qAp.exec_()

แบบนี้จะมีตัวเลือกให้เลือก ๕ ตัว แต่จะป้อนอะไรอย่างอื่นไปเองก็ได้






การดูว่าเลือกตัวไหนอยู่ {.currentIndex .currentText}

ถ้าจะดูว่ากล่องเลือกนั้นถูกเลือกตัวไหนอยู่ก็ใช้เมธอด .currentIndex จะได้เลขลำดับ (เริ่มนับจาก 0)

ส่วนถ้าจะเอาข้อความที่ถูกเลือกอยู่ก็ใช้เมธอด .currentText

ตัวอย่าง ลองสร้างกล่องข้อความแล้ววางปุ่มไว้ข้างๆให้ถ้ากดปุ่มนั้นข้อความและลำดับที่เลือกจะปรากฏที่ตัวปุ่ม
import sys
from PyQt5.QtWidgets import QApplication,QWidget,QPushButton,QComboBox,QHBoxLayout

qAp = QApplication(sys.argv)
natang = QWidget()
hbl = QHBoxLayout()
natang.setLayout(hbl)

combo = QComboBox()
hbl.addWidget(combo)
for i in range(8):
    combo.addItem(str((i+3)*4)+' คน')

pumkot = QPushButton('')
hbl.addWidget(pumkot)
pumkot.setFixedSize(240,45)
pumkot.setStyleSheet('font-family: Tahoma; font-size: 16px;')
def saikhokhwam():
    pumkot.setText('ลำดับที่: %d | ข้อความ: %s'%(combo.currentIndex(),combo.currentText()))
pumkot.clicked.connect(saikhokhwam)

natang.show()
qAp.exec_()






การทำคำสั่งเมื่อถูกกดเลือก {.activated}

ถ้ามีคำสั่งที่ต้องการให้ทำเมื่อมีการกดเลือกตัวเลือกภายในกล่องตัวเลือกก็ให้ใส่ที่ .activated ค่าพารามิเตอร์ที่ได้มาคือเลขลำดับที่ถูกเลือกอยู่นั้น

ตัวอย่างเช่น
import sys
from PyQt5.QtWidgets import QApplication,QWidget,QComboBox

qAp = QApplication(sys.argv)
natang = QWidget()
combo = QComboBox(natang)
def lueaklaeo(i):
    print('เลือกข้อความ %s ลำดับที่ %d'%(combo.currentText(),i))
combo.activated.connect(lueaklaeo)
combo.addItems(['kujira','ika','iruka','kurage'])

natang.show()
qAp.exec_()






การทำคำสั่งเมื่อเปลี่ยนตัวเลือก {.currentIndexChanged .currentTextChanged}

ฟังก์ชันที่กำหนดที่ .activated นั้นจะทำงานทุกครั้งที่มีการกดเลือกตัวเลือก ไม่ว่าตัวเลือกจะถูกเปลี่ยนหรือไม่ แต่ถ้าหากต้องการให้ทำงานเฉพาะเมื่อตัวเลือกเปลี่ยนแปลงก็อาจใช้ .currentIndexChanged แทน

ค่าพารามิเตอร์ที่ได้ใน .currentIndexChanged ก็คือลำดับที่ถูกเลือก

นอกจากนี้ยังมี .currentTextChanged ซึ่งคล้ายกับ .currentIndexChanged แต่พารามิเตอร์ที่ได้จะเป็นข้อความที่ถูกเลือก และนอกจากนี้แล้วถ้าตั้ง .setEditable(True) แล้ว .currentTextChanged ก็จะทำงานเมื่อแก้ข้อความในกล่องไปโดยตรงด้วย

ตัวอย่าง
import sys
from PyQt5.QtWidgets import QApplication,QWidget,QLabel,QComboBox,QHBoxLayout

qAp = QApplication(sys.argv)
natang = QWidget()
hbl = QHBoxLayout()
natang.setLayout(hbl)
khokhwam = QLabel('')
hbl.addWidget(khokhwam)

def lueak(text):
    khokhwam.setText('ขอ '+text+' ชาม')

combo = QComboBox()
hbl.addWidget(combo)
for i in range(9):
    combo.addItem(str((i+4)*3))
combo.currentTextChanged.connect(lueak)

natang.show()
qAp.exec_()






สรุปท้ายบท

ในบทนี้ได้เขียนถึงการสร้างและใช้งานกล่องเลือกข้อความ ซึ่งสามารถใช้ทั้งเลือกตัวเลือกที่อยู่ในกล่อง หรือสามารถพิมพ์ข้อความอื่นที่ต้องการไปเองได้ด้วย

ทั้ง QLineEdit และ QComboBox ต่างก็ใช้เพื่อเลือกหรือป้อนข้อความสายอักขระเหมือนกัน ส่วนในบทต่อไปจะพูดถึง widget ที่ใช้สำหรับป้อนข้อมูลเป็นค่าตัวเลข



อ่านบทถัดไป >> บทที่ ๑๓





-----------------------------------------

囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧囧

ดูสถิติของหน้านี้

หมวดหมู่

-- คอมพิวเตอร์ >> เขียนโปรแกรม >> python >> pyqt

ไม่อนุญาตให้นำเนื้อหาของบทความไปลงที่อื่นโดยไม่ได้ขออนุญาตโดยเด็ดขาด หากต้องการนำบางส่วนไปลงสามารถทำได้โดยต้องไม่ใช่การก๊อปแปะแต่ให้เปลี่ยนคำพูดเป็นของตัวเอง หรือไม่ก็เขียนในลักษณะการยกข้อความอ้างอิง และไม่ว่ากรณีไหนก็ตาม ต้องให้เครดิตพร้อมใส่ลิงก์ของทุกบทความที่มีการใช้เนื้อหาเสมอ

สารบัญ

รวมคำแปลวลีเด็ดจากญี่ปุ่น
มอดูลต่างๆ
-- numpy
-- matplotlib

-- pandas
-- manim
-- opencv
-- pyqt
-- pytorch
การเรียนรู้ของเครื่อง
-- โครงข่าย
     ประสาทเทียม
ภาษา javascript
ภาษา mongol
ภาษาศาสตร์
maya
ความน่าจะเป็น
บันทึกในญี่ปุ่น
บันทึกในจีน
-- บันทึกในปักกิ่ง
-- บันทึกในฮ่องกง
-- บันทึกในมาเก๊า
บันทึกในไต้หวัน
บันทึกในยุโรปเหนือ
บันทึกในประเทศอื่นๆ
qiita
บทความอื่นๆ

บทความแบ่งตามหมวด



ติดตามอัปเดตของบล็อกได้ที่แฟนเพจ

  ค้นหาบทความ

  บทความแนะนำ

ตัวอักษรกรีกและเปรียบเทียบการใช้งานในภาษากรีกโบราณและกรีกสมัยใหม่
ที่มาของอักษรไทยและความเกี่ยวพันกับอักษรอื่นๆในตระกูลอักษรพราหมี
การสร้างแบบจำลองสามมิติเป็นไฟล์ .obj วิธีการอย่างง่ายที่ไม่ว่าใครก็ลองทำได้ทันที
รวมรายชื่อนักร้องเพลงกวางตุ้ง
ภาษาจีนแบ่งเป็นสำเนียงอะไรบ้าง มีความแตกต่างกันมากแค่ไหน
ทำความเข้าใจระบอบประชาธิปไตยจากประวัติศาสตร์ความเป็นมา
เรียนรู้วิธีการใช้ regular expression (regex)
การใช้ unix shell เบื้องต้น ใน linux และ mac
g ในภาษาญี่ปุ่นออกเสียง "ก" หรือ "ง" กันแน่
ทำความรู้จักกับปัญญาประดิษฐ์และการเรียนรู้ของเครื่อง
ค้นพบระบบดาวเคราะห์ ๘ ดวง เบื้องหลังความสำเร็จคือปัญญาประดิษฐ์ (AI)
หอดูดาวโบราณปักกิ่ง ตอนที่ ๑: แท่นสังเกตการณ์และสวนดอกไม้
พิพิธภัณฑ์สถาปัตยกรรมโบราณปักกิ่ง
เที่ยวเมืองตานตง ล่องเรือในน่านน้ำเกาหลีเหนือ
ตระเวนเที่ยวตามรอยฉากของอนิเมะในญี่ปุ่น
เที่ยวชมหอดูดาวที่ฐานสังเกตการณ์ซิงหลง
ทำไมจึงไม่ควรเขียนวรรณยุกต์เวลาทับศัพท์ภาษาต่างประเทศ

บทความแต่ละเดือน

2024年

1月 2月 3月 4月
5月 6月 7月 8月
9月 10月 11月 12月

2023年

1月 2月 3月 4月
5月 6月 7月 8月
9月 10月 11月 12月

2022年

1月 2月 3月 4月
5月 6月 7月 8月
9月 10月 11月 12月

2021年

1月 2月 3月 4月
5月 6月 7月 8月
9月 10月 11月 12月

2020年

1月 2月 3月 4月
5月 6月 7月 8月
9月 10月 11月 12月

ค้นบทความเก่ากว่านั้น

ไทย

日本語

中文