Skip to content

สร้าง GUI ด้วย PySide ตอนที่ 5: Widgets ภาค 1

สวัสดีทุกท่านครับ หลังจากบทความที่แล้ว สร้าง GUI ด้วย PySide ตอนที่ 6 ผมลืมข้ามเลข 5 ไปครับ ต้องขออภัยมา ณ ที่นี้ครับ  ในบทความที่ 5 นี้จะพูดถึงเรื่อง Widgets ภาค 1 ครับ

บทความนี้ผมจะพูดถึง Widgets 4 อย่าง ได้แก่

  • QLineEdit ใช้สำหรับรับค่าข้อมูล
  • QCheckBox ใช้ติ๊กเลือกครับ
  • QComboBox เป็นเมนูย่อยที่ใช้เลือกเช่นกันครับ
  • QCalendarWidget ใช้แสดงปฏิทิน

QLineEdit

เป็นเครื่องมือที่ใช้สำหรับรับค่าข้อมูลเช่น ข้อความ ตัวเลข เป็นต้นครับ ดูลักษณะการใช้งานได้ตามตัวอย่างต่อไปนี้ครับ
ตัวอย่างที่ 11

import sys
from PySide.QtCore import *
from PySide.QtGui import *

app = QApplication(sys.argv)
widget = QWidget()  #กำหนดให้ตัวแปร widget แทน QWidget()

widget.setGeometry(200, 100, 400, 300)
widget.setWindowTitle('รับค่าข้อมูลด้วย QLineEdit')

save = QPushButton('Save', widget)
name = QLineEdit(widget)
show = QLabel(widget)

name.setGeometry(10, 10, 200, 20)
save.setGeometry(10, 40, 80, 20)
show.setGeometry(100, 100, 200, 20)

def showText():
    show.setText(name.text())
widget.connect(save,SIGNAL('clicked()'), showText) #เชื่อมต่อ widget กับคลาส showText ในหน้าต่างโปรแกรมเดียวกัน

widget.show()
sys.exit(app.exec_())

ผลลัพธ์
เมื่อเรากรอกข้อมูลในช่องว่างแล้ว ตัวอย่างเช่น "สวัสดี" แล้วผมกดปุ่ม Save ก็จะปรากฎข้อความครับ

QCheckBox

เป็นเครื่องมือที่ใช้ติ๊กเลือกการทำงานครับ แต่มีแค่ Box เดียวนะครับ ดูลักษณะการใช้งานได้ตามตัวอย่างต่อไปนี้ครับ
ตัวอย่างที่ 12

import sys
from PySide.QtCore import *
from PySide.QtGui import *

app = QApplication(sys.argv)
widget = QWidget()

widget.setGeometry(200, 100, 400, 300)
widget.setWindowTitle('QCheckBox')


show = QCheckBox('สวัสดี Python',widget) #QCheckBox สามารถเงื่อนไขที่จะเลือก
show.move(10, 10)

def con():
    if show.isChecked(): #ตรวจสอบเมื่อมีการคลิกถูกที่ show
        widget.setWindowTitle('ดีจ้า :D ฉันคือ Python') #เปลี่ยนชื่อหัวข้อโปรแกรม
    else:
        widget.setWindowTitle('')

widget.connect(show,SIGNAL('stateChanged(int)'), con) #เชื่อมต่อ show กับคลาส con ในหน้าต่างโปรแกรมเดียวกัน

widget.show()
sys.exit(app.exec_())

ผลลัพธ์
ก่อนเลือก Box

หลังติ๊กเลือกที่ช่องหน้าข้อความ สวัสดี Python

แล้วติ๊กเลือกที่ช่องหน้าข้อความ สวัสดี Python อีกครั้ง

QComboBox

เป็นแถบเมนูที่เมื่อเราคลิก V แล้วจะมีเมนูเลื่อนลงมาให้เลือกครับ ดูลักษณะการใช้งานได้ตามตัวอย่างต่อไปนี้ครับ
ตัวอย่างที่ 13

import sys
from PySide.QtCore import *
from PySide.QtGui import *

app = QApplication(sys.argv)
widget = QWidget()

widget.setGeometry(200, 100, 400, 300)
widget.setWindowTitle('QComboBox')

cb = QComboBox(widget) #กำหนดให้ตัวแปร cb แทน QComboBox(widget)
label = QLabel(widget) #กำหนดให้ตัวแปร label แทน QLabel(widget

lang = ['Python','Java','Javascript','PHP','C','C++','Ruby'] #กำหนดลิสต์ (List) ของข้อมูล
for i in lang:
    cb.addItem(i)

cb.setGeometry(10, 10, 150, 20)
label.setGeometry(170, 10, 100, 20)

def hello(text):
    label.setText(text) #กำหนดค่าใน label ใหม่เป็นList ข้อมูลที่เลือก

widget.connect(cb, SIGNAL('activated(QString)'), hello) #เชื่อมต่อ cb กับคลาส hello ในหน้าต่างโปรแกรมเดียวกัน

widget.show()
sys.exit(app.exec_())

ผลลัพธ์
ก่อนเลือกเมนู

หลังเลือกเมนูโดยคลิกที่ V ครับ

QCalendarWidget

เป็น Widgets ที่ใช้แสดงปฏิทินครับ โดยทาง Qt ได้เตรียมมาให้แล้วครับ ดูลักษณะการใช้งานได้ตามตัวอย่างต่อไปนี้ครับ
ตัวอย่างที่ 14

import sys
from PySide.QtCore import *
from PySide.QtGui import *

app = QApplication([])

win = QWidget()
win.setWindowTitle('QCalendarWidget')

layout = QVBoxLayout()
win.setLayout(layout)

# เรียกใช้ QCalendarWidget()
view = QCalendarWidget()

# เพิ่ม view เข้าไปในหน้าต่างโปรแกรม
layout.addWidget(view)

# แสดงหน้าต่าง
win.show()
app.exec_()

ผลลัพธ์

ข้อควรรู้
setGeometry เป็นการกำหนดตำแหน่งของวัตถุ โดยมีรูปแบบการใช้งานดังนี้ครับ setGeometry(x, y, w, h)

ลองนำไปประยุกต์ใช้กับการเขียนโปรแกรมดูนะครับ
ติดตามบทความต่อไปนะครับ 🙂
ขอบคุณครับ

Published on Categories GUI, PySide

About wannaphong

วรรณพงษ์ ภัททิยไพบูลย์ ผู้ดูแลเว็บ wannaphong.com และผู้เขียนบทความบล็อกนี้ นักศึกษาชั้นปีที่ 1 สาขาวิทยาการคอมพิวเตอร์และสารสนเทศ คณะวิทยาศาสตร์ประยุกต์และวิศวกรรมศาสตร์ มหาวิทยาลัยขอนแก่น วิทยาเขตหนองคาย

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องที่ต้องการถูกทำเครื่องหมาย *