efektywny przepływ pracy Python + PyQt Designer

zanim zaczniemy, zakłada się, że posiadasz średnio zaawansowaną i zaawansowaną wiedzę na temat Pythona. Obejmuje to podstawowe typy danych (zwłaszcza słowniki), instrukcje i funkcje. Znajomość programowania obiektowego (OOP) byłaby przydatna, ale nie wymagana.

To będzie szybki samouczek na temat tworzenia GUI Pythona przy użyciu kombinacji Biblioteki Python PyQt i projektanta. Designer to program, który jest dostarczany z PyQt i pozwala na wizualne tworzenie GUI. Użyjemy tylko Designera i Pythona IDE / edytora tekstu. Python GUI nie musi być skomplikowany!

spójrzmy na tworzenie interfejsu graficznego Pythona z tymi funkcjami:

• plik konfiguracyjny dla niestandardowych ustawień użytkownika
• wiele okien w programie
• Dodawanie funkcji do przycisków, pól wejściowych i innych klikalnych elementów
• Zdjęcia i logo

to naprawdę wszystko, czego potrzebujesz do prostego, ale solidnego interfejsu graficznego Pythona. W tym samouczku stwórzmy prosty przelicznik walut.

będziemy używać Pythona 3.6 w tym samouczku i będę tworzyć ten samouczek w środowisku wirtualnym za pomocą systemu Windows 10. W tym samouczku będziemy musieli tylko zainstalować PyQt5 dla GUI i żądań dla naszego przykładowego projektu. Zostanie to wykonane za pomocą pip. Ważne jest, aby pamiętać, że Designer nie jest dostarczany z instalacją pip PyQt5 i musi być zainstalowany osobno. Poniższy blok kodu pokazuje polecenia, które należy wpisać:

pip install PyQt5
pip install PyQt5Designer
pip install requests

Once it is installed, just search for „Designer” in your computer and it should pop up.

dane walutowe

możemy uzyskać bezpłatne dane Forex z exchangerate-API, które wygodnie ma API, z którego możemy korzystać. API zwraca obiekt JSON z informacjami o walucie, który można nawigować za pomocą słownika Pythona. Kursy wymiany są oparte na podanej przez Ciebie walucie głównej.

w poniższym przykładzie chcemy przyjrzeć się Forex używając dolara amerykańskiego (USD) jako waluty głównej.

import requestsurl = 'https://api.exchangerate-api.com/v4/latest/USD'
response = requests.get(url)
data = response.json()# The data variable will look like the dictionary below
{
"base": "USD",
"date": "2020-14-20",
"time_last_updated": 1553092232,
"rates": {
"USD": 1,
"AUD": 1.4882,
"CAD": 1.325097,
"...": 1.311357,
"...": 7.4731, etc. etc.
}
}

Tworzenie GUI

teraz przychodzi część zabawy. Tworzenie GUI!

Po otwarciu Qt Designer otworzy się ten monit. Chcę zacząć od pustego płótna, więc wybieram „okno dialogowe bez przycisków”, a następnie klikam „Utwórz”.

teraz masz puste okno dialogowe do pracy. Możesz zacząć dodawać widżety, korzystając z listy po lewej stronie. Widżety te dodajesz, przeciągając je i upuszczając na okno GUI. Chociaż istnieje wiele widżetów, w tym samouczku omówię tylko następujące widżety:

• etykiety
• Push Button
• edycja linii
• Pole kombi

Pole kombi jest również znane jako lista rozwijana i możesz wypełnić tę listę, klikając dwukrotnie obiekt pola kombi w Projektancie, wyświetli się okno, w którym możesz dodawać elementy. W takim przypadku dodamy waluty, których używamy. Pozwoli to użytkownikowi zdecydować, którą walutę chce wykorzystać jako walutę referencyjną.

Kiedy zaczynasz dodawać te widżety, powinieneś upewnić się, że są one poprawnie nazwane, dzięki czemu możesz się do nich łatwo odwoływać w kodzie Pythona. Odbywa się to za pomocą nazwy obiektu w edytorze właściwości po prawej stronie. Zazwyczaj po prostu dołączam ich funkcję do istniejącej nazwy, takiej jak labelTitle lub lineEditLocationDetails. Ten styl nazewnictwa pomaga mi zapamiętać, z jakim typem obiektu GUI pracuję, gdy piszę Kod Pythona.

styl to jak chcesz, ale dla tych, którzy po tym tutorialu utworzyć GUI, który wygląda tak poniżej:

Ten pływający tekst „logo” jest symbolem zastępczym dla zdjęcia, które załadujemy. To zostanie wyjaśnione później!

Qt Designer to Python

Zapisz plik UI w folderze projektu jako „mainDialog.ui”, Lubię utworzyć podfolder o nazwie „ui”, a następnie zapisać go tam, abyśmy mogli utrzymać folder projektu zorganizowany.

Po zapisaniu musimy przekształcić go w coś, co Python naprawdę rozumie. Korzystając z wiersza polecenia, przejdź do podfolderu interfejsu użytkownika. Jeśli robisz to również w środowisku wirtualnym, upewnij się, że jesteś również w środowisku wirtualnym, które zawiera instalację PyQt5.

wpisz ten kod, aby przejść do folderu zawierającego plik ui i przekonwertować .plik interfejsu użytkownika do pliku. py:

cd "your/ui/folder/here"
pyuic5 mainDialog.ui -o mainDialog.py

w katalogu głównym folderu projektu Utwórz plik Pythona o nazwie „main.py”. Wprowadź ten kod:

Uruchom main.py plik za pomocą interpretera Pythona. Gratulacje! Teraz Python może uruchomić kod i pojawi się twój GUI. Wyjaśnię najważniejsze części kodu do tej pory:

• linia 5: importujemy mainDialog.py Plik z podfolderu interfejsu użytkownika. Używam aliasu „mainDialog”, aby ułatwić nazywanie.
• linia 10: ta klasa przechowuje wszystkie funkcje związane z Twoim oknem mainDialog, które właśnie stworzyłeś. Pierwszy argument wywołuje obiekt QDialog, który jest typem interfejsu graficznego, którego używamy. Drugi argument jest oparty na zadeklarowanym aliasie i jest to klasa Ui_Dialog wewnątrz pliku Pythona, która została wygenerowana z.Konwersja plików ui
• linia 12: funkcja __init__ jest ważna, ponieważ jest to kod, który chcesz uruchomić podczas uruchamiania programu. Więc to jest miejsce, gdzie jaźń.setupUi (self) pojawia się, ponieważ chcesz, aby interfejs użytkownika działał po otwarciu programu. Będziemy umieszczać rzeczy takie jak ładowanie plików konfiguracyjnych i funkcjonalność przycisków tutaj, ponieważ chcemy, aby działały, gdy tylko uruchomimy oprogramowanie.
• linia 20: jest to kod, który wykonuje i otwiera GUI.

Dodawanie funkcji do przycisków i obiektów

teraz mamy nasz piękny GUI. Jak to zrobić Forex? Dodajmy funkcję, aby załadować najnowsze kursy Forex, które pokazałem na początku tego postu. Następnie wstawmy kod, aby połączyć obiekty z kodem Pythona.

próbując połączyć się z obiektami utworzonymi w programie Designer, musisz zacząć od „jaźń.”. Jeśli więc twój obiekt w PyQt Designer został nazwany labelTitle, wywołasz go wpisując self.labelTitle. Jeśli twój obiekt został wywołany lineEditInputDirectory, wywołasz go wpisując self.lineEditInputDirectory i tak dalej.

Sprawdź gist Github i Wyjaśnienie poniżej:

linia 16: Ta funkcja jest wywoływana, gdy użytkownik kliknie przycisk, aby załadować stawki Forex. Przedmiot sam w sobie jest sobą.pushButtonLoadRates ale dołączamy funkcjonalność gdy użytkownik kliknie ją dodając .kliknąłem.connect(). Ta funkcja ma pewne specyficzne niuanse. Argument za .connect() akceptuje tylko funkcję bez nawiasu, więc w tym przypadku self.load_rates. Jeśli chcesz dodać argumenty ze względu na wymagania funkcji Pythona, musisz użyć lambda, zapoznaj się z blokiem kodu poniżej:

self.pushButton.clicked.connect(lambda:self.load_rates(arg1,arg2,...)) 

Linia 19: .currentText () Pobiera bieżący łańcuch obiektu comboBox, który będzie naszą walutą referencyjną. Jeśli więc użytkownik wybierze USD, zwróci stawki Forex w stosunku do 1 USD. Ten ciąg jest dodawany do adresu URL, który jest używany do łączenia się z API w następnej linii.

linie 24-26: służą do załadowania naszych danych do obiektów lineEdit. Używamy .setText () do zmiany tekstu w obiektach lineEdit. Akceptuje tylko ciągi znaków, więc liczby z API powinny zostać przekonwertowane na ciąg znaków.

dodanie pliku konfiguracyjnego

ta część jest trochę skomplikowana i jest tam, gdzie twoja istniejąca wiedza Pythona będzie przydatna. W tej sekcji omówimy następujące funkcje:

• otwarcie nowego okna w programie
• Tworzenie i używanie pliku konfiguracyjnego

teraz, gdy mamy działający program, powiedzmy, że dla przykładu, różni ludzie w Twoim dziale mają różne potrzeby i wszyscy pracują z różnymi walutami. Możemy ułatwić im życie, dodając plik konfiguracyjny, aby nie musieli za każdym razem korzystać z rozwijanego pola. Za pomocą pliku konfiguracyjnego możemy zapisać ich unikalne ustawienia, a następnie załadować je po uruchomieniu programu.

tutaj pojawia się przycisk” Config”. Stwórzmy nowe okno dla użytkownika, aby zmodyfikować jego ustawienia. Dzięki temu możemy utrzymać główne okno w czystości i porządku.

zapisz to w folderze UI jako configdialog.interfejs użytkownika i jak zrobiliśmy wcześniej w tym samouczku, przekonwertuj go za pomocą tego samego polecenia pyuic5, co widać w poniższym bloku kodu:

cd "your/ui/folder/here"
pyuic5 configDialog.ui -o configDialog.py

teraz oto, jak zaktualizowany kod powinien wyglądać poniżej. Objaśnienia dla nowych dodatków kodu znajdują się poniżej tego gist Github:

• linia 6: dodajemy okno dialogowe konfiguracji za pomocą tego polecenia importu
• linia 10-11: nowe polecenia importu, które są istotne dla posiadania ładnego przepływu pracy pliku konfiguracyjnego. pickle I os są dostarczane z domyślnym środowiskiem Pythona i nie wymagają dodatkowych instalacji.
• Kolejka 13-14: Lokalizacja pliku konfiguracyjnego jest używana w całym skrypcie we wszystkich klasach, więc deklarujemy go jako globalny i robimy wszystko-caps, ponieważ jest stałą.
• linia 17: ta klasa przechowuje wszystkie istotne informacje dla okna konfiguracyjnego. Jeśli chcesz wywoływać obiekty w pliku konfiguracyjnym interfejsu użytkownika, zaleca się, aby wywoływać je w tej klasie, a nie w klasie MainDialog.
• linia 23: wczytujemy istniejący plik konfiguracyjny. Robimy to, abyśmy mogli pokazać, jakie jest bieżące ustawienie dla użytkownika.
• Kolejka 26: Korzystając z załadowanego pliku konfiguracyjnego, ustawiamy tekst pola kombi na dowolne bieżące ustawienie.
• linia 33: kiedy zapisujemy konfigurację, chcemy zaktualizować słownik przechowywany w self.config przed zapisaniem pliku konfiguracyjnego.
• linia 39: to zamyka okno parametrów konfiguracyjnych.
• linia 48-54: jest to logika podczas ładowania pliku konfiguracyjnego w głównym oknie dialogowym. Z jakiegokolwiek powodu plik konfiguracyjny może zniknąć, a następnie program nie uruchomi się z powodu błędów. Jeśli brakuje pliku konfiguracyjnego, Utwórz plik konfiguracyjny z domyślnymi parametrami, aby użytkownik mógł nadal uruchamiać program, a następnie modyfikować parametry później.
• Linia 56: ładujemy ustawienia niestandardowe i ustawiamy Pole kombi NA preferowaną przez użytkownika walutę.
• linia 62-63: spowoduje uruchomienie okna parametrów konfiguracyjnych. Jest to oparte na nazwie okna dialogowego config nazwa klasy. W tym przypadku Klasa nazywa się ConfigParameters.
• linia 65-68: po zakończeniu konfiguracji ustawień przez użytkownika i zamknięciu okna. Program zaktualizuje się i załaduje plik konfiguracyjny ponownie przed aktualizacją pola kombi waluty referencyjnej.

Ten obieg pracy pozwala użytkownikowi zapisać swoje unikalne ustawienia, a program nadal będzie działał, jeśli brakuje pliku konfiguracyjnego. Chcesz spróbować wyjaśnić każdy problem, który napotkasz w swoim programie.

dodawanie zdjęć

teraz masz w pełni funkcjonalny program, dodajmy wykończenie: logo. Chociaż może istnieć plik zasobów PyQt, w którym można przechowywać obrazy, wolę po prostu ładować obrazy za pomocą etykiet i piksmap. To bardzo szybko.

linia 56-58: ładujemy logo, które zapisałem w folderze ui. Następnie ustawiłem obiekt labelLogo, aby załadował pixmapę i ustawiłem zawartość, aby skalowała się do rozmiaru obiektu labelLogo.

Final Thoughts

Hopefully this tutorial gives some clarity on how PyQt5 Designer works. Spędziłem niezliczone godziny googlując te rzeczy, a nawet płatne samouczki na Udemy były nieco bezużyteczne.