Cho đến nay chúng tôi đã tạo ứng dụng bằng mã Python. Điều này hoạt động tốt trong nhiều trường hợp, nhưng khi các ứng dụng của bạn lớn hơn hoặc giao diện phức tạp hơn, việc xác định tất cả các tiện ích theo chương trình có thể hơi phức tạp. Tin vui là Qt đi kèm với trình chỉnh sửa đồ họa — Qt Designer — chứa trình chỉnh sửa giao diện người dùng kéo và thả. Sử dụng Qt Designer, bạn có thể xác định giao diện người dùng của mình một cách trực quan và sau đó chỉ cần kết nối logic ứng dụng sau
Trong hướng dẫn này, chúng tôi sẽ đề cập đến những kiến thức cơ bản về cách tạo giao diện người dùng với Qt Designer. Các nguyên tắc, bố cục và tiện ích giống hệt nhau, vì vậy bạn có thể áp dụng mọi thứ bạn đã học. Bạn cũng sẽ cần kiến thức về API Python để kết nối logic ứng dụng của mình sau này
Hướng dẫn này yêu cầu cài đặt Qt Creator — bạn có thể tải xuống miễn phí từ trang web Qt. Truy cập https. //www. qt. io/tải xuống và tải xuống gói Qt. Bạn có thể chọn chỉ cài đặt Trình tạo trong quá trình cài đặt
Mở Qt Creator và bạn sẽ thấy cửa sổ chính. Nhà thiết kế có sẵn thông qua tab ở phía bên trái. Tuy nhiên, để kích hoạt tính năng này, trước tiên bạn cần bắt đầu tạo tệp .ui
Để tạo một tệp .ui, hãy vào Tệp -> Tệp hoặc Dự án mới. Trong cửa sổ hiện ra chọn Qt bên dưới Files and Classes bên trái, sau đó chọn Qt Designer Form bên phải. Bạn sẽ nhận thấy biểu tượng có chữ "ui" trên đó, hiển thị loại tệp bạn đang tạo
Trong bước tiếp theo, bạn sẽ được hỏi loại tiện ích nào bạn muốn tạo. Nếu bạn đang khởi động một ứng dụng thì Cửa sổ chính là lựa chọn phù hợp. Tuy nhiên, bạn cũng có thể tạo các tệp .ui cho hộp thoại, biểu mẫu và các tiện ích ghép tùy chỉnh
Tiếp theo chọn tên tệp và lưu thư mục cho tệp của bạn. Lưu tệp .ui của bạn với cùng tên với lớp bạn sẽ tạo, chỉ để thực hiện các lệnh tiếp theo đơn giản hơn
Cuối cùng, bạn có thể chọn thêm tệp vào hệ thống kiểm soát phiên bản của mình nếu bạn đang sử dụng một. Vui lòng bỏ qua bước này — nó không ảnh hưởng đến giao diện người dùng của bạn
Đặt ra Cửa sổ chính của bạn
Bạn sẽ thấy cửa sổ chính mới tạo của mình trong trình thiết kế giao diện người dùng. Không có nhiều thứ để xem ngay từ đầu, chỉ có một khu vực làm việc màu xám đại diện cho cửa sổ, cùng với phần đầu của thanh menu cửa sổ
Bạn có thể thay đổi kích thước cửa sổ bằng cách nhấp vào cửa sổ và kéo các chốt màu xanh ở mỗi góc
Bước đầu tiên trong việc xây dựng một ứng dụng là thêm một số widget vào cửa sổ của bạn. Trong các ứng dụng đầu tiên của chúng tôi, chúng tôi đã học được rằng để đặt tiện ích con trung tâm cho một QMainWindow, chúng tôi cần sử dụng
import sys
from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5 import uic
class MainWindow[QtWidgets.QMainWindow]:
def __init__[self, *args, **kwargs]:
super[].__init__[*args, **kwargs]
uic.loadUi["mainwindow.ui", self]
app = QtWidgets.QApplication[sys.argv]
window = MainWindow[]
window.show[]
app.exec_[]
Qt Creator sẽ tự động xử lý việc này cho bạn, mặc dù nó không đặc biệt rõ ràng về điều đó
Để thêm nhiều tiện ích vào cửa sổ chính có bố cục, trước tiên hãy kéo các tiện ích của bạn vào QMainWindow. Ở đây chúng tôi đang kéo 3 nhãn. Không quan trọng bạn thả chúng ở đâu
Chúng tôi đã tạo 2 widget bằng cách kéo chúng vào cửa sổ, biến chúng thành con của cửa sổ đó. Bây giờ chúng ta có thể áp dụng một bố cục
Tìm QMainWindow trong bảng điều khiển bên tay phải [nó phải ở ngay trên cùng]. Bên dưới, bạn thấy tiện ích trung tâm đại diện cho tiện ích trung tâm của cửa sổ. Biểu tượng cho tiện ích trung tâm hiển thị bố cục hiện tại được áp dụng. Ban đầu, nó có một vòng tròn màu đỏ cắt ngang qua nó, cho thấy rằng không có bố cục nào đang hoạt động
Nhấp chuột phải vào đối tượng QMainWindow và tìm 'Bố cục' trong danh sách thả xuống kết quả
Tiếp theo, bạn sẽ thấy một danh sách các bố cục mà bạn có thể áp dụng cho cửa sổ. Chọn Bố cục theo chiều ngang và bố cục sẽ được áp dụng cho tiện ích
Bố cục đã chọn được áp dụng cho tiện ích trung tâm của QMainWindow và các tiện ích được thêm vào bố cục, được bố trí tùy thuộc vào bố cục đã chọn. Lưu ý rằng trong Qt Creator, bạn thực sự có thể kéo và sắp xếp lại thứ tự các tiện ích trong bố cục hoặc chọn một bố cục khác theo ý muốn. Điều này làm cho việc tạo nguyên mẫu và thử mọi thứ trở nên đặc biệt thú vị
Sử dụng tạo của bạn. tập tin giao diện người dùng
Chúng tôi đã tạo một giao diện người dùng rất đơn giản. Bước tiếp theo là đưa cái này vào Python và sử dụng nó để xây dựng một ứng dụng hoạt động
Trước tiên hãy lưu tệp .ui của bạn — theo mặc định, tệp sẽ lưu ở vị trí bạn đã chọn khi tạo, mặc dù bạn có thể chọn một vị trí khác nếu muốn
Tệp .ui ở định dạng XML. Để sử dụng giao diện người dùng của chúng tôi từ Python, chúng tôi có sẵn hai phương pháp thay thế -
- tải vào một lớp bằng phương pháp
8import sys from PyQt5 import QtCore, QtGui, QtWidgets from PyQt5 import uic class MainWindow[QtWidgets.QMainWindow]: def __init__[self, *args, **kwargs]: super[].__init__[*args, **kwargs] uic.loadUi["mainwindow.ui", self] app = QtWidgets.QApplication[sys.argv] window = MainWindow[] window.show[] app.exec_[] - chuyển đổi nó sang Python bằng công cụ
9import sys from PyQt5 import QtCore, QtGui, QtWidgets from PyQt5 import uic class MainWindow[QtWidgets.QMainWindow]: def __init__[self, *args, **kwargs]: super[].__init__[*args, **kwargs] uic.loadUi["mainwindow.ui", self] app = QtWidgets.QApplication[sys.argv] window = MainWindow[] window.show[] app.exec_[]
Hai cách tiếp cận này được đề cập dưới đây. Cá nhân tôi thích chuyển đổi giao diện người dùng thành tệp Python để giữ mọi thứ tương tự theo quan điểm lập trình & đóng gói
Đang tải. tập tin ui trực tiếp
Để tải các tệp .ui, chúng tôi có thể sử dụng mô-đun
pyuic5 mainwindow.ui -o MainWindow.py
pyuic5 mainwindow.ui -o MainWindow.py
trăn
import sys
from PyQt5 import QtWidgets, uic
app = QtWidgets.QApplication[sys.argv]
window = uic.loadUi["mainwindow.ui"]
window.show[]
app.exec[]
Khi phương thức
pyuic5 mainwindow.ui -o MainWindow.py
pyuic5 mainwindow.ui -o MainWindow.py
Để tải giao diện người dùng từ khối
pyuic5 mainwindow.ui -o MainWindow.py
QMainWindow] bạn có thể sử dụng pyuic5 mainwindow.ui -o MainWindow.py
trăn
import sys
from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5 import uic
class MainWindow[QtWidgets.QMainWindow]:
def __init__[self, *args, **kwargs]:
super[].__init__[*args, **kwargs]
uic.loadUi["mainwindow.ui", self]
app = QtWidgets.QApplication[sys.argv]
window = MainWindow[]
window.show[]
app.exec_[]
chuyển đổi của bạn. ui sang Python
Để tạo tệp đầu ra Python, hãy chạy
import sys
from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5 import uic
class MainWindow[QtWidgets.QMainWindow]:
def __init__[self, *args, **kwargs]:
super[].__init__[*args, **kwargs]
uic.loadUi["mainwindow.ui", self]
app = QtWidgets.QApplication[sys.argv]
window = MainWindow[]
window.show[]
app.exec_[]
.ui và tệp đích cho đầu ra, với tham số from MainWindow import Ui_MainWindow
from MainWindow import Ui_MainWindow
bash
pyuic5 mainwindow.ui -o MainWindow.py
Nếu bạn đang sử dụng PyQt4, công cụ này có tên là `pyuic4`, nhưng nếu không thì hoàn toàn giống hệt
Bạn có thể mở tệp kết quả
from MainWindow import Ui_MainWindow
Nhập tệp Python kết quả hoạt động như đối với bất kỳ tệp nào khác. Bạn có thể nhập lớp của mình như sau. Công cụ
import sys
from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5 import uic
class MainWindow[QtWidgets.QMainWindow]:
def __init__[self, *args, **kwargs]:
super[].__init__[*args, **kwargs]
uic.loadUi["mainwindow.ui", self]
app = QtWidgets.QApplication[sys.argv]
window = MainWindow[]
window.show[]
app.exec_[]
from MainWindow import Ui_MainWindow
trăn
from MainWindow import Ui_MainWindow
Để tạo cửa sổ chính trong ứng dụng của bạn, hãy tạo một lớp như bình thường nhưng phân lớp từ cả lớp QMainWindow và lớp
from MainWindow import Ui_MainWindow
from MainWindow import Ui_MainWindow
pyuic5 mainwindow.ui -o MainWindow.py
trăn
import sys
from PyQt5 import QtWidgets, uic
from MainWindow import Ui_MainWindow
class MainWindow[QtWidgets.QMainWindow, Ui_MainWindow]:
def __init__[self, *args, obj=None, **kwargs]:
super[MainWindow, self].__init__[*args, **kwargs]
self.setupUi[self]
app = QtWidgets.QApplication[sys.argv]
window = MainWindow[]
window.show[]
app.exec[]
Điều này tạo ra kết quả chính xác như trước đây
Đó là nó. Cửa sổ của bạn hiện đã được thiết lập đầy đủ. Kể từ khi sử dụng một. ui tóm tắt mã dành riêng cho giao diện người dùng, bạn có thể sử dụng cùng một mẫu này để tải bất kỳ giao diện nào bạn thiết kế
Hơn 10.000 nhà phát triển đã mua Tạo ứng dụng GUI bằng Python & Qt
Thông tin thêm Nhận sách
[[ giảm giá. discount_pc ]]% GIẢM GIÁ cho [[giảm giá. mô tả ]] với mã [[ giảm giá. coupon_code ]]
Cũng có sẵn qua Alipay & iDEALGumroadLeanpubAmazon Bìa mềm
Thêm logic ứng dụng
Bạn có thể tương tác với các tiện ích được tạo thông qua Qt Creator giống như những tiện ích được tạo bằng mã. Để đơn giản hơn,
pyuic5 mainwindow.ui -o MainWindow.py