pyqt เบื้องต้น บทที่ ๑๓: การสร้างและใช้งานช่องปรับค่า
เขียนเมื่อ 2021/08/15 09:24
แก้ไขล่าสุด 2021/09/28 16:42
ต่อจาก บทที่ ๑๒
ในบทนี้จะเป็นเรื่องของ QSpinBox และ QDoubleSpinBox ซึ่งเป็นกล่องใส่ค่าตัวเลขซึ่งทั้งสามารถพิมพ์ตัวเลขหรือปรับโดยกดปุ่มลูกศรได้
โดย QSpinBox จะใช้กับเลขจำนวนเต็ม (int) ส่วน QDoubleSpinBox จะใช้กับเลขทศนิยม (float)
การสร้างช่องปรับค่าจำนวนเต็ม {QSpinBox}
QSpinBox คือกล่องที่บรรจุค่าตัวเลขจำนวนเต็ม เมื่อสร้างขึ้นมาแล้วค่าตัวเลขภายในกล่องจะได้จากเมธอด .value
ตัวอย่างเช่น สร้าง QSpinBox ขึ้นมาแล้วให้พิมพ์ค่าในช่องนั้นมาเมื่อกดปุ่ม
import sys
from PyQt5.QtWidgets import QApplication,QWidget,QPushButton,QSpinBox,QHBoxLayout
qAp = QApplication(sys.argv)
natang = QWidget()
hbl = QHBoxLayout()
natang.setLayout(hbl)
chongprap = QSpinBox()
hbl.addWidget(chongprap)
pum = QPushButton('print')
hbl.addWidget(pum)
pum.clicked.connect(lambda: print(chongprap.value())) # ให้พิมพ์ค่าในกล่องเมื่อกดปุ่ม
natang.show()
qAp.exec_()ลองปรับค่าในกล่องแล้วกดปุ่มดูก็จะพบว่าค่าในกล่องถูกพิมพ์ออกมาตามนั้น
การตั้งขอบเขตหรือค่าที่เปลี่ยนในแต่ละขั้น {.setRange .setMaximum .setMinimum .setSingleStep}
ถ้าไม่ได้กำหนดอะไรไว้ ค่าใน QSpinBox นี้จะมีค่าตั้งต้นเป็น 0 และมีขอบเขตการปรับอยู่ในช่วง 0~100
หากต้องการปรับค่าขอบเขตก็ทำได้โดยใช้เมธอด .setRange หรืออาจใช้เมธอด .setMaximum เพื่อตั้งแค่ค่าสูงสุด หรือ .setMinimum เพื่อตั้งแค่ค่าต่ำสุดแยกกันก็ได้
ส่วนค่าตั้งต้นอาจตั้งด้วย .setValue เพียงแต่ว่าควรตั้งหลังจากที่ตั้งขอบเขตเสร็จแล้ว เพราะค่าที่ตั้งนี้จะเกินขอบเขตไม่ได้
นอกจากนี้ยังอาจกำหนดค่าที่จะถูกเปลี่ยนเมื่อกดปุ่มลูกศรแต่ละทีได้ด้วยเมธอด .setSingleStep
ตัวอย่าง
import sys
from PyQt5.QtWidgets import QApplication,QWidget,QSpinBox
qAp = QApplication(sys.argv)
natang = QWidget()
chongprap = QSpinBox(natang)
chongprap.move(10,10)
chongprap.setRange(5,25) # ตั้งขอบเขต
chongprap.setValue(15) # ตั้งค่าเริ่มต้น
chongprap.setSingleStep(5) # ตั้งค่าที่จะเปลี่ยนเมื่อกดปุ่มลุกศร
natang.show()
qAp.exec_()
การตั้งคำสั่งให้ทำงานเมื่อค่าเปลี่ยน {.valueChange}
ถ้ามีคำสั่งที่ต้องการให้ทำเมื่อค่าในกล่องถูกเปลี่ยนก็กำหนดได้ที่ .valueChange โดยพารามิเตอร์ที่ได้มาจะเป็นค่าขณะนั้น
ตัวอย่างเช่น ลองสร้างกล่องปรับค่าแล้วให้เมื่อแก้ค่าที่อยู่ในช่องนั้นก็จะไปแก้ที่ข้อความใน QLabel ด้านบนด้วย
import sys
from PyQt5.QtWidgets import QApplication,QWidget,QSpinBox,QLabel,QVBoxLayout
qAp = QApplication(sys.argv)
natang = QWidget()
vbl = QVBoxLayout()
natang.setLayout(vbl)
khokhwam = QLabel('')
vbl.addWidget(khokhwam)
chongprap = QSpinBox(natang)
vbl.addWidget(chongprap)
def praplaeo(kha): # ในที่นี้ kha จะแทนค่าตัวเลขในกล่องในขณะนั้น
khokhwam.setText(str(kha))
chongprap.valueChanged.connect(praplaeo)
chongprap.setRange(-1000,1000)
chongprap.setValue(-500)
chongprap.setSingleStep(50)
natang.show()
qAp.exec_()
คำนำหน้าและตามหลัง {.setPrefix .setSuffix}
ข้อความที่ปรากฏภายในกล่องนั้นนอกจากค่าตัวเลขแล้ว ยังอาจเติมข้อความนำหน้าได้โดย .setPrefix หรือเติมข้อความตามหลังได้โดย .setSuffix ซึ่งข้อความที่เติมมานี้ก็ไม่ได้มีผลอะไรนอกจากเป็นตัวประดับ
ตัวอย่างเช่น ลองสร้างกล่องที่ใส่ค่าความยาวเป็นเมตรไปแล้วแปลงเป็นเซนติเมตร โดยในกล่องให้มีคำว่า "ยาว" นำหน้า และตามด้วย "เมตร"
import sys
from PyQt5.QtWidgets import QApplication,QWidget,QLabel,QSpinBox,QHBoxLayout
qAp = QApplication(sys.argv)
natang = QWidget()
hbl = QHBoxLayout()
natang.setLayout(hbl)
def praplaeo(kha):
metre.setText(f'= {kha/100} เมตร')
chongprap = QSpinBox()
hbl.addWidget(chongprap)
chongprap.setPrefix('ยาว ') # ใส่คำนำหน้า
chongprap.setSuffix(' ซม.') # ใส่คำตามหลัง
chongprap.setRange(0,1000) # ตั้งขอบเขต
chongprap.setValue(100) # กำหนดค่าตั้งต้น
chongprap.setSingleStep(50)
chongprap.valueChanged.connect(praplaeo)
metre = QLabel('---')
hbl.addWidget(metre)
natang.show()
qAp.exec_()ก็จะได้กล่องแบบนี้ ปรับได้แค่ค่าตัวเลขที่อยู่ตรงกลางเท่านั้น เมื่อปรับค่า ซม. ในกล่องทางซ้ายแล้วค่าเมตรทางขวาก็จะเปลี่ยนค่าตามไปด้วย
ข้อความที่เติมด้านหน้าและหลังในที่นี้จะไม่มีผลอะไรเวลาเอาค่าด้วย .value แต่หากใช้ .text จะได้เป็นสายอักขระที่รวมคำนำหน้าและตามหลังนั้นไปด้วย
ช่องปรับค่าเลขทศนิยม {QDoubleSpinBox}
สำหรับ QDoubleSpinBox นั้นวิธีการใช้โดยรวมก็จะคล้ายกับ QSpinBox เพียงแต่ใช้กับค่าเลขทศนิยมได้
ตัวอย่างการใช้งาน ลองทำกล่องที่ใส่ค่าเป็น ซม. แล้วแสดงค่าเป็นเมตร
import sys
from PyQt5.QtWidgets import QApplication,QWidget,QLabel,QDoubleSpinBox,QHBoxLayout
qAp = QApplication(sys.argv)
natang = QWidget()
hbl = QHBoxLayout()
natang.setLayout(hbl)
def praplaeo(kha): # เมื่อปรับแล้วเปลี่ยนข้อความตามค่าใหม่
centi.setText(f'= {kha*100} ซม.')
chongprap = QDoubleSpinBox()
chongprap.setSuffix(' เมตร') # คำตามท้าย
hbl.addWidget(chongprap)
chongprap.setValue(20)
chongprap.valueChanged.connect(praplaeo)
centi = QLabel('---')
centi.setFixedWidth(80)
hbl.addWidget(centi)
natang.show()
qAp.exec_()ก็จะได้หน้าต่างแบบนี้ ลองปรับค่าความยาวเมตรในกล่องทางซ้าย ค่าเซนติเมตรทางขวาก็เปลี่ยนตาม
การตั้งขอบเขตและนัยสำคัญ {.decimals .setDecimals}
โดยค่าตั้งต้นแล้วค่าที่ใส่ใน QDoubleSpinBox นั้นจะเป็นทศนิยม ๒ ตำแหน่ง แต่สามารถเปลี่ยนจำนวนตำแหน่งทศนิยมได้โดยใช้เมธอด .setDecimals
เช่นลองปรับให้มีเลขทศนิยมได้ถึง ๔ ตำแหน่ง
import sys
from PyQt5.QtWidgets import QApplication,QWidget,QDoubleSpinBox
qAp = QApplication(sys.argv)
natang = QWidget()
chongprap = QDoubleSpinBox(natang)
chongprap.setDecimals(3)
chongprap.setSingleStep(1.111)
chongprap.setRange(-10,10)
chongprap.setValue(0)
chongprap.valueChanged.connect(lambda kha: print(kha))
natang.show()
qAp.exec_()
สรุปท้ายบท
ในบทนี้ที่ได้แนะนำไปก็คือ QSpinBox และ QDoubleSpinBox ซึ่งเป็นกล่องสำหรับใส่ค่าข้อมูลตัวเลข ซึ่งอาจเอาไปใช้เป็นตัวเลือกใน GUI เพื่อปรับค่าอะไรต่างๆได้
อ่านบทถัดไป >> บทที่ ๑๔