Trần Duy Thanh

Hầu hết mọi giao diện đều cung cấp các chức năng cho người sử dụng tương tác trên giao diện. Các ngôn ngữ như C#, Java chúng ta thường nghe tới thuật ngữ “Event”. Tuy nhiên đối với Python, cụ thể là PyQt6 & Qt Designer thì chúng ta sẽ nghe thêm thuật ngữ Signals và Slots.

Signals hiểu nôm na là các hành động được phát đi (truyền đi) bởi các đối tượng trên giao diện (gọi chung là các Widget) khi có cái gì đó xảy ra. Ví dụ như dữ liệu thay đổi trong Input Box, hay thao tác nhấn trên Button… Các Signals này thường được phát sinh bởi các hành động của người sử dụng. Các Signals này khi phát đi nó có thể đính kèm cả dữ liệu mà nó muốn phát. 1 Sender (đối tượng) sẽ có nhiều Signals.

Slots hiểu nôm na là các đối tượng nhận Signals (trong Python thì Hàm/Function cũng có thể được dùng làm Slots, ví dụ như khi nhấn vào Nút Thoát thì ta truyền Signals tới hàm XuLyThoat (hàm này gọi là Slots) thì phần mềm sẽ thoát.). 1 Receiver(đối tượng) sẽ có nhiều Slot.

Các Signals và Slots ta có thể cấu hình ngay trên Qt Designer hoặc ta tự lập trình trong code Python.

Các đối tượng trong PyQt6 được xây dựng nhiều Slots có sẵn (gọi là built-in Slots), do đó ta có thể sử dụng trực tiếp các Slot này.

Phần mềm dưới đây Tui sẽ minh họa một số ví dụ của Signals và Slots:

• Nhập dữ liệu trong QLineEdit thì phát tín hiệu (signals) tới QLabel là QLineEdit đang thay đổi dữ liệu đồng thời truyền dữ liệu từ QLineEdit qua cho QLabel (Như vậy bên QLabel gọi là Slots).
• Tạo Signals khi nhấn vào 1 QPushButton thì màu nền của MainWindow đổi qua màu đỏ
• Tạo Signals khi nhấn vào 1 QPushButton thì thoát phần mềm.

Các Signals và Slots ở trên có thể dụng built-in hoặc ta tự viết thêm các hàm để làm Slots.

Tạo một dự án tên “LearnSignalsAndSlots” trong Pycharm (cách tạo dự án và giao diện Qt Designer xem lại bài 2 và bài 3).

Chọn và Thiết kế giao diện MainWindow như hình dưới đây (lưu với tên file “MyMainWindow.ui” vào dự án “LearnSignalsAndSlots” trong Pycharm). Lưu ý màu nền, màu chữ ta tìm thuộc tính styleSheet để cấu hình:

Trong bài này, các Bạn cứ kéo thả control ra và đặt tên như trong Object Inspector. Chi tiết các controls này sẽ được hướng dẫn ở các bài học tiếp theo. Trong bài này chúng ta chỉ focus vào Signals và Slots.

Bước 1: Tạo Signal cho QLineEdit (lineEditName) và Slot cho QLabel (labelName):

• Nhấn biểu tượng dấu + màu xanh trong mục Signal/Slot Editor:

Lúc này một dòng <sender> <signal> <Receiver> <slot> xuất hiện. Ta chọn như sau:

• Mục <sender>: Chọn lineEditName

• Mục <Signal> là gán tín hiêu nào sẽ được truyền đi đối với lineEditName. Ta chọn textChanged(QString):

• Mục <Receiver> là chọn control labelName nào để nhận Signal.

• Mục <slot> chọn setText(QString)

Bước 2: Tạo Signal cho pushButtonExit, Slot cho MainWindow. Cách nào tương tự như cho QLineEdit và QLabel nên trong bước này chỉ hiển thị kết quả cuối cùng, còn thao tác các bạn lặp lại như hướng dẫn ở trên.

• Mục <Sender>: Chọn pushButtonExit
• Mục <Signal>: Chọn clicked()
• Mục <Receiver>: Chọn MainWindow
• Mục <Slot>: Chọn close()

Bước 3: Tạo Signal cho pushButtonChangeColor, Slot cho MainWindow (vì ta muốn khi nhấn vào nút Change Color thì đổi màu nền của MainWindow)

Lưu ý rằng, đối với pushButtonChangeColor thì mục <slot> ta chọn đại một slot nào đó (ví dụ chọn repaint()) vì MainWindow không có sẵn slot đổi màu nền (không có built-in slot đổi màu nền). Vì thế ta sẽ lập trình thêm slot bằng cách viết hàm đổi màu nền cho MainWindow, tức là trong trường hợp này Slot của MainWindow là một hàm mới do ta định nghĩa. Nó sẽ được viết sau khi chúng ta Generate Python code cho giao diện này (sau khi viết xong ta thay thế cho hàm repaint()). Tại sao ta lại lấy đại 1 hàm nào đó làm Slot? bởi vì nếu không lấy hàm nào đó ra làm Slot thì lúc generate code nó không tạo ra lệnh Signal clicked() cho pushButtonChangeColor, mất công ta phải viết bổ sung, do đó đây chỉ là Tips để ta lập trình tạo Slot mới nhanh chóng.

Chúng ta tiến hành lưu giao diện “MyMainWindow.ui” lại để Generate code Python nó ra giao diện cuối cùng.

Sau khi Generate Python Code with PyUIC, ta có mã lệnh “MyMainWindow.py“:

Chi tiết mã lệnh của “MyMainWindow.py“:

# Form implementation generated from reading ui file 'MyMainWindow.ui'
#
# Created by: PyQt6 UI code generator 6.4.2
#
# WARNING: Any manual changes made to this file will be lost when pyuic6 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt6 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(487, 245)
        self.centralwidget = QtWidgets.QWidget(parent=MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.lineEditName = QtWidgets.QLineEdit(parent=self.centralwidget)
        self.lineEditName.setGeometry(QtCore.QRect(50, 60, 411, 31))
        font = QtGui.QFont()
        font.setPointSize(15)
        self.lineEditName.setFont(font)
        self.lineEditName.setObjectName("lineEditName")
        self.labelName = QtWidgets.QLabel(parent=self.centralwidget)
        self.labelName.setGeometry(QtCore.QRect(50, 110, 411, 31))
        palette = QtGui.QPalette()
        brush = QtGui.QBrush(QtGui.QColor(170, 0, 255))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Active, QtGui.QPalette.ColorRole.WindowText, brush)
        brush = QtGui.QBrush(QtGui.QColor(255, 255, 0))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Active, QtGui.QPalette.ColorRole.Button, brush)
        brush = QtGui.QBrush(QtGui.QColor(170, 0, 255))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Active, QtGui.QPalette.ColorRole.Text, brush)
        brush = QtGui.QBrush(QtGui.QColor(170, 0, 255))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Active, QtGui.QPalette.ColorRole.ButtonText, brush)
        brush = QtGui.QBrush(QtGui.QColor(255, 255, 0))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Active, QtGui.QPalette.ColorRole.Base, brush)
        brush = QtGui.QBrush(QtGui.QColor(255, 255, 0))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Active, QtGui.QPalette.ColorRole.Window, brush)
        brush = QtGui.QBrush(QtGui.QColor(170, 0, 255))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Inactive, QtGui.QPalette.ColorRole.WindowText, brush)
        brush = QtGui.QBrush(QtGui.QColor(255, 255, 0))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Inactive, QtGui.QPalette.ColorRole.Button, brush)
        brush = QtGui.QBrush(QtGui.QColor(170, 0, 255))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Inactive, QtGui.QPalette.ColorRole.Text, brush)
        brush = QtGui.QBrush(QtGui.QColor(170, 0, 255))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Inactive, QtGui.QPalette.ColorRole.ButtonText, brush)
        brush = QtGui.QBrush(QtGui.QColor(255, 255, 0))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Inactive, QtGui.QPalette.ColorRole.Base, brush)
        brush = QtGui.QBrush(QtGui.QColor(255, 255, 0))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Inactive, QtGui.QPalette.ColorRole.Window, brush)
        brush = QtGui.QBrush(QtGui.QColor(170, 0, 255))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Disabled, QtGui.QPalette.ColorRole.WindowText, brush)
        brush = QtGui.QBrush(QtGui.QColor(255, 255, 0))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Disabled, QtGui.QPalette.ColorRole.Button, brush)
        brush = QtGui.QBrush(QtGui.QColor(170, 0, 255))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Disabled, QtGui.QPalette.ColorRole.Text, brush)
        brush = QtGui.QBrush(QtGui.QColor(170, 0, 255))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Disabled, QtGui.QPalette.ColorRole.ButtonText, brush)
        brush = QtGui.QBrush(QtGui.QColor(255, 255, 0))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Disabled, QtGui.QPalette.ColorRole.Base, brush)
        brush = QtGui.QBrush(QtGui.QColor(255, 255, 0))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Disabled, QtGui.QPalette.ColorRole.Window, brush)
        self.labelName.setPalette(palette)
        font = QtGui.QFont()
        font.setPointSize(15)
        self.labelName.setFont(font)
        self.labelName.setAutoFillBackground(False)
        self.labelName.setStyleSheet("background-color: rgb(255, 255, 0);\n"
"color: rgb(170, 0, 255);")
        self.labelName.setText("")
        self.labelName.setObjectName("labelName")
        self.pushButtonChangeColor = QtWidgets.QPushButton(parent=self.centralwidget)
        self.pushButtonChangeColor.setGeometry(QtCore.QRect(50, 150, 181, 41))
        font = QtGui.QFont()
        font.setPointSize(15)
        self.pushButtonChangeColor.setFont(font)
        self.pushButtonChangeColor.setObjectName("pushButtonChangeColor")
        self.pushButtonExit = QtWidgets.QPushButton(parent=self.centralwidget)
        self.pushButtonExit.setGeometry(QtCore.QRect(350, 150, 111, 41))
        font = QtGui.QFont()
        font.setPointSize(15)
        self.pushButtonExit.setFont(font)
        self.pushButtonExit.setObjectName("pushButtonExit")
        self.label_2 = QtWidgets.QLabel(parent=self.centralwidget)
        self.label_2.setGeometry(QtCore.QRect(120, 10, 241, 31))
        font = QtGui.QFont()
        font.setPointSize(15)
        self.label_2.setFont(font)
        self.label_2.setAlignment(QtCore.Qt.AlignmentFlag.AlignCenter)
        self.label_2.setObjectName("label_2")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(parent=MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 487, 26))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(parent=MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        self.lineEditName.textChanged['QString'].connect(self.labelName.setText) # type: ignore
        self.pushButtonExit.clicked.connect(MainWindow.close) # type: ignore
        self.pushButtonChangeColor.clicked.connect(MainWindow.repaint) # type: ignore
        QtCore.QMetaObject.connectSlotsByName(MainWindow)
        MainWindow.setTabOrder(self.lineEditName, self.pushButtonChangeColor)
        MainWindow.setTabOrder(self.pushButtonChangeColor, self.pushButtonExit)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "Trần Duy Thanh - Signals & Slots"))
        self.pushButtonChangeColor.setText(_translate("MainWindow", "Change Color"))
        self.pushButtonExit.setText(_translate("MainWindow", "Exit"))
        self.label_2.setText(_translate("MainWindow", "Signals & Slots"))

Rõ ràng ta thấy dòng 121 ở trên có:

self.pushButtonChangeColor.clicked.connect(MainWindow.repaint) # type: ignore

Ta sửa thành:

self.pushButtonChangeColor.clicked.connect(self.changeBackground) # type: ignore

Bổ sung dòng lệnh dưới cùng của hàm setupUi:

self.MainWindow=MainWindow

Sau đó Ta viết thêm một hàm để làm Slot, Slot này sẽ đổi màu nền của MainWindow qua màu đỏ:

def changeBackground(self):
    self.MainWindow.setStyleSheet("background-color: red;")

Chi tiết mã lệnh cuối cùng của “MyMainWindow.py“:

# Form implementation generated from reading ui file 'MyMainWindow.ui'
#
# Created by: PyQt6 UI code generator 6.4.2
#
# WARNING: Any manual changes made to this file will be lost when pyuic6 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt6 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(487, 245)
        self.centralwidget = QtWidgets.QWidget(parent=MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.lineEditName = QtWidgets.QLineEdit(parent=self.centralwidget)
        self.lineEditName.setGeometry(QtCore.QRect(50, 60, 411, 31))
        font = QtGui.QFont()
        font.setPointSize(15)
        self.lineEditName.setFont(font)
        self.lineEditName.setObjectName("lineEditName")
        self.labelName = QtWidgets.QLabel(parent=self.centralwidget)
        self.labelName.setGeometry(QtCore.QRect(50, 110, 411, 31))
        palette = QtGui.QPalette()
        brush = QtGui.QBrush(QtGui.QColor(170, 0, 255))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Active, QtGui.QPalette.ColorRole.WindowText, brush)
        brush = QtGui.QBrush(QtGui.QColor(255, 255, 0))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Active, QtGui.QPalette.ColorRole.Button, brush)
        brush = QtGui.QBrush(QtGui.QColor(170, 0, 255))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Active, QtGui.QPalette.ColorRole.Text, brush)
        brush = QtGui.QBrush(QtGui.QColor(170, 0, 255))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Active, QtGui.QPalette.ColorRole.ButtonText, brush)
        brush = QtGui.QBrush(QtGui.QColor(255, 255, 0))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Active, QtGui.QPalette.ColorRole.Base, brush)
        brush = QtGui.QBrush(QtGui.QColor(255, 255, 0))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Active, QtGui.QPalette.ColorRole.Window, brush)
        brush = QtGui.QBrush(QtGui.QColor(170, 0, 255))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Inactive, QtGui.QPalette.ColorRole.WindowText, brush)
        brush = QtGui.QBrush(QtGui.QColor(255, 255, 0))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Inactive, QtGui.QPalette.ColorRole.Button, brush)
        brush = QtGui.QBrush(QtGui.QColor(170, 0, 255))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Inactive, QtGui.QPalette.ColorRole.Text, brush)
        brush = QtGui.QBrush(QtGui.QColor(170, 0, 255))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Inactive, QtGui.QPalette.ColorRole.ButtonText, brush)
        brush = QtGui.QBrush(QtGui.QColor(255, 255, 0))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Inactive, QtGui.QPalette.ColorRole.Base, brush)
        brush = QtGui.QBrush(QtGui.QColor(255, 255, 0))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Inactive, QtGui.QPalette.ColorRole.Window, brush)
        brush = QtGui.QBrush(QtGui.QColor(170, 0, 255))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Disabled, QtGui.QPalette.ColorRole.WindowText, brush)
        brush = QtGui.QBrush(QtGui.QColor(255, 255, 0))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Disabled, QtGui.QPalette.ColorRole.Button, brush)
        brush = QtGui.QBrush(QtGui.QColor(170, 0, 255))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Disabled, QtGui.QPalette.ColorRole.Text, brush)
        brush = QtGui.QBrush(QtGui.QColor(170, 0, 255))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Disabled, QtGui.QPalette.ColorRole.ButtonText, brush)
        brush = QtGui.QBrush(QtGui.QColor(255, 255, 0))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Disabled, QtGui.QPalette.ColorRole.Base, brush)
        brush = QtGui.QBrush(QtGui.QColor(255, 255, 0))
        brush.setStyle(QtCore.Qt.BrushStyle.SolidPattern)
        palette.setBrush(QtGui.QPalette.ColorGroup.Disabled, QtGui.QPalette.ColorRole.Window, brush)
        self.labelName.setPalette(palette)
        font = QtGui.QFont()
        font.setPointSize(15)
        self.labelName.setFont(font)
        self.labelName.setAutoFillBackground(False)
        self.labelName.setStyleSheet("background-color: rgb(255, 255, 0);\n"
"color: rgb(170, 0, 255);")
        self.labelName.setText("")
        self.labelName.setObjectName("labelName")
        self.pushButtonChangeColor = QtWidgets.QPushButton(parent=self.centralwidget)
        self.pushButtonChangeColor.setGeometry(QtCore.QRect(50, 150, 181, 41))
        font = QtGui.QFont()
        font.setPointSize(15)
        self.pushButtonChangeColor.setFont(font)
        self.pushButtonChangeColor.setObjectName("pushButtonChangeColor")
        self.pushButtonExit = QtWidgets.QPushButton(parent=self.centralwidget)
        self.pushButtonExit.setGeometry(QtCore.QRect(350, 150, 111, 41))
        font = QtGui.QFont()
        font.setPointSize(15)
        self.pushButtonExit.setFont(font)
        self.pushButtonExit.setObjectName("pushButtonExit")
        self.label_2 = QtWidgets.QLabel(parent=self.centralwidget)
        self.label_2.setGeometry(QtCore.QRect(120, 10, 241, 31))
        font = QtGui.QFont()
        font.setPointSize(15)
        self.label_2.setFont(font)
        self.label_2.setAlignment(QtCore.Qt.AlignmentFlag.AlignCenter)
        self.label_2.setObjectName("label_2")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(parent=MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 487, 26))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(parent=MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        self.lineEditName.textChanged['QString'].connect(self.labelName.setText) # type: ignore
        self.pushButtonExit.clicked.connect(MainWindow.close) # type: ignore
        self.pushButtonChangeColor.clicked.connect(self.changeBackground) # type: ignore
        QtCore.QMetaObject.connectSlotsByName(MainWindow)
        MainWindow.setTabOrder(self.lineEditName, self.pushButtonChangeColor)
        MainWindow.setTabOrder(self.pushButtonChangeColor, self.pushButtonExit)
        self.MainWindow=MainWindow
    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "Trần Duy Thanh - Signals & Slots"))
        self.pushButtonChangeColor.setText(_translate("MainWindow", "Change Color"))
        self.pushButtonExit.setText(_translate("MainWindow", "Exit"))
        self.label_2.setText(_translate("MainWindow", "Signals & Slots"))
    def changeBackground(self):
        self.MainWindow.setStyleSheet("background-color: red;")

Cuối cùng ta tạo một file Python “MyApp.py” trong dự án Pycharm để gọi các lệnh chạy giao diện phần mềm:

Mã lệnh của “MyApp.py” tương tự như các bài học trước, ta có chi tiết:

from PyQt6.QtWidgets import QApplication, QMainWindow

from MyMainWindow import Ui_MainWindow

app=QApplication([])

qMainWindow=QMainWindow()

myWindow=Ui_MainWindow()

myWindow.setupUi(qMainWindow)

qMainWindow.show()

app.exec()

Chạy phần mềm lên ta có kết quả như sau:

Ta gõ dữ liệu trong ô QLineEdit tới đâu thì QLabel sẽ tự động cập nhật dữ liệu tới đó. Như vậy QLineEdit (Sender) đã truyền Signal “textChanged” cho QLabel (Receiver), và QLabel dùng Slot setText để nhận dữ liệu.

Tương tự như vậy ta thử nghiệm nhất vào nút QPushButton “Change Color”, lúc này màu nền của MainWindow sẽ chuyển qua màu đỏ:

Cuối cùng là khi người sử dụng nhấn vào nút QPushButton (Sender) “Exit” thì nó sẽ truyền Signal “clicked” tới MainWindow (Receiver) và MainWindow dùng Slot close để nhận tín hiệu, tức là nó thoát phần mềm.

Như vậy Tui đã hướng dẫn xong phần Signals và Slot rất chi tiết, các bạn cố gắng đọc thật kỹ lý thuyết, cũng như cơ chế hoạt động của chúng. Phân biệt đâu là Sender, đâu là Receiver, đâu là Signals, đâu là Slot. Đồng thời phải biết cách dùng Qt Designer để cấu hình các Signals và Slot, ngoài ra phải biết cách định nghĩa hàm trong Python để làm Slot.

Đây là coding đầy đủ của bài này:

https://www.mediafire.com/file/w2xr6oaxkoqud6o/LearnSignalsAndSlots.rar/file

Các bài học sau Tui sẽ trình bày chi tiết về MainWindow cũng như các thuộc tính, Signal, Slot và event của nó. Sau khi nắm chắc MainWindow thì chúng ta sẽ học về Layout để biết cách bố cục giao diện, biết được bố cục giao diện thì ta mới đi chi tiết vào từng Widgets cụ thể được.

Chúc các bạn thành công

Share on Facebook

Tweet

Follow us

Save

Trong bài 1 và bài 2 các bạn đã biết được cách tạo dự án với giao diện PyQt6 và công cụ thiết kế giao diện Qt Designer, cũng như biết cách tích hợp chúng vào Pycharm để hỗ trợ việc lập trình xử lý giao diện được nhanh chóng và dễ dàng.

Trong bài này, Tui sẽ giải thích chi tiết từng mã lệnh thành phần của một dự án PyQt6 – Qt Designer cũng như cơ chế hoạt động của event loop.

Bước 1: Tạo một dự án tên “MyFirstApplication” trong Pycharm

Bước 2: Mở phần mềm Qt Designer bằng cách bấm chuột phải vào dự án MyFirstApplication/Chọn “Create new Qt Designer“. Lưu ý bạn phải học qua bài số 2 thì mới thấy các công cụ trong External Tools.

Sau khi chọn Create new Qt Designer, phần mềm này sẽ được kích hoạt, chúng ta chọn MainWindow như hình dưới đây:

Nhấn nút “Create” để tạo màn hình cửa sổ giao diện

Mục 1: Mục này được gọi là Widget Box, nó chứa hầu hết các layout, controls của giao diện, được chia thành 8 nhóm với hơn 50 layout và controls thường sử dụng được cung cấp. Lập trình viên có thể kéo thả các control này vào phần thiết kế giao diện ở mục số 2.

• Nhóm Layouts: Nhóm này cung cấp cách thức bố trí cấu trúc giao diện, như vậy trước khi thiết kế một giao diện thì chúng ta cần quan sát xem cấu trúc tổng quan của giao diện là gì để có thể lựa chọn và phối hợp các layout này lại với nhau nhằm tạo ra một giao diện như mong muốn. Các Layout được cung cấp gồm “Vertical Layout”, “Horizontal Layout”, “Grid Layout” và “Form Layout”.
• Nhóm Spacers: Nhóm này dùng để tạo và định nghĩa các vùng trống của các Control, có 2 loại Spacer được cung cấp đó là “Horizontal Spacer” và “Verticla Spacer”
• Nhóm Buttons: Là nhóm các control liên quan tới các nút lệnh, chẳng hạn như “Push Button”, “Radio Button”, “Checkbox”, “Command Link Button”, “Dialog Button Box” và “Tool Button”
• Nhóm Item Views (Model-Based): Nhóm này chứa các control hiển thị dữ liệu dạng bảng, dạng cây, các control bao gồm “List View”, “Tree View”, “Table View” và “Column View”
• Nhóm Item Widget (Item-Based): Nhóm chứa các Widget dạng danh sách, cây, bảng, các widget bao gồm “List Widget”, “Tree Widget”, và “Table Widget”
• Nhóm Container: Nhóm này được xem là các đối tượng khung chứa để chứa các controls, phân nhóm các control trên giao diện tương tác để cho nó rõ ràng và dễ sử dụng hơn. Các Containers bao gồm “Group Box”
• Nhóm Input Widgets: Đây là các nhóm Controls mà người sử dụng thường dùng để nhập và hiển dữ liệu, các controls bao gồm “Combo Box”, “Font Combo Box”, “Line Edit”, “Text Edit”, “Plain Text Edit”, “Spin Box”, “Double Spin Box”, Các control liên quan tới ngày tháng năm như “Time Edit”, “Date Edit”, “Date/Time Edit”, và các control khác như Dial, Key Sequence Edit, cùng với các slider và Scroll Bar như “Vertical Slider”, “Horizontal Slider”, “Vertical Scroll Bar” và “Horizontal Scroll Bar”
• Nhóm Display Widgets: Nhóm này là các controls thường được dùng để hiển thị mà không cho nhập liệu, chẳng hạn như “Label”, “Text Browser”, “Graphics View”, “Calendar Widget”, “LCD Number”, “Progress Bar”, “Horizontal Line”, “Vertical Line” và “Open GL Widget”

Mục 2: Mục 2 là mục thiết kế giao diện chính của phần mềm, các control, layout trong mục 1 sẽ được kéo thả và mục này, các bố cục của giao diện sẽ được hiển thị chi tiết trong mục số 3 Object Inspector. Để thay đổi (định dạng) các control nào thì ta nhấn chuột và control đó rồi chỉnh trong mục 4 Property Editor, để thêm các Signal và Slot thì chỉnh trong mục 5.

Như vậy có thể nói, mục 2 là mục trung tâm của thiết kế giao diện tương tác người dùng. Trong mục 2 cũng cung cấp Context Menu (nhấn chuột phải) để sử dụng thêm các cấu hình khác:

Mục 3: Mục 3 là mục Object Inspector. Mục này hiển thị chi tiết các bố cục của giao diện, các control được hiển thị trong table với 2 cột, cột Object là cột thể hiện các tên biến control, cột Class là thể hiện Object này được tạo ra từ class nào. Dựa vào mô tả sơ lược này mà ta có thể dễ dàng biết được các control thuộc lớp nào để lập trình tương tác cho đúng:

Ví dụ hình ở trên ta thấy Object có tên là “myTitle” thuộc class QLabel.

Và nhìn vào hình trên ta cũng biết được cấu trúc (bố cục) tổng quan của giao diện.

Mục 4: Đây là mục Property Editor, là mục dùng để thiết lập các thuộc tính cho Control trên giao diện, rất quan trọng.

Tùy vào từng đối tượng chúng ta chọn trên giao diện mà trong mục Property Editor này sẽ hiển thị các thông số khác nhau, sau đó ta có thể tùy chỉnh giá trị của các thuộc tính trong này một cách dễ dàng.

Ví dụ minh họa các thuộc tính của màn hình MainWindow:

Ví dụ màn hình các thuộc tính của QLabel:

Mục 5: Là mục gán các Signal/Slot Editor (event) cho các control trên giao diện

Chẳng hạn như muốn gán Signal nhấn nút lệnh cho control thì chúng ta khai báo trong này (kéo thả bổ sung thêm 1 Push Button vào giao diện như dưới đây):

minh họa ở trên: Khi nhấn vào nút “Click Me” thì dữ liệu trên QLabel title sẽ bị xóa trắng.

Mục 6: Mục này là các Menu và tool bars, các lệnh thường dùng sẽ được hiển thị ở đây để lập trình viên lựa chọn một cách nhanh chóng.

Như vậy là các thành phần trong giao diện Qt Designer đã được trình bày ở trên, chi tiết các thành phần này sẽ được giải thích cặn kẽ về lý thuyết cũng như cách thức lập trình ở các bài học tương ứng.

Bây giờ chúng ta lưu giao diện này vào dự án “MyFirstApplication” trong Pycharm để chúng ta tiếp tục giải thích ý nghĩa của các kỹ thuật lập trình đối với giao diện MainWindow này. Đặt tên giao diện là “MyFirstApplication.ui“

Ta tiến hành dùng External tool để tạo mã lệnh Python cho giao diện:

Sau khi bấm “Generate Python Code with PyUIC” thì mã lệnh “MyFirstApplication.py” được tạo ra như dưới đây:

Tạm thời trong bài này chúng ta chưa tiến hành hiệu chỉnh “MyFirstApplication.py”, các bài sau chúng ta sẽ tiến hành hiệu chỉnh bằng cách kế thừa từ lớp này để vẫn đảm bảo được cấu trúc tự động Generate Coding và vẫn giữ được các mã lệnh mới bổ sung trong các lớp kế thừa (tránh chỉnh sửa trực tiếp trong lớp Generate này vì nó sẽ bị mất nếu ta Generate lưu đè lên code cũ).

# Form implementation generated from reading ui file 'MyFirstApplication.ui'
#
# Created by: PyQt6 UI code generator 6.4.2
#
# WARNING: Any manual changes made to this file will be lost when pyuic6 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt6 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(958, 796)
        self.centralwidget = QtWidgets.QWidget(parent=MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.myTitle = QtWidgets.QLabel(parent=self.centralwidget)
        self.myTitle.setGeometry(QtCore.QRect(70, 10, 421, 81))
        font = QtGui.QFont()
        font.setPointSize(20)
        self.myTitle.setFont(font)
        self.myTitle.setObjectName("myTitle")
        self.clickMe = QtWidgets.QPushButton(parent=self.centralwidget)
        self.clickMe.setGeometry(QtCore.QRect(110, 150, 171, 41))
        self.clickMe.setObjectName("clickMe")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(parent=MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 958, 26))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(parent=MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        self.clickMe.clicked.connect(self.myTitle.clear) # type: ignore
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.myTitle.setText(_translate("MainWindow", "https://tranduythanh.com/"))
        self.clickMe.setText(_translate("MainWindow", "Click Me To Clear Title"))

Tiếp theo ta tạo thêm một file Python với tên “MyApp.py“:

Bổ sung mã lệnh cho “MyApp.py“:

from PyQt6.QtWidgets import QApplication, QMainWindow
# import sys for Accessing to command line arguments
import sys

from MyFirstApplication import Ui_MainWindow

# You need one (and only one) QApplication instance per application.
# Pass in sys.argv to allow command line arguments for your app.

app=QApplication(sys.argv)
# If you know you won't use command line arguments QApplication([]) works too
#app=QApplication([])

#Create QMainWindow
qMainWindow=QMainWindow()
#Call Ui_MainWindow in the MyFirstApplication.py, of course we can change the name
myWindow=Ui_MainWindow()
#Call setupUi method
myWindow.setupUi(qMainWindow)
#call show method
qMainWindow.show()
#Start the Event loop
app.exec()

Chạy “MyApp.py” ta có giao diện như mong muốn:

Nếu như chúng ta nhấn nút lệnh “Click Me To Clear Title” thì title sẽ biến mất.

Bây giờ chúng ta khám phá các mã lệnh trong file “MyApp.py“:

from PyQt6.QtWidgets import QApplication, QMainWindow

Trong mã lệnh của chúng ta có dùng các lớp QApplication và QMainWindow nên chúng ta import nó, các lớp này nằm trong gói PyQt6.QtWidgets

Mỗi một phần mềm chúng ta khai báo 1 và chỉ 1 đối tượng QApplication. Đối tượng này có thể không nhận bất kỳ đối số nào hoặc nhận đối số từ command line thông quy sys.argv:

app=QApplication(sys.argv)

Nếu không muốn nhận thông số nào cả (parameter):

app=QApplication([])

Đối tượng này sẽ nắm giữ toàn bộ Event Loops (có thể hiểu là nắm giữ toàn bộ các sự kiện phát sinh xảy ra trên màn hình cửa sổ)

Tiếp theo ta cần khai báo 1 đối tượng QMainWindow()

#Create QMainWindow
qMainWindow=QMainWindow()

Đối tượng qMainWindow sẽ được truyền vào lớp Ui_MainWindow thông qua hàm setupUi để khởi tạo giao diện:

#Call Ui_MainWindow in the MyFirstApplication.py, of course we can change the name
myWindow=Ui_MainWindow()
#Call setupUi method
myWindow.setupUi(qMainWindow)

Lưu ý rằng lớp Ui_MainWindow là do chương trình tự tạo ra và tự đặt tên khi tạo mã lệnh từ giao diện, ta có thể đổi tên tùy ý.

hàm setupUi(qMainWindow) sẽ tiến hành nạp lại giao diện.

sau đó ta gọi hàm show() để hiển thị giao diện:

#call show method
qMainWindow.show()

Nhưng nhớ rằng, nó sẽ tự động tắt màn hình giao diện ngay lập tức thì lúc này ta chưa kích hoạt Event loop. Do đó ta bắt buộc phải gọi lệnh sau:

#Start the Event loop
app.exec()

Vậy Event Loop là gì? nó đóng vai trò gì trong chương trình?

Lõi của Qt Application là lớp QApplication , mỗi một ứng dụng cần một và chỉ một đối tượng QApplication. Đối tượng này nắm giữ và điều khiển các Even loop của ứng dụng (các thao tác người dùng). Mọi thao tác người dùng trên giao diện sẽ được đẩy vào hàng đợi gọi là Event Queue, sau đó các Event này sẽ được xử lý luôn hoặc chuyển tiếp tới các tác vụ khác. Ví dụ như bạn Click click click bạn nhấn nhấn nhấn ….. trên các control hay trên Window thì các sự kiện này sẽ được đưa vào hàng đợi và nó sẽ được xử lý tuần tự, hết event này sẽ tới event khác trong queue. Và tại một thời điểm thì chỉ có một event loop được chạy cho mỗi ứng dụng.

Như vậy tới đây Tui đã trình bày xong Ý nghĩa các thành phần trong dự án PyQt6-Qt Designer. Các bạn đã biết cách tạo giao diện, hiểu được cấu trúc thành phần trên giao diện cũng như ý nghĩa của chúng. Đặc biệt hiểu cách thức gọi mã lệnh để tương tác người dùng, hiểu được tại sao phải dùng các dòng lệnh đó cũng như nắm rõ quy trình hoạt động của Event loop.

Mã lệnh của bài này các bạn tải ở đây:

https://www.mediafire.com/file/52m26det0ho3zh7/MyFirstApplication.rar/file

Bài sau Tui sẽ trình bày chi tiết về MainWindow cũng như nói rõ về cơ chế hoạt động của Signals và Slots trên ứng dụng.

Chúc các bạn thành công.

Share on Facebook

Tweet

Follow us

Save

Trong Bài 1 các bạn đã biết cách cài đặt và sử dụng Qt Designer. Tuy nhiên việc mở phần mềm Qt Designer để thiết kế, sau đó chuyển qua Pycharm cũng làm mất khá nhiều thời gian. Và đặc biệt ta cũng cần biết được các tên biến control được khai báo và bố trí như thế nào trong giao diện “.ui”. Vì vậy bài này Tui sẽ hướng dẫn các bạn cách thức tích hợp Qt Designer vào Pycharm để chỉ cần một cú click chuột là có thể mở giao diện lên để cập nhật thiết kế cũng như tạo mới, đồng thời cũng hướng dẫn cách tích hợp PyUIC để tự động tạo mã nguồn Python từ các giao diện “.ui” bằng một cú click chuột.

Các bạn xem hình dưới đây:

Làm thế nào để ta tích hợp được 3 menu chức năng vào External Tools:

• menu “Create new Qt Designer“, dùng để mở phần mềm Qt Designer và thiết kế một giao diện mới
• menu “Open Selected Qt Designer“, dùng để mở file giao diện thiết kế đang chọn để cập nhật thêm giao diện cho nó
• menu “Generate Python Code with PyUIC“, chức năng này dùng để tự động tạo mã lệnh Python cho giao diện đang chọn.

Để làm được điều trên, Chúng ta tiến hành các bước như sau:

Bước 1: Vào menu File/ chọn Settings…

Bước 2: Tìm tới mục “External Tools” như hình dưới đây:

Trong màn hình External Tools, bạn quan sát thấy ở bên trên có danh sách các nút lệnh “+”, “-“, …. dùng để thêm menu, xóa menu, chỉnh sửa menu, di chuyển vị trí xuất hiện:

Bước 3: Tạo menu “Create new Qt Designer“

Menu này có chức năng là nhấn vào thì mở phần mềm Qt Designer lên để tạo màn hình giao diện thiết kế mới.

Nhấn vào biểu tượng dấu “+” để tạo mới một menu:

Sau đó tiến hành định nghĩa cho các fields như sau:

• Name: Nhập vào tên của menu, ví dụ “Create new Qt Designer”
• Description: Nhập vào mô tả cho menu, ví dụ “This function used to Create new Qt Designer”
• Program: Trỏ tới chính xác file designer.exe mà ta cài Qt Designer, trong trường hợp này thì nó là đường dẫn “C:\Program Files (x86)\Qt Designer\designer.exe“, dĩ nhiên tùy vào lúc bạn cài đặt, phải trỏ cho đúng
• Working directory: Mục này phải cho phần mềm biết đường dẫn hiện tại của dự án là gì. Ta dùng chính xác mã lệnh: $ProjectFileDir$

Sau đó nhấn nút “OK” để tạo menu “Create new Qt Designer”, xem kết quả:

Bước 4: Tạo menu “Open Selected Qt Designer“

Menu này có chức năng là khi lập trình viên bấm chuột phải file giao diện “.ui” thì giao diện này sẽ được mở lên trong Qt Designer để ta tiếp tục thiết kế. Mọi sự thay đổi lúc thiết kế lúc ta lưu trữ nó sẽ tự động cập nhật trong dự án.

Trong màn hình External Tools ta tiếp tục lặp lại thao tác nhấn vào nút “+” để mở màn hình thêm menu mới:

• Name: Nhập vào tên của menu, ví dụ “Open Selected Qt Designer“
• Description: Nhập vào mô tả cho menu, ví dụ “This tool used to open Open Selected Qt Designer”
• Program: Trỏ tới chính xác file designer.exe mà ta cài Qt Designer, trong trường hợp này thì nó là đường dẫn “C:\Program Files (x86)\Qt Designer\designer.exe“, dĩ nhiên tùy vào lúc bạn cài đặt, phải trỏ cho đúng
• Arguments: Cần cho phần mềm biết ta đang bấm chuột phải vào file giao diện “.ui” nào. Ta dùng chính xác mã lệnh: “$FileDir$\$FileName$”. Lưu ý là có nháy kép bao bọc mã lệnh để trong trường hợp bạn lưu source code trong thư mục có khoảng trắng thì nó vẫn hiểu. Đối số này sẽ được truyền cho phần mềm Qt Designer, nên khi mở phần mềm lên nó sẽ tự động mở màn hình giao diện theo đúng đường dẫn này.
• Working directory: Mục này phải cho phần mềm biết đường dẫn hiện tại của dự án là gì. Ta dùng chính xác mã lệnh: $ProjectFileDir$

Nhấn nút “OK” để tạo menu “Open Selected Qt Designer“:

Bước 5: Tạo menu “Generate Python Code with PyUIC“

Menu này có chức năng là tự động tạo mã lệnh Python từ giao diện “.ui”, nó rất hữu ích để cho lập trình viên biết được các biến control nào được bố trí trong giao diện để lập trình tương tác sau này.

Trong màn hình External Tools ta tiếp tục lặp lại thao tác nhấn vào nút “+” để mở màn hình thêm menu mới:

• Name: Nhập vào tên của menu, ví dụ “Generate Python Code with PyUIC“
• Description: Nhập vào mô tả cho menu, ví dụ “This function used to generate Python Code with PyUIC”
• Program: Trỏ tới chính xác file python.exe mà ta cài Python, trong trường hợp này thì nó là đường dẫn “C:\Python311\python.exe“, dĩ nhiên tùy vào lúc bạn cài đặt, phải trỏ cho đúng
• Arguments: Cần cho phần mềm biết ta đang bấm chuột phải vào file giao diện “.ui” nào và file mã lệnh Python nào nên được tạo ra cho giao diện này. Ta dùng chính xác mã lệnh: -m PyQt6.uic.pyuic “$FileName$” -o “$FileNameWithoutExtension$.py”. Lưu ý là có nháy kép bao bọc mã lệnh để trong trường hợp bạn lưu source code trong thư mục có khoảng trắng thì nó vẫn hiểu. Đối số này sẽ được truyền cho phần mềm Qt Designer, nên khi mở phần mềm lên nó sẽ tự động mở màn hình giao diện theo đúng đường dẫn này.
• Working directory: Mục này phải cho phần mềm biết đường dẫn hiện tại của dự án là gì. Ta dùng chính xác mã lệnh: $ProjectFileDir$

Nhấn nút “OK” để tạo menu “Generate Python Code with PyUIC“:

Bước 6: Thử nghiệm các menu vừa tạo

Ta có 2 nơi để sử dụng các menu này trong Pycharm:

• Vào menu Tools/ chọn External Tools/ chọn các menu
• hoặc bấm chuột phải vào dự án/file chọn External Tools/ Chọn các menu

Hoặc:

• Ví dụ bây giờ ta chọn chức năng “Create new Qt Designer“, phần mềm Qt Designer sẽ hiển thị như dưới đây với màn hình chọn New Form:

• Nếu ta bấm chuột phải vào file “HelloWorldDialog.ui” rồi chọn “Open Selected Qt Designer“, chương trình Qt Designer sẽ được mở lên cùng với màn hình giao diện đang chọn này:

• Nếu ta bấm chuột phải vào file “HelloWorldDialog.ui” rồi chọn “Generate Python Code with PyUIC“, chương trình sẽ tự động tạo mã lệnh “HelloWorldDialog.py” cho giao diện này:

Chọn Generate Python Code with PyUIC, ta có kết quả:

Bước 7: Lập trình để hiển thị cửa sổ giao diện bằng lớp Generate Python

Khi “HelloWorldDialog.py” được tạo ra thì ta có thêm một phương án lựa chọn cho việc hiển thị cửa sổ giao diện (tức là phương án tải file .ui vẫn dùng bình thường). Cách số 2 này ta làm như sau:

Tạo một lớp Python, ví dụ đặt tên “TestHelloWorldDialogUI.py”, sau đó ta viết mã lệnh như sau:

from PyQt6.QtWidgets import QApplication, QDialog
from HelloWorldDialog import Ui_Dialog

app=QApplication([])
dialog=QDialog()
window = Ui_Dialog()
window.setupUi(dialog)
dialog.show()
app.exec()

Chạy mã lệnh “TestHelloWorldDialogUI.py” lên ta có kết quả:

Như vậy rõ ràng ta vẫn có được giao diện như mong muốn, nhưng phương án Generate Python code này có gì hay hơn phương án load file UI như đã nói trong bài số 1? Phương án này hay hơn rất nhiều đó là ta có thể dễ dàng truy suất tới các biến control trên giao diện thông các các lớp, có thể dễ dàng mở rộng mã lớp, tạo thêm các lớp kế thừa để bổ sung thêm các chức năng khác một cách tối ưu nhất có thể.

Source code bài này tải ở đây:

https://www.mediafire.com/file/lpehrxzl7clssbj/HelloWorld.rar/file

Các bài học sau Tui sẽ trình bày chi tiết từng layout và control cụ thể để các bạn có thể tự tay xây dựng được các giao diện theo ý muốn của mình.

Chúc các bạn thành công

Share on Facebook

Tweet

Follow us

Save

Python có nhiều nền tảng và thư viện để thiết kế giao diện, chẳng hạn như khi thiết kế giao diện Web thì có thể dùng Django, Flask Microservice, thiế kế giao diện desktop thì dùng tkinter hoặc các thư viện khác.

Để giúp Sinh viên và lập trình viên dễ dàng thiết kế giao diện dạng trực quan dạng kéo thả, cũng như triển khai các phần mềm tương tác người dùng bằng Python được dễ dàng hơn, chuỗi bài học này Tui sẽ hướng dẫn các kỹ thuật liên quan tới Python – Qt Designer để thiết kế giao diện, cùng với việc sử dụng thành thạo gói thư viện PyQt6 sẽ giúp cho người học dễ dàng thiết kế và xử lý giao diện người dùng, chạy các mô hình máy học trên giao diện.

Để học tốt các chuỗi bài học này, hiển nhiên các bạn phải có kiến thức chút ít về Python, cũng như một số công cụ cần được cài đặt sẵn trong máy như:

• Cài đặt Python phiên bản mới nhất (học thì cứ chọn cái mới nhất) https://www.python.org/downloads/
• Cài đặt Pycharm hoặc Anaconda (để dùng Spyder). Trong chuỗi bài học này Tôi hướng dẫn trên thanh công cụ Pycharm Community https://www.jetbrains.com/pycharm/download/?section=windows

Sau đó ta tiến hành cài đặt và sử dụng Python – Qt Designer theo 5 bước như dưới đây:

Bước 1: Cài đặt PyQt6

python -m pip install PyQt6

Nếu cài đặt thành công bạn sẽ thấy các thông báo kết quả như trên.

Bước 2: Tải và cài đặt Qt Designer

Link tải ở đây:

https://build-system.fman.io/static/public/files/Qt%20Designer%20Setup.exe

Hoặc ở đây:

https://tranduythanh.com/software/QtDesignerSetup.rar

Sau khi tải về, các bạn sẽ thấy tập tin “Qt Designer Setup.exe” như dưới đây:

Ta tiến hành double click vào file trên để cài đặt:

Bấm Next để tiếp tục

Mặc định Destination Folder sẽ nằm trong ổ C như hình, ta tiến hành bấm nút “Install” để bắt đầu cài đặt, và chờ chương trình cài đặt:

Sau khi cài đặt hoàn tất thì bạn thấy giao diện hiển thị ra như dưới đây:

Nhấn “Next” để ra màn hình Comleting the Qt Designer Setup Wizard:

Màn hình trên có nút checked “Run Qt Designer”, ta nhấn nút Finish để vừa kết thúc và mở phần mềm này lên:

Ngoài ra ta có thể tìm thấy phần mềm trong thanh công cụ tìm kiếm của hệ điều hành:

Bước 3: Tạo dự án trong Pycharm

Khởi động phần mềm Pycharm Community:

Nhấn vào nút “New Project” để tạo dự án

Đặt dự án tên “HelloWorld”. Hiển nhiên mới học một cái gì đó thì ta cứ nên tạo “HelloWorld” cho nó thân thiện và bảo vệ môi trường. Các thông số khác cấu hình như trên. Sau đó Nhấn nút “Create” để tạo dự án, màn hình dự án mới sẽ được hiển thị như dưới đây:

Sau đó ta tạo một file python tên là “main.py” bằng cách nhấn chuột phải vào dự án “HelloWorld” rồi chọn “New” sau đó chọn “Python File”:

Một màn hình mới sẽ xuất hiện như dưới đây:

Ta nhập tên là “main”, phía bên dưới chọn “Python file” rồi nhấn phím Enter:

Như vậy file main.py được tạo ra như trên, ta để đó và quay lại phần mềm Qt Designer để thiết kế giao diện:

Bước 4: Thiết kế giao diện với Qt Designer

• Đầu tiên ta chọn biểu tượng 1 để hiển thị cửa sổ “New Form – Qt Designer“
• Sau đó ở mục 2 ta chọn “Dialog with Button Bottom”, dĩ nhiên đây là ví dụ cho Hello World, còn tùy thuộc vào nhu cầu thiết kế giao diện mà bạn tùy chọn các loại khác nhau
• Cuối cùng ta nhấn nút Create ở mục số 3 để tạo Form

Giao diện thiết kế Form:

Chi tiết các thành phần trong giao diện Qt-Designer sẽ được trình bày kỹ lưỡng ở các bài học tiếp theo. Trong bài này ta chỉ cần làm các công việc sau:

• Tạo tiêu đề mới cho cửa sổ Dialog
• Tạo 1 Label

Để tạo tiêu đề mới cho cửa sổ ta nhấn vào tiêu đề của Dialog và sau đó quan sát mục “Property Editor”, tìm tới thuộc tính windowTitle:

Mặc định ta thấy tiêu đề đang để “Dialog”, ta nhấn vào nó và chỉnh qua tiêu đề mới như hình dưới đây:

Ví dụ đổi tiêu đề qua “Tran Duy Thanh – Hello World”

Tiếp theo ở mục Widget Box, ta vào nhóm “Display Widgets“, nhấn và kéo control “Label” vào màn hình Form:

Sau đó sửa text hiển thị thành “Hello World”

Để sửa text hiển thị, ta nhấn vào Label đó trước, sau đó nhìn vào mục Property Editor. Tìm tới thuộc tính text và chỉnh qua “Hello World”

Ta cũng có thể hiệu chỉnh chữ lớn lên bằng cách tìm tới thuộc tính Font của control label này:

Theo hình trên thì ta chỉnh Point Size là 20, chữ in đậm (Bold)

Ngoài ra, Qt Designer cũng hỗ trợ chúng ta thiết kế Label có chuỗi dạng HTML:

Như ta thấy, ở màn hình trên, trong thuộc tính text của Label, ta nhấn vào nút có dấu “…”, chương trình sẽ hiển thị Edit Text của Label lên, trong màn hình này ta thoái mái định dạng cách thức hiển thị dữ liệu.

Sau khi tiết kế xong, ta cần lưu màn hình này vào dự án HelloWorld trong Pycharm.

Ta nhấn Ctrl +S hoặc nhấn vào biểu tựu đĩa mềm để lưu.

chú ý ta cần lưu vào đúng nơi dự án HelloWorld, đặt tên là “HelloWorldDialog.ui“

Màn hình trên cho ta thấy kết quả sau khi lưu file giao diện ui thành công.

Bước 5: Lập trình để hiển thị giao diện người dùng.

Trong file “main.py” ta viết mã lệnh như sau:

from PyQt6 import uic
from PyQt6.QtWidgets import QApplication

Form, Window = uic.loadUiType("HelloWorldDialog.ui")

app = QApplication([])
window = Window()
form = Form()
form.setupUi(window)
window.show()
app.exec()

Sau đó ta tiến hành chạy file main.py :

Bấm chuột phải vào ‘main.py’ rồi chọn Run ‘main’, ta có kết quả giao diện:

Như vậy tới đây các bạn đã thành công trong việc cài đặt và sử dụng Qt Designer, biết cách dùng coding Python để nạp giao diện để chạy chương trình.

Ngoài bản Qt Designer phiên bản nhỏ gọn ở trên, các bạn có thể tải Qt Creator với nhiều tính năng phong phú tuy nhiên khá nặng: https://www.qt.io/offline-installers

Các bài sau, Tui sẽ hướng dẫn cách tích hợp Qt Designer vào ngay bên trong công cụ Pycharm cũng như cách tự động generate code Python từ file giao diện để giúp lập trình thiết kế giao diện một cách nhanh chóng và tiện lợi hơn.

Chúc các bạn thành công.

Share on Facebook

Tweet

Follow us

Save