Làm cách nào để cài đặt Qt Designer trong Python?

Installing and Running Qt Designer

Có một số cách để tải và cài đặt Qt Designer tùy thuộc vào nền tảng hiện tại của bạn. Nếu bạn sử dụng Windows hoặc Linux, thì bạn có thể chạy các lệnh sau từ thiết bị đầu cuối hoặc dòng lệnh của mình

$ python3 -m venv ./venv
$ source venv/bin/activate
[venv] $ pip install pyqt5 pyqt5-tools

Tại đây, bạn tạo một môi trường ảo Python, kích hoạt nó và cài đặt

$ sudo apt install qttools5-dev-tools

$ sudo apt install qttools5-dev-tools

$ sudo apt install qttools5-dev-tools

$ sudo apt install qttools5-dev-tools

Quá trình cài đặt sẽ đặt tệp thực thi Qt Designer vào một thư mục khác tùy theo nền tảng của bạn

• Linux.

  $ sudo apt install qttools5-dev-tools
  

  9
• các cửa sổ.

  pip3 install pyqt5-tools
  

  50

Trên các hệ thống Linux, chẳng hạn như Debian và Ubuntu, bạn cũng có thể cài đặt Qt Designer bằng cách sử dụng trình quản lý gói hệ thống bằng lệnh sau

$ sudo apt install qttools5-dev-tools

Lệnh này tải xuống và cài đặt Qt Designer và các công cụ Qt khác trên hệ thống của bạn. Nói cách khác, bạn sẽ có một bản cài đặt trên toàn hệ thống và bạn sẽ có thể chạy Qt Designer bằng cách nhấp vào biểu tượng của nó trong trình quản lý tệp hoặc menu hệ thống

Trên macOS, nếu bạn đã cài đặt Qt từ Homebrew bằng lệnh

pip3 install pyqt5-tools

Cuối cùng, bạn có thể tải xuống trình cài đặt Qt cho nền tảng hiện tại của mình từ trang tải xuống chính thức, sau đó làm theo hướng dẫn trên màn hình. Trong trường hợp này, để hoàn tất quá trình cài đặt, bạn cần đăng ký tài khoản Qt

Nếu bạn đã cài đặt Qt Designer bằng một trong các tùy chọn được thảo luận cho đến nay, thì hãy tiếp tục và khởi chạy ứng dụng. Bạn sẽ nhận được hai cửa sổ sau trên màn hình của mình

Cửa sổ ở phía trước là hộp thoại Biểu mẫu mới của Qt Designer. Cửa sổ trong nền là cửa sổ chính của Qt Designer. Trong hai phần tiếp theo, bạn sẽ tìm hiểu kiến ​​thức cơ bản về cách sử dụng các thành phần này của giao diện Qt Designer

Sử dụng hộp thoại biểu mẫu mới của Qt Designer

Khi chạy Qt Designer, bạn sẽ thấy cửa sổ chính của ứng dụng và hộp thoại Biểu mẫu mới. Trong hộp thoại này, bạn có thể chọn từ năm mẫu GUI có sẵn. Các mẫu này bao gồm các tùy chọn để tạo hộp thoại, cửa sổ chính và tiện ích con tùy chỉnh

Bản mẫuLoại biểu mẫuWidgetLớp cơ sởDialog với các nútDialogDưới cùngCác nút OK và Hủy được bố trí theo chiều ngang ở góc dưới bên phải

pip3 install pyqt5-tools

pip3 install pyqt5-tools

pip3 install pyqt5-tools

pip3 install pyqt5-tools

Theo mặc định, khi bạn chạy Qt Designer, hộp thoại Biểu mẫu mới xuất hiện ở nền trước. Nếu không, bạn có thể nhấp vào Mới trên thanh công cụ Qt Designer. Bạn cũng có thể nhấp vào Tệp → Mới trong menu chính hoặc nhấn Ctrl + N on your keyboard.

Trong hộp thoại Biểu mẫu Mới, bạn có thể chọn mẫu biểu mẫu mà bạn muốn bắt đầu, rồi bấm Tạo để tạo biểu mẫu mới

Để tạo biểu mẫu mới và trống bằng mẫu Qt Designer, bạn chỉ cần chọn mẫu mong muốn từ hộp thoại Biểu mẫu mới rồi nhấp vào Tạo hoặc nhấn Alt +R on your keyboard.

Lưu ý rằng hai mẫu hộp thoại đầu tiên có các nút mặc định của riêng chúng. Đây là các nút tiêu chuẩn có trong một

pip3 install pyqt5-tools

Ví dụ: nếu bạn sử dụng nút Hủy và nút OK, thì tiêu chuẩn trên Linux và macOS là hiển thị các nút đó theo cùng một thứ tự. Nhưng trên Windows, thứ tự các nút sẽ được hoán đổi, trong đó OK xuất hiện trước, sau đó là Cancel.

pip3 install pyqt5-tools

Làm việc với Cửa sổ chính của Qt Designer

Cửa sổ chính của Qt Designer cung cấp một thanh menu với các tùy chọn để lưu và quản lý biểu mẫu, chỉnh sửa biểu mẫu và thay đổi chế độ chỉnh sửa, sắp xếp và xem trước biểu mẫu cũng như để điều chỉnh cài đặt của ứng dụng và truy cập tài liệu trợ giúp của ứng dụng

Cửa sổ chính cũng cung cấp một thanh công cụ hiển thị các tùy chọn thường được sử dụng. Bạn sẽ sử dụng hầu hết các tùy chọn này khi chỉnh sửa và sắp xếp các biểu mẫu của mình. Các tùy chọn này cũng có sẵn trong menu chính, đặc biệt là trong menu Tệp, Chỉnh sửa và Biểu mẫu

Cửa sổ chính của Qt Designer cũng bao gồm một vài cửa sổ dock cung cấp một bộ tính năng và công cụ phong phú

• Hộp tiện ích
• Thanh tra đối tượng
• Trình chỉnh sửa thuộc tính
• Trình duyệt tài nguyên
• Trình chỉnh sửa hành động
• Trình chỉnh sửa tín hiệu/khe cắm

Hộp Widget cung cấp lựa chọn trình quản lý bố cục, bộ đệm, tiện ích tiêu chuẩn và các đối tượng khác mà bạn có thể sử dụng để tạo GUI cho hộp thoại và cửa sổ của mình

Hộp Widget cung cấp tùy chọn bộ lọc ở đầu cửa sổ. Bạn có thể nhập tên của một đối tượng hoặc tiện ích cụ thể và truy cập nhanh vào nó. Các đối tượng được nhóm thành các danh mục phản ánh mục đích sử dụng cụ thể của chúng. Bạn có thể hiển thị hoặc ẩn tất cả các đối tượng có sẵn trong một danh mục bằng cách bấm vào nút điều khiển bên cạnh nhãn danh mục

Khi bạn đang tạo biểu mẫu của mình, bạn có thể lấy các đối tượng từ Hộp tiện ích bằng con trỏ chuột, sau đó kéo và thả chúng vào biểu mẫu để xây dựng GUI của nó

Hộp Widget cũng cung cấp phần Scratchpad ở cuối cửa sổ. Trong phần này, bạn có thể nhóm các đối tượng thường xuyên sử dụng vào một danh mục riêng. Bạn có thể điền vào danh mục Scratchpad bằng bất kỳ tiện ích nào hiện được đặt trên một biểu mẫu bằng cách kéo và thả chúng trở lại Hộp tiện ích. Bạn có thể xóa các tiện ích khỏi danh mục Scratchpad bằng cách nhấp chuột phải vào chúng và chọn Xóa trong menu ngữ cảnh

Trình kiểm tra đối tượng cung cấp chế độ xem dạng cây của tất cả các đối tượng trên biểu mẫu hiện tại. Trình kiểm tra đối tượng cũng có một hộp lọc ở trên cùng để cho phép bạn tìm các đối tượng trong cây. Bạn có thể sử dụng Trình kiểm tra đối tượng để đặt tên và các thuộc tính khác của biểu mẫu cũng như các tiện ích của nó. Bạn cũng có thể nhấp chuột phải vào bất kỳ tiện ích nào để truy cập menu ngữ cảnh với các tùy chọn bổ sung

Với Trình kiểm tra đối tượng, bạn có thể quản lý các tiện ích trên biểu mẫu của mình. Bạn có thể đổi tên chúng, cập nhật một số thuộc tính của chúng, xóa chúng khỏi biểu mẫu, v.v. Chế độ xem dạng cây trong Trình kiểm tra đối tượng phản ánh mối quan hệ cha-con của các vật dụng và đối tượng trên biểu mẫu hiện tại

Trình chỉnh sửa thuộc tính là một cửa sổ thanh công cụ khác xuất hiện trong cửa sổ chính của Qt Designer. Cửa sổ này chứa một bảng hai cột với các thuộc tính của đối tượng đang hoạt động và các giá trị của chúng. Bạn có thể sử dụng Trình chỉnh sửa thuộc tính để chỉnh sửa giá trị thuộc tính của đối tượng, như tên của nó

Trình chỉnh sửa thuộc tính cung cấp một cách thân thiện với người dùng để truy cập và chỉnh sửa các giá trị thuộc tính của đối tượng đang hoạt động, chẳng hạn như tên, kích thước, phông chữ, biểu tượng, v.v. Các thuộc tính được liệt kê trên trình chỉnh sửa sẽ thay đổi tùy thuộc vào đối tượng bạn chọn trên biểu mẫu của mình

Các thuộc tính được liệt kê từ trên xuống dưới theo phân cấp lớp. Ví dụ: nếu bạn chọn một

pip3 install pyqt5-tools

pip3 install pyqt5-tools

pyuic5 –x "filename".ui –o "filename".py

pip3 install pyqt5-tools

Cuối cùng, bạn có ba cửa sổ dock thường xuất hiện dưới dạng tab ở góc dưới cùng bên phải

1. Trình duyệt tài nguyên cung cấp một cách nhanh chóng để thêm tài nguyên, chẳng hạn như biểu tượng, tệp dịch, hình ảnh và các tệp nhị phân khác vào ứng dụng của bạn
2. Action Editor cung cấp một cách để tạo các hành động và thêm chúng vào biểu mẫu của bạn
3. Signal/Slot Editor cung cấp một cách để kết nối các tín hiệu và slot trong biểu mẫu của bạn

Dưới đây là một số tùy chọn mà các công cụ này cung cấp

Đó là nó. Ba cửa sổ dock này hoàn thiện bộ công cụ và tùy chọn mà Qt Designer cung cấp cho bạn để tạo và tùy chỉnh GUI cho hộp thoại và cửa sổ của bạn

Sử dụng Qt Designer vs Hand Coding GUI của bạn

Với PyQt, bạn có ít nhất hai tùy chọn để tạo GUI của cửa sổ hoặc hộp thoại. Bạn có thể sử dụng Qt Designer hoặc bạn có thể viết tay GUI bằng mã Python đơn giản. Cả hai lựa chọn đều có ưu và nhược điểm. Đôi khi thật khó để quyết định khi nào nên sử dụng cái này hay cái kia

Qt Designer cung cấp giao diện đồ họa thân thiện với người dùng cho phép bạn nhanh chóng tạo GUI. Điều này có thể tăng năng suất của bạn với tư cách là nhà phát triển và rút ngắn chu kỳ phát triển của bạn

Mặt khác, mã hóa thủ công GUI của bạn có thể giúp bạn kiểm soát chúng nhiều hơn. Với cách tiếp cận này, việc thêm các thành phần và tính năng mới không yêu cầu bất kỳ công cụ bổ sung nào ngoài trình soạn thảo mã hoặc IDE của bạn, điều này có thể khá thuận tiện trong một số môi trường phát triển

Cho dù bạn sử dụng Qt Designer hay viết tay GUI của bạn là một quyết định cá nhân. Dưới đây là một số cân nhắc chung về cả hai phương pháp

FeatureQt DesignerHand CodingNăng suất của nhà phát triểnCaoCao nếu bạn quen thuộc với PyQt, nhưng nếu không thì thấpTách logic GUI khỏi logic nghiệp vụCaoThấpKiểm soát các thành phần GUIThấpCaoKhả năng thêm và xóa các widget độngThấpCaoTính linh hoạt để khám phá, học hỏi, tạo nguyên mẫu và phác thảoCaoThấpTính linh hoạt khi sử dụng các tiện ích tùy chỉnhThấpCaoSố lượng mã soạn sẵnCaoThấp

Ngoài những lo ngại này, nếu bạn mới bắt đầu với PyQt, thì Qt Designer có thể giúp bạn khám phá các tiện ích con, trình quản lý bố cục, lớp cơ sở, thuộc tính và giá trị tiêu biểu của chúng, v.v.

Một điểm khác biệt cuối cùng giữa việc sử dụng Qt Designer và viết mã GUI bằng tay là bạn cần chạy thêm một bước khi sử dụng Qt Designer. dịch các tệp

pip3 install pyqt5-tools

Tạo Menu chính

Mẫu Cửa sổ chính của Qt Designer cung cấp một thanh menu trống ở đầu biểu mẫu. Bạn có thể thêm menu vào thanh menu đó bằng Menu Editor. Menu là danh sách tùy chọn kéo xuống giúp truy cập nhanh vào các tùy chọn của ứng dụng. Quay lại Qt Designer và cửa sổ chính mới tạo của bạn. Ở đầu biểu mẫu, bạn sẽ thấy một thanh menu có văn bản giữ chỗ Nhập vào đây

Nếu bạn nhấp đúp hoặc nhấn Enter vào văn bản giữ chỗ này thì bạn có thể nhập tên của menu đầu tiên của mình. Để xác nhận tên menu, chỉ cần nhấn Enter .

Giả sử bạn muốn tạo trình soạn thảo văn bản của riêng mình. Thông thường, loại ứng dụng này có menu Tệp với ít nhất một số tùy chọn sau

• Mới để tạo một tài liệu mới
• Mở để mở một tài liệu hiện có
• Open Recent để mở các tài liệu đã xem gần đây
• Lưu để lưu tài liệu
• Thoát để thoát khỏi ứng dụng

Đây là cách bạn có thể sử dụng Qt Designer để tạo menu này

Qt Designer’s Menu Editor cho phép bạn thêm menu vào thanh menu theo cách thân thiện với người dùng. Khi bạn nhập tên của menu hoặc tùy chọn menu, bạn có thể sử dụng ký hiệu dấu và [

pyuic5 –x "filename".ui –o "filename".py

Ví dụ: nếu bạn thêm dấu và trước chữ F trong menu Tệp thì bạn có thể truy cập menu này bằng cách nhấn Alt +< . Tương tự như vậy, nếu bạn thêm dấu và trước chữ N trong Mới, thì khi bạn đã khởi chạy menu Tệp, bạn có thể truy cập tùy chọn Mới bằng cách nhấn F. Likewise, if you add an ampersand before the N in New, then once you’ve launched the File menu, you can access the New option by pressing N .

Với Trình chỉnh sửa menu, bạn cũng có thể thêm dấu phân cách vào menu của mình. Đây là một cách hay để phân tách các tùy chọn menu một cách trực quan và nhóm chúng một cách hợp lý. Để thêm dấu phân cách, bấm đúp vào tùy chọn Thêm dấu phân cách ở cuối menu đang hoạt động trong Trình chỉnh sửa menu. Bạn có thể xóa dấu phân cách hiện có bằng cách bấm chuột phải vào nó rồi chọn Xóa Dấu phân cách trong menu ngữ cảnh. Menu này cũng cho phép bạn thêm dấu phân cách mới

Nếu bạn cần di chuyển dấu phân cách đến một vị trí khác trong một menu nhất định, thì bạn có thể kéo dấu phân cách đến vị trí mong muốn và thả nó vào đó. Một đường màu đỏ sẽ chỉ vị trí đặt dải phân cách

Bạn cũng có thể thêm một menu con vào một tùy chọn menu nhất định. Để thực hiện việc này, hãy nhấp vào biểu tượng ở bên phải của tùy chọn menu mà bạn muốn đính kèm menu con, giống như bạn đã làm với tùy chọn Open Recent trong ví dụ trên

Để chạy bản xem trước biểu mẫu của bạn, hãy chuyển đến Biểu mẫu → Xem trước hoặc nhấn tổ hợp phím Ctrl +R on your keyboard.

Khi bạn tạo một menu như menu Tệp trong trình soạn thảo văn bản mẫu của mình, một đối tượng

pyuic5 –x "filename".ui –o "filename".py

Với Action Editor, bạn có thể tinh chỉnh, cập nhật hoặc đặt các tùy chọn sau

• Văn bản của hành động, sẽ được hiển thị trên các tùy chọn menu và các nút trên thanh công cụ
• Tên đối tượng mà bạn sẽ sử dụng trong mã của mình để tham chiếu đối tượng hành động
• Các biểu tượng sẽ được hiển thị trên các tùy chọn menu và nút trên thanh công cụ của bạn
• Thuộc tính có thể kiểm tra của hành động
• Các phím tắt sẽ cung cấp cho người dùng một cách nhanh chóng để truy cập hành động

Dấu chấm lửng cuối cùng [

pyuic5 –x "filename".ui –o "filename".py

Trong trường hợp các biểu tượng, bạn cần đóng gói các biểu tượng đó với ứng dụng của mình dưới dạng các tệp độc lập hoặc bạn có thể tạo tệp tài nguyên, còn được gọi là tệp

1
2

Get the Source Code. Click here to get the source code you’ll use to learn about creating Python GUI applications with Qt Designer in this tutorial

Khi bạn đã tải xuống các biểu tượng, hãy tạo một thư mục

1
2

pyuic5 –x "filename".ui –o "filename".py

Lưu ý rằng các tùy chọn menu của bạn hiện hiển thị một biểu tượng ở lề trái. Điều này cung cấp thêm thông tin trực quan cho người dùng của bạn và giúp họ tìm thấy tùy chọn mong muốn. Bây giờ hãy tiếp tục và thêm menu Chỉnh sửa với các tùy chọn sau

• Sao chép để sao chép một số văn bản
• Dán để dán một số văn bản
• Cắt để cắt một số văn bản
• Tìm và Thay thế để tìm và thay thế văn bản

Tiếp theo, thêm menu Trợ giúp với tùy chọn Giới thiệu để khởi chạy hộp thoại có thông tin chung về trình soạn thảo văn bản của bạn. Cuối cùng, đi tới Trình chỉnh sửa thuộc tính và đặt tiêu đề cửa sổ của bạn thành

1
2

Với những bổ sung này, menu chính của trình soạn thảo văn bản mẫu của bạn bắt đầu trông giống như menu của một trình soạn thảo văn bản thực sự

Tạo Thanh công cụ

Bạn có thể thêm bao nhiêu thanh công cụ tùy ý vào GUI của cửa sổ chính bằng Qt Designer. Để làm điều đó, nhấp chuột phải vào biểu mẫu và chọn Thêm thanh công cụ từ menu ngữ cảnh. Thao tác này sẽ thêm một thanh công cụ trống ở đầu cửa sổ. Ngoài ra, bạn có thể xác định trước khu vực thanh công cụ mà bạn muốn đặt một thanh công cụ nhất định bằng cách chọn Add Tool Bar to Other Area

Khi bạn đã có các thanh công cụ của mình, bạn có thể thêm chúng bằng các nút. Để thực hiện việc này, bạn sử dụng các hành động thay vì các nút thanh công cụ cụ thể từ Hộp tiện ích. Để thêm hành động vào thanh công cụ của bạn, bạn có thể sử dụng Trình chỉnh sửa hành động

Các hành động có thể được chia sẻ giữa các tùy chọn menu và các nút trên thanh công cụ, vì vậy, trong trường hợp này, bạn sử dụng lại các hành động mà bạn đã tạo khi điền vào các menu của mình trong phần trước. Để điền vào thanh công cụ, nhấp vào một hành động trên Action Editor, sau đó kéo và thả hành động đó vào thanh công cụ. Lưu ý rằng bằng cách nhấp chuột phải vào thanh công cụ, bạn có thể thêm dấu phân cách để phân tách các nút công cụ một cách trực quan

Bố trí một Widget trung tâm duy nhất

Qt Designer sử dụng

pip3 install pyqt5-tools

pip3 install pyqt5-tools

Sử dụng một đối tượng

pip3 install pyqt5-tools

Ví dụ: trong trình soạn thảo văn bản mẫu của bạn, bạn có thể muốn sử dụng một tiện ích duy nhất cung cấp cho người dùng của bạn một khu vực làm việc để nhập, sao chép, dán và chỉnh sửa văn bản của họ. Với mục đích này, bạn có thể sử dụng đối tượng

1
2

Trong ví dụ này, trước tiên bạn kéo một

1
2

Vì khoảng cách xung quanh

1
2

sudo apt-get install qttools5-dev-tools
sudo apt-get install qttools5-dev

sudo apt-get install qttools5-dev-tools
sudo apt-get install qttools5-dev

Với Qt Designer, bạn có thể sử dụng các trình quản lý bố cục khác nhau để sắp xếp các widget của mình một cách nhanh chóng. Có thể cho rằng, cách dễ tiếp cận nhất để bố trí GUI của bạn với Qt Designer là sử dụng phần liên quan đến bố cục trên thanh công cụ chính

Từ trái sang phải, bạn sẽ tìm thấy các tùy chọn sau để tạo các loại bố cục khác nhau

OptionWidget Sắp xếp Bố cục Lớp Phím tắt Bố trí theo chiều ngang Theo chiều ngang trong một hàng và một số cột

sudo apt-get install qttools5-dev-tools
sudo apt-get install qttools5-dev

sudo apt-get install qttools5-dev-tools
sudo apt-get install qttools5-dev

sudo apt-get install qttools5-dev-tools
sudo apt-get install qttools5-dev

sudo apt-get install qttools5-dev-tools
sudo apt-get install qttools5-dev

sudo apt-get install qttools5-dev-tools
sudo apt-get install qttools5-dev

sudo apt-get install qttools5-dev-tools
sudo apt-get install qttools5-dev

Hai tùy chọn cuối cùng trên thanh công cụ có liên quan đến bố cục nhưng không tạo ra chúng

1. Bố cục ngắt cho phép bạn ngắt bố cục hiện có. Sau khi các tiện ích được sắp xếp trong một bố cục, bạn không thể di chuyển hoặc thay đổi kích thước của chúng riêng lẻ vì hình học của chúng được kiểm soát bởi bố cục. Để sửa đổi các tiện ích riêng lẻ, bạn có thể phải phá vỡ bố cục và thực hiện lại sau. Để truy cập tùy chọn này, bạn có thể nhấn Ctrl + 0 trên bàn phím của mình.

2. Điều chỉnh kích thước điều chỉnh kích thước của bố cục để phù hợp với các tiện ích được chứa và để đảm bảo rằng mỗi tiện ích đều có đủ không gian để hiển thị. Để truy cập tùy chọn này, bạn có thể nhấn Ctrl + J trên bàn phím của mình.

Bạn cũng có thể truy cập tất cả các tùy chọn liên quan đến bố cục này thông qua thanh menu chính của Qt Designer, trong menu Biểu mẫu

Trong menu Biểu mẫu, bạn có quyền truy cập vào tất cả các tùy chọn liên quan đến bố cục, với tham chiếu đầy đủ về các phím tắt để truy cập chúng. Bạn cũng có thể truy cập các tùy chọn này thông qua menu ngữ cảnh của biểu mẫu, bên dưới tùy chọn Bố cục

Đặt ra một tiện ích trung tâm hợp chất

Khi bạn đang tạo các cửa sổ chính của mình, bạn có thể gặp phải các tình huống trong đó bạn cần sử dụng nhiều tiện ích trong một bố cục nhất định làm tiện ích trung tâm của mình. Vì mẫu Cửa sổ chính của Qt Designer vận chuyển với một đối tượng

pip3 install pyqt5-tools

Với Qt Designer, bạn có thể bố trí các widget của mình bằng cách sử dụng trình quản lý bố cục, như bạn đã thấy trong phần trên. Nếu bạn cần bố cục hỗn hợp các tiện ích cho GUI của cửa sổ chính, thì bạn có thể tạo bố cục đó bằng cách thực hiện các bước sau

1. Kéo và thả các tiện ích vào biểu mẫu của bạn và cố gắng đặt chúng gần vị trí mong muốn của chúng
2. Chọn các tiện ích sẽ được quản lý cùng nhau theo một bố cục nhất định
3. Áp dụng bố cục phù hợp bằng cách sử dụng thanh công cụ hoặc menu chính của Qt Designer hoặc với menu ngữ cảnh của biểu mẫu

Mặc dù bạn có thể kéo các bố cục vào một biểu mẫu rồi kéo các tiện ích con vào các bố cục đó, nhưng cách tốt nhất là kéo tất cả các tiện ích con và bộ đệm trước rồi sau đó chọn liên tục các tiện ích con và bộ đệm có liên quan để áp dụng bố cục cho chúng

Ví dụ: giả sử bạn đang xây dựng một ứng dụng máy tính. Bạn cần một đối tượng

sudo apt-get install qttools5-dev-tools
sudo apt-get install qttools5-dev

pip3 install pyqt5-tools

Cái này trông giống như một máy tính, nhưng GUI lộn xộn và lộn xộn. Để sắp xếp điều này thành GUI máy tính bóng bẩy hơn, bạn có thể sử dụng bố cục dạng lưới cho các nút và bố cục hộp dọc làm bố cục cấp cao nhất của máy tính

Máy tính của bạn vẫn cần được đánh bóng thêm, nhưng bây giờ có vẻ tốt hơn rất nhiều. Để có phiên bản hoàn chỉnh hơn, bạn có thể sử dụng Trình chỉnh sửa thuộc tính để điều chỉnh giá trị của một số thuộc tính trên các nút của mình, chẳng hạn như kích thước tối đa và tối thiểu của chúng. Bạn cũng có thể đặt kích thước cố định cho cửa sổ chính của máy tính, v.v. Đi trước và cung cấp cho nó một thử

Có Thanh trạng thái

Mẫu Cửa sổ chính của Qt Designer cung cấp thanh trạng thái theo mặc định. Thanh trạng thái là một bảng nằm ngang thường được đặt ở dưới cùng của cửa sổ chính trong ứng dụng GUI. Mục đích chính của nó là hiển thị thông tin về trạng thái hiện tại của ứng dụng

Bạn có thể chia thanh trạng thái thành nhiều phần và hiển thị thông tin khác nhau trên mỗi phần. Thông tin trên thanh trạng thái có thể là tạm thời hoặc vĩnh viễn và hầu hết thông tin này xuất hiện dưới dạng tin nhắn văn bản. Mục đích của thông tin hiển thị trên thanh trạng thái là để cập nhật cho người dùng của bạn về những gì ứng dụng hiện đang làm và trạng thái chung của nó tại một thời điểm nhất định

Bạn cũng có thể sử dụng thanh trạng thái để hiển thị các mẹo trợ giúp, là các thông báo trợ giúp ngắn mô tả chức năng của một nút hoặc tùy chọn menu nhất định. Loại thông báo này xuất hiện trên thanh trạng thái khi người dùng di con trỏ chuột lên nút trên thanh công cụ hoặc tùy chọn menu

Tạo GUI hộp thoại

Để tạo hộp thoại tùy chỉnh với Qt Designer, hãy chọn mẫu phù hợp cho hộp thoại từ hộp thoại Biểu mẫu mới. Kéo và thả các tiện ích cần thiết vào biểu mẫu, sắp xếp chúng một cách chính xác và lưu biểu mẫu vào tệp

pip3 install pyqt5-tools

Quay lại trình soạn thảo văn bản mẫu của bạn và giả sử bạn muốn thêm hộp thoại Tìm và Thay thế như thế này

Để tạo hộp thoại này, hãy bắt đầu với mẫu Hộp thoại không có nút và thêm các tiện ích cần thiết vào biểu mẫu

Tại đây, trước tiên bạn tạo một hộp thoại trống bằng cách sử dụng mẫu Hộp thoại không có Nút và đặt tiêu đề cửa sổ thành Tìm và Thay thế trong Trình kiểm tra Đối tượng. Sau đó, bạn kéo và thả hai đối tượng

cd /usr/lib/x86_64-linux-gnu/qt5/bin/ 
./designer

sudo apt-get install qttools5-dev-tools
sudo apt-get install qttools5-dev

Tiếp theo, bạn kéo và thả ba đối tượng

pip3 install pyqt5-tools

cd /usr/lib/x86_64-linux-gnu/qt5/bin/ 
./designer

Sau khi bạn có tất cả các tiện ích trên biểu mẫu, hãy đảm bảo đặt chúng ở vị trí tương tự như những gì bạn muốn đạt được trong hộp thoại cuối cùng của mình. Bây giờ là lúc để bố trí các vật dụng

Bố trí GUI hộp thoại

Như bạn đã thấy trước đây, để sắp xếp các widget theo một biểu mẫu, bạn có thể sử dụng một số trình quản lý bố cục. Để bố trí hộp thoại Tìm và Thay thế của bạn, hãy sử dụng bố cục lưới cho nhãn, chỉnh sửa dòng và hộp kiểm. Đối với các nút, hãy sử dụng bố cục dọc. Cuối cùng, sử dụng bố cục ngang làm trình quản lý bố cục cấp cao nhất cho hộp thoại của bạn

Tại đây, bạn chọn nhãn, chỉnh sửa dòng và hộp kiểm bằng con trỏ chuột và áp dụng bố cục lưới cho chúng. Sau đó, bạn thêm một dấu cách dọc giữa các nút Thay thế và Hủy để tách chúng ra một cách trực quan

Bước cuối cùng là đặt bố cục cấp cao nhất của hộp thoại. Trong trường hợp này, bạn sử dụng trình quản lý bố cục ngang. Đó là nó. Bạn đã xây dựng GUI của hộp thoại Tìm và Thay thế bằng Qt Designer. Lưu nó với tên tệp

cd /usr/lib/x86_64-linux-gnu/qt5/bin/ 
./designer

Có một loạt các thuộc tính và tính năng khác mà bạn có thể điều chỉnh trong hộp thoại của mình bằng Qt Designer. Ví dụ: bạn có thể đặt thứ tự tab của tiện ích đầu vào để cải thiện trải nghiệm của người dùng khi điều hướng hộp thoại của bạn bằng bàn phím của họ. Bạn cũng có thể cung cấp bộ tăng tốc bàn phím, kết nối tín hiệu và khe cắm, v.v.

Kết nối tín hiệu và khe cắm

Cho đến giờ, bạn đã sử dụng Qt Designer trong chế độ Chỉnh sửa Widget, đây là chế độ mặc định của nó. Trong chế độ này, bạn có thể thêm tiện ích con vào biểu mẫu của mình, chỉnh sửa thuộc tính của tiện ích con, bố trí tiện ích con trên biểu mẫu, v.v. Tuy nhiên, Qt Designer có tới bốn chế độ khác nhau để cho phép bạn làm việc trên các tính năng khác nhau của biểu mẫu của mình

Chế độPurposeMenu Tùy chọn Phím tắtChỉnh sửa tiện íchChỉnh sửa tiện íchChỉnh sửa → Chỉnh sửa tiện ích F3 Chỉnh sửa Tín hiệu/Khe CắmKết nối tín hiệu tích hợp sẵn và kheSửa → Chỉnh sửa Tín hiệu/Khe cắm F4Edit BuddiesSetting up keyboard acceleratorsEdit → Edit BuddiesNoEdit Tab OrderSetting up the tab order of widgetsEdit → Edit Tab OrderNo

Bạn cũng có thể truy cập các chế độ này bằng cách nhấp vào các nút tương ứng của chúng trong phần liên quan đến chế độ trên thanh công cụ của Qt Designer, giống như thế này

Để có thể chỉnh sửa các tín hiệu và vị trí tích hợp sẵn của các tiện ích và biểu mẫu của bạn, trước tiên bạn cần chuyển sang chế độ Chỉnh sửa Tín hiệu/Khe cắm

Ghi chú. Trong Qt, thuật ngữ bạn bè đề cập đến mối quan hệ đặc biệt giữa nhãn và tiện ích trong đó nhãn cung cấp trình tăng tốc bàn phím hoặc phím tắt cho phép bạn truy cập tiện ích bạn bè bằng bàn phím của mình

Hành động của người dùng trên các widget và biểu mẫu, chẳng hạn như nhấp chuột hoặc nhấn phím, được gọi là sự kiện trong PyQt. Khi một sự kiện xảy ra, tiện ích trong tầm tay sẽ phát ra tín hiệu. Cơ chế này cho phép bạn chạy các hành động để đáp ứng với các sự kiện. Những hành động này được gọi là các vị trí, là các phương thức hoặc chức năng

Để thực thi một vị trí để phản hồi một sự kiện, bạn cần chọn một trong các tín hiệu do tiện ích con phát ra để phản hồi một sự kiện và kết nối nó với vị trí mong muốn

Hầu hết các tiện ích, bao gồm hộp thoại và cửa sổ, triển khai các tín hiệu tích hợp được phát ra khi một sự kiện nhất định xảy ra trên tiện ích. Widget cũng cung cấp các vị trí tích hợp cho phép bạn thực hiện một số hành động được tiêu chuẩn hóa

Để thiết lập kết nối tín hiệu và vị trí giữa hai tiện ích bằng Qt Designer, bạn cần chọn tiện ích nhà cung cấp tín hiệu bằng chuột, sau đó kéo và thả tiện ích đó vào tiện ích nhà cung cấp vị trí. Thao tác này khởi chạy hộp thoại Cấu hình kết nối của Qt Designer. Bây giờ, hãy quay lại hộp thoại Tìm và Thay thế và chuyển sang chế độ Chỉnh sửa tín hiệu/Khe cắm của Qt Designer. Sau đó kéo thả nút Cancel vào form

Hộp thoại Cấu hình kết nối có hai bảng. Trên bảng bên trái, bạn có thể chọn tín hiệu từ tiện ích bộ cung cấp tín hiệu và trên bảng bên phải, bạn có thể chọn một vị trí từ tiện ích bộ cung cấp vị trí. Để tạo kết nối, nhấn OK

Kết nối xuất hiện dưới dạng một mũi tên từ tiện ích nhà cung cấp tín hiệu đến tiện ích nhà cung cấp vị trí, cho biết rằng kết nối đã được thiết lập. Bạn cũng sẽ thấy tên của tín hiệu và khe mà bạn vừa kết nối

Trong trường hợp này, bạn đã kết nối tín hiệu

cd /usr/lib/x86_64-linux-gnu/qt5/bin/ 
./designer

cd /usr/lib/x86_64-linux-gnu/qt5/bin/ 
./designer

Để sửa đổi kết nối, bấm đúp vào mũi tên hoặc một trong các nhãn. Thao tác này sẽ hiển thị hộp thoại Định cấu hình kết nối, trong đó bạn có thể thay đổi tín hiệu hoặc vị trí liên quan đến kết nối theo nhu cầu của mình

Để xóa kết nối, hãy chọn mũi tên biểu thị kết nối hoặc một trong các nhãn xác định tín hiệu và khe, sau đó nhấn Del .

Đặt thứ tự tab của các tiện ích

Để cải thiện khả năng sử dụng của các hộp thoại, bạn có thể đặt thứ tự tab nhất quán cho các tiện ích đầu vào của mình. Thứ tự tab là thứ tự các tiện ích con trên biểu mẫu của bạn xuất hiện khi bạn nhấn Tab hoặc Shift< . +Tab on your keyboard.

Nếu bạn đang sử dụng Qt Designer để tạo biểu mẫu của mình thì thứ tự tab mặc định của các tiện ích sẽ dựa trên thứ tự mà bạn đặt từng tiện ích trên biểu mẫu. Đôi khi thứ tự này không đúng và khi bạn nhấn Tab hoặc Shift +Tab, the focus jumps to an unexpected widget. Take a look at the tab order behavior in your Find and Replace dialog:

Tiêu điểm bắt đầu trên phần chỉnh sửa Tìm dòng, sau đó chuyển qua phần chỉnh sửa dòng Thay thế, sau đó qua các hộp kiểm và cuối cùng là qua các nút. Điều gì sẽ xảy ra nếu bạn muốn tiêu điểm chuyển từ chỉnh sửa dòng Tìm sang chỉnh sửa dòng Thay thế rồi đến nút Tìm? . Chuyển sang chế độ Chỉnh sửa thứ tự tab trong Qt Designer. Bạn sẽ thấy một cái gì đó như thế này

Trong chế độ Chỉnh sửa thứ tự tab, mỗi tiện ích đầu vào trong biểu mẫu hiển thị một số xác định vị trí của nó trong chuỗi thứ tự tab. Bạn có thể thay đổi thứ tự đó bằng cách nhấp vào các số theo thứ tự mong muốn

Bạn thay đổi thứ tự tab của các tiện ích đầu vào bằng cách nhấp vào các số theo thứ tự mong muốn. Lưu ý rằng khi bạn chọn một số, nó sẽ chuyển sang màu đỏ, cho biết đây là vị trí hiện đang được chỉnh sửa trong chuỗi thứ tự tab. Các số bạn chưa đặt được hiển thị bằng màu xanh lam và các số bạn đã đặt được hiển thị bằng màu xanh lá cây. Nếu bạn mắc lỗi, thì bạn có thể bắt đầu lại việc đặt hàng bằng cách chọn Khởi động lại từ menu ngữ cảnh của biểu mẫu

Cung cấp bộ gia tốc bàn phím

Trình tăng tốc bàn phím là một tổ hợp phím mà bạn có thể nhấn trên bàn phím để nhanh chóng di chuyển tiêu điểm vào một tiện ích nhất định trên hộp thoại hoặc cửa sổ. Thông thường, trình tăng tốc bàn phím bao gồm phím Alt và một chữ cái xác định tiện ích hoặc tùy chọn mà bạn muốn truy cập. Điều này có thể giúp bạn cải thiện khả năng sử dụng các ứng dụng của mình.

Để xác định trình tăng tốc bàn phím trên một tiện ích bao gồm nhãn, chẳng hạn như nút hoặc hộp kiểm, bạn chỉ cần đặt ký hiệu dấu và [

pyuic5 –x "filename".ui –o "filename".py

Bằng cách đặt dấu và trước chữ C trong văn bản của nút Hủy, bạn tạo một trình tăng tốc bàn phím. Nếu bạn nhấn Alt + C trên bàn phím, thì nút Hủy .

Để xác định trình tăng tốc bàn phím trên tiện ích con không bao gồm nhãn, chẳng hạn như chỉnh sửa dòng, bạn cần biến tiện ích con đó thành bạn của đối tượng nhãn. Có bốn bước bạn cần thực hiện nếu muốn tạo kết nối bạn bè

1. Chọn một chữ cái trong văn bản của nhãn để xác định kết nối bạn bè và cung cấp bộ tăng tốc bàn phím
2. Đặt dấu và [

   pyuic5 –x "filename".ui –o "filename".py
   

   57] trước chữ cái đã chọn trong văn bản của nhãn
3. Chuyển sang chế độ Chỉnh sửa bạn bè trong Qt Designer
4. Kéo và thả nhãn vào tiện ích bạn bè

Đây là cách bạn có thể tạo mối quan hệ bạn bè giữa nhãn Tìm và chỉnh sửa dòng liên quan của nó

Để tạo mối quan hệ bạn thân giữa nhãn và tiện ích, hãy chọn nhãn bằng chuột và kéo nhãn đó vào tiện ích đầu vào mà bạn muốn đặt làm bạn của nó. Nhãn và tiện ích đầu vào sẽ trở thành bạn thân. Từ thời điểm này, bạn có thể nhấn Alt cùng với chữ cái đã chọn trong văn bản nhãn để di chuyển tiêu điểm đến tiện ích con có liên quan.

Điều quan trọng cần lưu ý là bạn không nên có hai tiện ích có cùng bộ tăng tốc bàn phím ở một dạng nhất định. Điều này có nghĩa là bạn cần chọn một chữ cái duy nhất cho mỗi bộ tăng tốc bàn phím

Hãy tiếp tục và sử dụng Qt Designer để đặt bộ tăng tốc bàn phím cho các tiện ích trên hộp thoại Tìm và Thay thế của bạn. Kết quả cuối cùng sẽ giống như hộp thoại bạn đã thấy ở đầu phần Tạo GUI hộp thoại

Thiết lập Windows và hộp thoại để sử dụng

Bây giờ là lúc thiết lập cửa sổ và hộp thoại của bạn để sử dụng trong ứng dụng thực [trong trường hợp này là trình soạn thảo văn bản mẫu]. Nếu bạn đã làm theo hướng dẫn này, thì bạn nên có ít nhất hai tệp

pip3 install pyqt5-tools

1. pyuic5 –x "filename".ui –o "filename".py
   

   56 với GUI của ứng dụng soạn thảo văn bản mẫu

2. cd /usr/lib/x86_64-linux-gnu/qt5/bin/ 
   ./designer
   

   06 với GUI của hộp thoại Tìm và Thay thế

Hãy tiếp tục và tạo một thư mục mới có tên là

pip3 install pyqt5-tools

pip3 install pyqt5-tools

pip3 install pyqt5-tools

pip3 install pyqt5-tools

pip3 install pyqt5-tools

pip3 install pyqt5-tools

Vì GUI của cửa sổ chính tương đối phức tạp, bạn có thể sử dụng

$ sudo apt install qttools5-dev-tools

pyuic5 –x "filename".ui –o "filename".py

Bạn có thể tải xuống tất cả mã và tài nguyên cần thiết để xây dựng trình soạn thảo văn bản mẫu của mình bằng cách nhấp vào liên kết bên dưới

Get the Source Code. Click here to get the source code you’ll use to learn about creating Python GUI applications with Qt Designer in this tutorial

Bây giờ hãy mở một thiết bị đầu cuối và điều hướng đến thư mục

pip3 install pyqt5-tools

pyuic5 –x "filename".ui –o "filename".py

Lệnh này tạo một mô-đun Python có tên là

$ sudo apt install qttools5-dev-tools

$ sudo apt install qttools5-dev-tools

pip3 install pyqt5-tools

1
2

$ sudo apt install qttools5-dev-tools

$ sudo apt install qttools5-dev-tools

$ sudo apt install qttools5-dev-tools

Ghi chú. Nếu

$ sudo apt install qttools5-dev-tools

$ sudo apt install qttools5-dev-tools

$ sudo apt install qttools5-dev-tools

Nếu bạn đã cài đặt PyQt trên toàn hệ thống, thì bạn có thể chạy

$ sudo apt install qttools5-dev-tools

Bây giờ thư mục làm việc của bạn sẽ trông như thế này

sudo apt-get install qttools5-dev-tools
sudo apt-get install qttools5-dev

Vì hộp thoại Tìm và Thay thế của bạn khá nhỏ nên bạn có thể tải trực tiếp GUI của nó từ tệp

pip3 install pyqt5-tools

pip3 install pyqt5-tools

pip3 install pyqt5-tools

pip3 install pyqt5-tools

Cách tải động các tệp

pip3 install pyqt5-tools

pip3 install pyqt5-tools

Bây giờ bạn đã chọn một chiến lược để xây dựng từng GUI của mình, đã đến lúc kết hợp mọi thứ lại với nhau trong một ứng dụng thực tế

Kết hợp mọi thứ lại với nhau trong một ứng dụng

Với tất cả các phần đã sẵn sàng cho trình soạn thảo văn bản mẫu của bạn, bạn có thể tạo ứng dụng và viết mã cần thiết để sử dụng cửa sổ chính và hộp thoại Tìm và Thay thế. Kích hoạt trình soạn thảo mã hoặc IDE yêu thích của bạn trong thư mục

pip3 install pyqt5-tools

$ sudo apt install qttools5-dev-tools

1
2

Đây là những gì mã này làm

• Dòng 3 nhập các lớp PyQt cần thiết để xây dựng ứng dụng và GUI
• Dòng 6 nhập

  $ sudo apt install qttools5-dev-tools
  

  18 từ mô-đun

  $ sudo apt install qttools5-dev-tools
  

  19. Hàm này cung cấp cách tải nội dung của tệp

  pip3 install pyqt5-tools
  

  13 một cách linh hoạt
• Dòng 8 nhập

  $ sudo apt install qttools5-dev-tools
  

  03, chứa GUI cho cửa sổ chính của bạn
• Dòng 10 định nghĩa

  $ sudo apt install qttools5-dev-tools
  

  22, sẽ cung cấp cửa sổ chính của ứng dụng của bạn. Trong trường hợp này, lớp sử dụng đa kế thừa. Nó kế thừa chức năng cửa sổ chính từ

  pip3 install pyqt5-tools
  

  55 và chức năng GUI từ

  $ sudo apt install qttools5-dev-tools
  

  03
• Dòng 13 gọi

  $ sudo apt install qttools5-dev-tools
  

  04, tạo toàn bộ GUI cho cửa sổ chính của bạn
• Dòng 16 định nghĩa

  $ sudo apt install qttools5-dev-tools
  

  26, kết nối các tín hiệu và vị trí cần thiết
• Dòng 21 định nghĩa

  $ sudo apt install qttools5-dev-tools
  

  27. Phương pháp này tạo một phiên bản hộp thoại Tìm và Thay thế của bạn và thực thi nó
• Dòng 25 định nghĩa

  $ sudo apt install qttools5-dev-tools
  

  28, tạo và khởi chạy một hộp thoại nhỏ để cung cấp thông tin về ứng dụng. Trong trường hợp này, bạn sử dụng hộp thoại tích hợp dựa trên

  1
  2
  

  08
• Dòng 35 định nghĩa

  $ sudo apt install qttools5-dev-tools
  

  30, cung cấp hộp thoại Tìm và Thay thế
• Dòng 38 gọi

  $ sudo apt install qttools5-dev-tools
  

  18 để tải GUI của hộp thoại từ các tệp

  $ sudo apt install qttools5-dev-tools
  

  32

Cuối cùng, trên các dòng 41 đến 44, bạn tạo ứng dụng, tạo và hiển thị cửa sổ chính, đồng thời chạy vòng lặp chính của ứng dụng bằng cách gọi

$ sudo apt install qttools5-dev-tools

Điều quan trọng cần lưu ý là Qt Designer có thể đặt tên cho các hành động của bạn khác một chút so với những gì bạn đã thấy trong đoạn mã trên. Ví dụ: bạn có thể tìm thấy tên

$ sudo apt install qttools5-dev-tools

$ sudo apt install qttools5-dev-tools

Nếu bạn muốn sử dụng tên riêng của mình thay vì tên do Qt Designer tạo, thì bạn có thể vào Trình chỉnh sửa thuộc tính và thay đổi thuộc tính

$ sudo apt install qttools5-dev-tools

Ghi chú. Bạn cũng có thể tạo

$ sudo apt install qttools5-dev-tools

Ví dụ: bạn có thể định nghĩa

$ sudo apt install qttools5-dev-tools

cd /usr/lib/x86_64-linux-gnu/qt5/bin/ 
./designer

Trong trường hợp này, bạn tạo

pip3 install pyqt5-tools

$ sudo apt install qttools5-dev-tools

pip3 install pyqt5-tools

Nếu bạn chạy ứng dụng này, thì bạn sẽ nhận được cửa sổ sau trên màn hình của mình

Đó là nó. Bạn đã tạo một trình soạn thảo văn bản mẫu với chức năng tối thiểu bằng Qt Designer. Lưu ý rằng để viết mã ứng dụng này, bạn chỉ viết 44 dòng mã Python, ít hơn đáng kể so với những gì bạn cần viết để viết mã thủ công GUI của một ứng dụng tương đương từ đầu