Bài 1: Cài đặt và sử dụng Python – Qt Designer

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

Nếu máy MAC:

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

Hoặc:

https://tranduythanh.com/software/QtDesigner.dmg

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.