tehokas Python + PyQt-suunnittelijan työnkulku

ennen kuin aloitamme, oletetaan, että sinulla on keskitason tai edistyneen Pythonin tuntemus. Tämä sisältää perustietotyypit (erityisesti sanakirjat), lausunnot ja funktiot. Tieto Olio-Orientoituneesta ohjelmoinnista (OOP) olisi hyödyllistä, mutta sitä ei tarvita.

Tämä on nopea opetusohjelma python-käyttöliittymän tekemiseen käyttäen Python PyQt-kirjaston ja Designerin yhdistelmää. Designer on ohjelma, joka tulee PyQt ja voit luoda GUI visuaalisesti. Käytämme vain suunnittelija ja Python IDE / tekstieditori. Python GUI ei tarvitse olla monimutkainen!

tarkastellaan Python-käyttöliittymän työnkulun luomista näillä ominaisuuksilla:

• asetustiedosto mukautetuille käyttäjäasetuksille
• useita ikkunoita ohjelman sisällä
• toimintojen lisääminen painikkeisiin, syöttölaatikoihin ja muihin klikattaviin kohteisiin
• kuvia ja logoja

Tämä on oikeastaan kaikki mitä tarvitset yksinkertaiseen mutta vankkaan Python-käyttöliittymään. Tässä opetusohjelma let ’ s vain luoda yksinkertainen valuuttamuunnin.

käytämme Pythonia 3.6 Tässä opetusohjelmassa ja aion luoda tämän opetusohjelman virtuaalisessa ympäristössä Windows 10. Tässä opetusohjelmassa meidän tarvitsee vain asentaa PyQt5 GUI ja pyynnöt meidän näyte projekti. Tämä tehdään käyttämällä pip. On tärkeää huomata, että suunnittelija ei tule PIP PyQt5 asennus ja on asennettava erikseen. Alla oleva koodilohko näyttää komennot, jotka sinun on kirjoitettava:

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.

valuuttatiedot

we can get free forex data from exchangerate-API which conveniently has a API we can use. API palauttaa JSON-objektin valuuttatietoineen, joita voidaan suunnistaa Python-sanakirjan avulla. Vaihtokurssit perustuvat määrittämääsi päävaluuttaan.

alla olevassa esimerkissä haluamme tarkastella Forexia käyttäen Yhdysvaltain dollaria (USD) päävaluuttana.

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.
}
}

GUI: n luominen

nyt tulee hauska osuus. GUI: n luominen!

kun avaat Qt Designerin, tämä kehote avautuu. Haluan aloittaa tyhjällä kankaalla, joten valitsen ” dialogi ilman painikkeita ”ja sitten”Luo”.

nyt sinulla on tyhjä ikkuna, jonka kanssa työskennellä. Voit alkaa lisätä widgettejä vasemmalla olevasta luettelosta. Voit lisätä nämä widgetit vetämällä ja pudottamalla ne graafisen käyttöliittymän ikkunaan. Vaikka on olemassa monia widgettejä, tässä opetusohjelmassa käsittelen vain seuraavia widgettejä:

• Tarrat
• painike
• Line Edit
• Combo Box

Combo Box tunnetaan myös avattavana luettelona ja voit kansoittaa tämän listan kaksoisnapsauttamalla Combo Box-objektia Designerissa, se antaa sinulle ikkunan, johon voit lisätä kohteita. Tässä tapauksessa lisäämme käyttämämme valuutat. Näin käyttäjä voi päättää, mitä valuuttaa hän haluaa käyttää viitevaluuttana.

kun aloitat näiden vekottimien lisäämisen, varmista, että ne on nimetty oikein, jotta voit viitata niihin helposti Python-koodissa. Tämä tehdään käyttämällä objektinimi ominaisuus Editor oikealla. Yleensä vain liittää niiden funktio nykyisen nimen, kuten labelTitle tai lineEditLocationDetails. Tämä nimeämistyyli auttaa minua muistamaan, minkälaisen GUI-objektin kanssa työskentelen, kun kirjoitan Python-koodia.

style it how you want, mutta tätä opetusohjelmaa seuraaville luo GUI, joka näyttää tältä alla:

tuo kelluva ”logo” – teksti on paikkamerkki kuvalle, jonka lataamme. Se selitetään myöhemmin!

Qt Designer Pythoniin

Tallenna KÄYTTÖLIITTYMÄTIEDOSTO projektikansioosi nimellä ”mainDialog.ui”, haluan luoda alikansioon nimeltään ” ui ” ja sitten tallentaa sen siellä, jotta voimme pitää projektin kansio järjestetty.

kun se on tallennettu, meidän täytyy muuntaa se joksikin, jonka Python todella ymmärtää. Siirry komentokehotteen avulla ui-alikansioon. Jos teet tämän myös virtuaaliympäristössä, varmista, että olet myös virtuaaliympäristössäsi, joka sisältää PyQt5-asennuksen.

kirjoita tämä koodi navigoidaksesi käyttöliittymätiedoston sisältävään kansioon ja muuntaaksesi sen.ui-tiedosto. py-tiedostoon:

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

luo Projektikansion juureen Python-tiedosto nimeltä ”main.py”. syötä tämä koodi:

Juokse main.py tiedosto Python-tulkin avulla. Onneksi olkoon! Nyt Python voi suorittaa koodin ja GUI avautuu. Selitän koodin Tärkeät osat Tähän mennessä:

• rivi 5: tuomme mainDialog.py tiedosto ui-alikansiosta. Käytän nimimerkkiä ”mainDialog”, jotta nimeäminen olisi helpompaa.
• linja 10: Tässä luokassa on kaikki juuri tekemääsi maindialogi-ikkunaan liittyvät toiminnot. Ensimmäinen argumentti vaatii QDialog objekti, joka on tyyppi GUI käytämme. Toinen argumentti perustuu alias julistimme ja se on Ui_dialog Luokka sisällä Python tiedosto, joka on luotu .ui – tiedostomuunnos
• rivi 12: __init__ – toiminto on tärkeä, koska se on koodi, joka haluat suorittaa ohjelman käynnistyessä. Joten tässä on itse.setupUi (self) tulee, koska haluat käyttöliittymän suoritettavan, kun avaat ohjelman. Aiomme laittaa tavaraa, kuten lataamalla asetustiedostot ja painiketta toimintoja täällä, koska haluamme, että ne toimivat heti, kun suoritamme ohjelmiston.
• rivi 20: Tämä on koodi, joka suorittaa ja avaa GUI: n.

funktioiden lisääminen painikkeisiin ja esineisiin

nyt meillä on kaunis GUI. Miten teemme sen tehdä Forex? Lisätään toiminto ladata uusimmat Forex hinnat, jotka näytin alussa tämän viestin. Sitten, laitetaan koodi liittää esineitä Python-koodi.

kun yrität muodostaa yhteyden Designerissa luomiisi esineisiin, sinun on aloitettava ”itsestä.”. Joten jos PyQt Designer-objektisi nimi oli labelTitle, kutsut objektia kirjoittamalla itse.tekstitys. Jos objekti oli nimeltään lineEditInputDirectory niin voit soittaa sitä kirjoittamalla itse.lineEditInputDirectory ja niin edelleen.

Katso Github gist ja selitys alla:

rivi 16: tämä funktio kutsutaan, kun käyttäjä napsauttaa painiketta ladatakseen Forex hinnat. Objekti itse on itse.pushButtonLoadRates mutta liitämme toiminnallisuutta, kun käyttäjä napsauttaa sitä lisäämällä .napsauttaa.liittää(). Tämä toiminto on joitakin erityisiä vivahteita. Perustelu .connect () hyväksyy funktion vain ilman sulkeita, eli tässä tapauksessa itse.kuorma_tehot. Jos joudut lisäämään argumentteja Python-funktion vaatimusten vuoksi, sinun on käytettävä lambdaa, katso alla olevasta koodilohkosta:

rivi 19:.currentText () saa comboBox-objektin nykyisen merkkijonon, joka on viitevaluuttamme. Joten jos käyttäjä valitsee USD se palauttaa Forex hinnat suhteessa 1 USD. Tämä merkkijono lisätään URL-osoitteeseen, jota käytetään yhteyden muodostamiseen API: iin seuraavalla rivillä.

rivit 24-26: Näitä käytetään lataamaan tietomme lineEdit-olioihin. Käytämme .asetusteksti () muuttaa tekstiä lineEdit-objekteilla. Se hyväksyy vain merkkijonoja, joten numerot API olisi muunnettava merkkijono.

asetustiedoston lisääminen

Tämä osa on hieman hankala ja siinä olemassa olevat Python-tietosi ovat hyödyllisiä. Tässä osiossa käsitellään seuraavia ominaisuuksia:

• uuden ikkunan avaaminen ohjelman sisällä
• kokoonpanotiedoston luominen ja käyttäminen

nyt kun meillä on työohjelma, sanotaan, että esimerkkitapauksen vuoksi osastosi eri ihmisillä on erilaiset tarpeet ja he kaikki työskentelevät erilaisin valuutoin. Voimme helpottaa heidän elämäänsä lisäämällä asetustiedoston, jotta heidän ei tarvitse käyttää pudotusvalikkoa joka kerta. Käyttämällä asetustiedosto voimme tallentaa niiden ainutlaatuisia asetuksia ja sitten ladata sen, Kun ohjelma käynnistyy.

tässä kohtaa tulee ”Config” – painike. Luodaan uusi ikkuna, jossa käyttäjä voi muokata asetuksiaan. Näin voimme pitää pääikkunan puhtaana ja järjestettynä.

tallenna tämä käyttöliittymäkansioon configdialogina.ui ja kuten aiemmin tässä tutoriaalissa, muuntaa se käyttäen samaa pyuic5-komentoa kuin alla olevassa koodilohkossa:

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

nyt tässä on, miltä päivitetyn koodin pitäisi näyttää alla. Uusien koodilisäysten selitykset ovat tämän Github gist:

• rivi 6: lisäämme asetusikkunan tämän tuontilausekkeen kautta
• rivi 10-11: uudet tuontilauseet, joilla on merkitystä mukavan asetustiedoston työnkulun kannalta. pickle ja os molemmat tulevat oletuksena Python ympäristö ja eivät tarvitse ylimääräisiä asennuksia.
• linja 13-14: Asetustiedoston sijaintia käytetään koko skriptin ajan kaikissa luokissa, joten julistamme sen maailmanlaajuiseksi ja teemme siitä Kaikki-caps, koska se on vakio.
• rivi 17: tässä luokassa on kaikki asetusikkunan kannalta oleelliset tiedot. Jos haluat kutsua objekteja tekemässäsi config UI-tiedostossa, on suositeltavaa, että puhelu soitetaan tässä luokassa, ei MainDialog-luokassa.
• rivi 23: lataamme olemassa olevan asetustiedoston. Teemme tämän, jotta voimme näyttää käyttäjälle, mikä on nykyinen asetus.
• linja 26: Ladatun asetustiedoston avulla asetamme yhdistelmäruudun tekstin nykyiseen asetukseen.
• rivi 33: kun Tallennamme configin, haluamme päivittää itse tallennetun sanakirjan.config ennen config-tiedoston kirjoittamista.
• rivi 39: tämä sulkee config-parametrin ikkunan.
• rivi 48-54: tämä on logiikka, kun asetustiedostoa Ladataan pääikkunassa. Jostain syystä, asetustiedosto voi kadota ja sitten ohjelma ei käynnisty virheiden vuoksi. Jos asetustiedosto puuttuu, luo asetustiedosto oletusparametreineen, jotta käyttäjä voi vielä käynnistää ohjelman ja muokata parametreja myöhemmin.
• rivi 56: lataamme mukautetut asetukset ja asetamme yhdistelmäruudun käyttäjän haluamalle valuutalle.
• linja 62-63: tämä käynnistää config-parametrin ikkunan. Tämä perustuu asetusikkunaluokan nimen nimeen. Tällöin luokan nimi on ConfigParameters.
• linja 65-68: kun käyttäjä on määrittänyt asetuksensa ja ikkuna on suljettu. Ohjelma päivittää itsensä ja lataa asetustiedoston uudelleen ennen kuin päivität viitevaluutan yhdistelmäruudun.

tämän työnkulun avulla käyttäjä voi tallentaa ainutlaatuiset asetuksensa ja ohjelma toimii edelleen, jos asetustiedosto puuttuu. Haluat yrittää ottaa huomioon kaikki ongelmat, joita ohjelmasi kohtaa.

Kuvien lisääminen

nyt on täysin toimiva ohjelma, lisätään viimeistelyt: logo. Vaikka siellä voi olla PyQt resurssitiedosto, johon voit tallentaa kuvia, mieluummin vain ladata kuvia käyttäen tarroja ja pixmaps. Tämä käy nopeasti.

rivi 56-58: lataamme käyttöliittymän kansioon tallentamani logon. Sitten asetan labelLogo-objektin lataamaan pixmap-kartan ja asetan sisällön skaalautumaan labelLogo-objektin kokoon.

Final Thoughts

Hopefully this tutorial gives some clarity on how PyQt5 Designer works. Vietin lukemattomia tunteja googlaamalla näitä asioita ja jopa maksulliset tutoriaalit Udemystä olivat vähän turhia.