Skip to content

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

สวัสดีทุกท่านครับ บทความนี้ยังคงเป็นเรื่อง Widgets อยู่ครับ จากบทความที่แล้ว สร้าง GUI ด้วย PySide ตอนที่ 5: Widgets ภาค 1 ผมได้แนะนำ Widgets ไปแล้ว 4 อย่างครับ บทความนี้จะพาทุกท่านไปรู้จักกับ  Widgets ที่เหลือครับ

Widgets ที่จะแนะนำในบทความนี้มีดังนี้ครับ

  • QSlider  เป็น Widgets สำหรับทำแถบลากเลื่อนครับ
  • QProgressBar เป็น Widgets สำหรับทำแถบแสดงความคืบหน้า
  • QPixmap เป็น Widgets สำหรับแสดงรูปภาพครับ
  • QSplitter เป็น Widgets สำหรับการจัดเรียง Widgets ต่างๆ ครับ

QSlider

เป็น Widgets สำหรับทำแถบลากเลื่อนครับ เช่น แถบเพิ่มลดเสียงครับ โค้ดตัวอย่าง

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

app = QApplication(sys.argv) widget = QWidget() widget.setGeometry(200, 100, 400, 300) widget.setWindowTitle('QSlider') slider = QSlider(Qt.Horizontal, widget) slider.setGeometry(10, 10, 200, 30) slider.setFocusPolicy(Qt.NoFocus) def getValue(value): print (value) widget.connect(slider,SIGNAL('valueChanged(int)'), getValue) widget.show() sys.exit(app.exec_()) ผลลัพธ์

QProgressBar

เป็น Widgets สำหรับทำแถบแสดงความคืบหน้า เช่น โหลดไปแล้วกี่ % โดยเป็นแถบแนวนอนวิ่งครับ โค้ดตัวอย่าง

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

app = QApplication(sys.argv) widget = QWidget() widget.setGeometry(200, 100, 400, 300) widget.setWindowTitle('แถบแสดงความคืบหน้า') pb = QProgressBar(widget) #กำหนดให้ตัวแปร pb แทน QProgressBar(widget) pb.setGeometry(10, 10, 300, 20) pb.setValue(50) #ป้อนค่า % ที่ต้องการแสดง widget.show() sys.exit(app.exec_()) ผลลัพธ์

QPixmap

เป็น Widgets สำหรับแสดงรูปภาพครับ โดยดึงรูปมาแสดงครับ โค้ดตัวอย่าง

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

IMAGE1 = "101_2128.JPG" IMAGE2 = "101_2131.JPG" app = QApplication([]) pm1 = QPixmap(IMAGE1) pm2 = QPixmap(IMAGE2) pm = QPixmap(800,400) #กำหนดขนาดโดยอ้างอิงพิกเซล x,y label = QLabel() left_rectF = QRectF(0,0,400,400)    #ด้านซ้าย right_rectF = QRectF(400,0,800,400) #ด้านขวา painter = QPainter(pm) painter.drawPixmap(left_rectF, pm1,QRectF(pm1.rect())) # เริ่มลงมือวาดภาพบนพิกเซลที่กำหนด  โค้ดนี่ใช้ QtCore painter.drawPixmap(right_rectF, pm2,QRectF(pm2.rect())) label.setPixmap(pm) #เซตพิกเซล label.show() app.exec_() ผลลัพธ์

QPixmap

QSplitter

เป็น Widgets สำหรับการจัดเรียง Widgets ต่างๆ ครับ โค้ดตัวอย่าง

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

class MainWindow(QWidget): def __init__(self): QWidget.__init__(self) treeView = QTreeView() listView = QListView() textEdit = QTextEdit() splitter = QSplitter(self) splitter.addWidget(treeView) splitter.addWidget(listView) splitter.addWidget(textEdit) layout = QHBoxLayout() layout.addWidget(splitter) self.setLayout(layout) if __name__ == '__main__': app = QApplication(sys.argv) mainWindow = MainWindow() mainWindow.show() sys.exit(app.exec_()) ผลลัพธ์

นอกจากนั้นยังมี Widgets  ที่ผมได้แนะนำไปแล้ว เช่น QWebView  QLabel QPushButton ติดตามบทความต่อไปนะครับ 🙂 ขอบคุณครับ

Published on Categories GUI, PySide

About wannaphong

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

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

ใส่ความเห็น

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