23 สิงหาคม 2557

Published 8/23/2557 by with 0 comment

สร้าง 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

ติดตามบทความต่อไปนะครับ :)
ขอบคุณครับ

0 ความคิดเห็น:

แสดงความคิดเห็น

แสดงความคิดเห็นได้ครับ :)