φυβλαςのβλογ
phyblasのブログ



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 เพื่อปรับค่าอะไรต่างๆได้



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





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

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

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

หมวดหมู่

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

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

目次

日本による名言集
モジュール
-- numpy
-- matplotlib

-- pandas
-- manim
-- opencv
-- pyqt
-- pytorch
機械学習
-- ニューラル
     ネットワーク
ภาษา javascript
ภาษา mongol
言語学
maya
確率論
日本での日記
中国での日記
-- 北京での日記
-- 香港での日記
-- 澳門での日記
台灣での日記
北欧での日記
他の国での日記
qiita
その他の記事

記事の類別



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

  記事を検索

  おすすめの記事

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

ไทย

日本語

中文