Izradite skalabilne gumbe i okvire

Možete koristiti komponentu BorderImage za prikaz slike, kao što je PNG datoteka, kao okvir i pozadinu.

Koristite dvije slike za rub i odgovarajuću grafiku kako biste promijenili izgled gumba kada se klikne. Možete koristiti stanja (use states) za određivanje koje je slika vidljiva ovisno o tome je li tipka miša pritisnuta. Mogli biste dodati više slika i stanja kako biste promijenili izgled gumba ovisno o drugim događajima miša, kao što je prelet (hover).

Koristite komponentu Text za dodavanje teksta gumba. Stanja možete koristiti i za promjenu boje teksta gumba i veličine fonta. Na primjer, možete povećati ili smanjiti tekst gumba.

Dodajte komponentu Mouse Area koja pokriva cijelo područje i reagira na događaje miša.

Stvorite komponentu gumba

Za stvaranje komponente gumba odaberite File > New File > Qt Quick Files > Qt Quick UI File >

Choose da biste stvorili UI datoteku naziva Button.ui.qml (na primjer).

Konstruirajte komponentu gumba

Za izradu komponente gumba:

1. Odaberite Design za uređivanje UI datoteke u prikazu 2D.
2. Odaberite Assets > kako biste kopirali datoteke slika koje želite koristiti u mapu projekta.
3. U Navigator u odaberite korijensku komponentu i postavite širinu (W) i visinu (H) gumba u prikazu Properties kako bi odgovarale veličini slika koje planirate koristiti. Time se određuje početna veličina komponente gumba.
4. Povucite dva Border Image komponente iz Components > Default Components > Basic na korijensku komponentu u Navigator.
5. Povucite komponentu Text na korijensku komponentu.
6. U Navigator odaberite korijensku komponentu, a zatim u kontekstnom izborniku odaberite Add Mouse Area kako biste dodali područje za miš.
7. Odaberite sliku okvira kako biste uredili vrijednosti njenih svojstava:
   1. U polju Id unesite ID za sliku okvira. U ovom primjeru koristimo ID inactiveButton.
   2. U polju Source odaberite datoteku slike za obrubnu sliku. Na primjer, inactive_button.png.
   3. Na kartici Layout odaberite gumb (Fill to Parent) kako biste uvijek prilagodili sliku veličini njezina roditelja. Time komponentu gumba čine skalabilnom jer je veličina slike vezana uz veličinu komponente.
8. Odaberite drugu sliku okvira kako biste slično uredili vrijednosti njezinih svojstava:
   1. U polju Id unesite activeButton.
   2. U polju Source odaberite datoteku slike za gumb kada se klikne. Na primjer, active_button.png.
   3. Na kartici Layout odaberite gumb (Fill to Parent).
9. Odaberite komponentu teksta kako biste u Properties-u odredili veličinu i boju fonta:
   1. U polju Color upotrijebite odabirač boja za odabir boje fonta ili unesite vrijednost u polje.
   2. U grupi Font, u polju Size unesite veličinu fonta.
   3. Na kartici Layout odaberite gumbe (Vertical Center) i (Horizontal Center) kako biste naslijedili vertikalno i vodoravno centriranje od roditelja. To osigurava da je oznaka gumba centrirana kada se komponenta mijenja veličine.

Koristite stanja za promjenu vrijednosti svojstava komponente

1. U prikazu States dvaput odaberite kako biste stvorili dva nova stanja.

   

2. Odaberite State1.
3. Promijenite naziv stanja u active.
4. Odaberite , a zatim odaberite Set when Condition kako biste odredili kada se stanje treba primijeniti.
5. U Binding Editor odaberite komponentu mouseArea i signal pressed kako biste naveli da se stanje primjenjuje kada je tipka miša pritisnuta.

   

6. Odaberite komponentu teksta u Navigator kako biste specificirali da se veličina teksta povećava kada je gumb pritisnut.
7. U Properties odaberite odjeljak Advanced i povećajte vrijednost svojstva Scale.
8. Odaberite inactiveButton u Navigator kako biste ga sakrili u aktivnom stanju promjenom vrijednosti njegove svojstva Visibility u Properties.
9. Odaberite State2.
10. Promijenite naziv stanja u inactive.
11. Postavite uvjet za stanje na !mouseArea.pressed kako biste naveli da se stanje primjenjuje kada tipka miša nije pritisnuta.

    

12. Odaberite Ctrl+S za spremanje gumba.
13. Odaberite gumb Live Preview na gornjoj alatnoj traci kako biste vidjeli kako se gumb ponaša kada ga odaberete. Povucite rubove prozora za pretpregled kako biste vidjeli što se događa kada promijenite veličinu komponente.

Da bi komponenta gumba bila korisna, mora biti stvorena u projektu. Kada radite na drugim datotekama u projektu za izradu zaslona ili drugih komponenti za korisničko sučelje, komponenta gumba pojavljuje se u Components > My Components. Možete je povući u prikaz 2D ili Navigator kako biste stvorili instance gumba i izmijenili vrijednosti njihovih svojstava, primjerice da biste im dodijelili korisne ID-ove, promijenili njihov izgled i postavili tekst gumba za svaku instancu.

Za više informacija o pozicioniranju gumba na zaslonima pogledajte odjeljak " Make layouts scalable".