Čine rasporede skalabilnima

Pozicija komponente u korisničkom sučelju može biti apsolutna ili relativna u odnosu na druge komponente. Vizualne komponente postoje na određenoj lokaciji u koordinatnom sustavu zaslona u svakom trenutku. X i y koordinate vizualne komponente relativne su u odnosu na koordinate njezina vizualnog roditelja, pri čemu kut u gornjem lijevom kutu ima koordinatu (0, 0).

Ako dizajnirate statički korisnički sučelje, ručno pozicioniranje pruža najefikasniji oblik pozicioniranja komponenti. Za dinamičko korisničko sučelje upotrijebite sljedeće metode pozicioniranja.

Postavljanje veza

Pomoću veze svojstava možete povezati svojstva komponenti. Tako promjena u jednom može utjecati na drugi. Jednom kada je veza postavljena, vrijednost svojstva automatski se ažurira ako se promijene druga svojstva ili vrijednosti podataka.

Za postavljanje vezanja svojstava na svojstvo komponente:

1. Idite na prikaz Properties i u izborniku pokraj svojstva odaberite (Actions), a zatim Set Binding.

   

2. U prozoru Binding Editor odaberite komponentu i svojstvo iz popisa dostupnih komponenti i njihovih svojstava.

   

Kada je veza postavljena, ikona izbornika Actions mijenja se u . Za uklanjanje veza odaberite Actions > Reset.

Pogledajte odjeljak Dodavanje veza između svojstava kako biste saznali kako postaviti veze pomoću kartice Bindings u prikazu Connections.

Postavite sidrišta i margina

U rasporedu temeljenom na sidrenim točkama svaka komponenta ima skup nevidljivih sidrenih linija: gornja, donja, lijeva, desna, za popunjavanje, vodoravna sredina, okomita sredina i osnovna linija. Koristite sidra za postavljanje komponente uz ili unutar druge komponente tako da jednu ili više sidrenih linija komponente pričvrstite za sidrene linije druge komponente. Ako se komponenta promijeni, komponente koje su joj sidrene automatski će se prilagoditi kako bi se zadržalo sidrenje.

Za postavljanje sidara i margina za komponente:

1. Idite na Properties > Layout > Anchors.
2. Odaberite odgovarajuće gumb za sidrenu točku koju želite za komponentu. Možete kombinirati više sidrenih točaka. Za svaki odabrani gumb možete odabrati ciljanu komponentu te sidrene točke iz odgovarajućeg padajućeg izbornika.
3. Da biste primijenili sidra za popunjavanje na komponentu, odaberite (Fill to Parent).
4. Za vraćanje sidara u spremljeno stanje odaberite (Reset Anchors).

Iz razloga performansi, komponentu možete privezati samo za njezine sestre ili izravnog roditelja. Po zadanome, komponenta se privezuje za svog roditelja kada koristite gumbe za privezu. Da biste privekali komponentu za sestru, odaberite tu sestru kao Target.

Nije podržano proizvoljno sidrenje. Na primjer, nemojte odabrati: anchor.left: parent.right. Odaberite: anchor.left: parent.left. Kada koristite gumbe za sidrenje, sidra na roditeljsku komponentu uvijek se postavljaju na istu stranu. Međutim, sidra na sestrinske komponente postavljaju se na suprotnu stranu: anchor.left: sibling.right. To vam omogućuje da zadržite sestrinske komponente zajedno.

Na sljedećoj slici lijeva je ivica pravokutnika2 prikovana za desnu ivicu sestrinskog elementa na svojoj lijevoj strani, pravokutnika1, dok je njegova gornja ivica prikovana za vrh roditelja.

Sidena su u kodu postavljena na sljedeći način:

Rectangle {
    id: rectangle2
    width: 84
    height: 84
    color: "#967de7"
    anchors.left: rectangle1.right
    anchors.top: parent.top
    anchors.leftMargin: 51
    anchors.topMargin: 56
}

Za definiranje praznog prostora izvan komponente postavite Margin. Margine funkcioniraju za sidra. Nemaju nikakvog učinka pri korištenju rasporeda ili apsolutnog pozicioniranja.

Poravnajte i raspodijelite komponente

Za grupu komponenti odaberite ih kako biste ih poravnali i ravnomjerno rasporedili. Budući da su položaji komponenti fiksni, ove funkcije ne možete primijeniti na zakvačene komponente. Za skalabilnost, zakvačite poravnate i raspoređene komponente kada je vaš dizajn spreman.

Alignment Odaberite gumbe u polju za poravnanje kako biste poravnali gornje/donje ili lijeve/desne rubove grupe komponenti prema onom koji je najudaljeniji od središta grupe. Na primjer, pri poravnavanju ulijevo, komponente se poravnavaju prema najljevijoj komponenti. Također možete poravnati horizontalne/vertikalne središta komponenti ili oboje.

U polju za poravnanje ( Align to ) odaberite hoćete li poravnati komponente u odnosu na odabir, korijensku komponentu ili ključnu komponentu koju odaberete u polju za odabir ključne komponente ( Key object ). Ključna komponenta mora biti dio odabira.

Raspodijelite ili komponente ili razmak između njih. Ako komponente ili razmak ne mogu biti raspodijeljeni na jednake vrijednosti u pikselima bez ostajanja s polupikselima, primit ćete obavijest. Ili dopustite Qt Quick Designeru da raspodijeli komponente ili razmak koristeći najbliže moguće vrijednosti ili prilagodite svoj dizajn tako da su komponente i razmak savršeno raspodijeljeni.

Prilikom raspoređivanja komponenti odaberite gumbe u polju za raspoređivanje ( Distribute objects ) kako biste odredili izračunava li se udaljenost između komponenti od njihovih gornjih/donjih ili lijevih/desnih rubova ili od njihovog horizontalnog/vertikalnog središta.

Distribute spacing Prilikom raspodjele razmaka odaberite gumbe u polju za raspodjelu razmaka kako biste odredili hoće li se razmak ravnomjerno raspodijeliti unutar ciljanog područja ili na određene udaljenosti izračunate od početne točke. Odaberite orijentaciju u kojoj će se komponente ravnomjerno raspodijeliti unutar ciljanog područja: vodoravno duž x-os i okomito duž y-os.

Alternativno, raspodijelite razmak u pikselsima odabirom jednog od gumba za početnu točku: gornja/lijeva ili donja/desna ruba ciljanog područja ili stavke, ili njezina središta. Rub koji ćete koristiti ovisi o tome jesu li stavke raspoređene vodoravno ili okomito:

• Odaberite i kako biste kao početnu točku upotrijebili lijevi rub ciljanog područja ili stavke.
• Odaberite i za korištenje gornje ivice.
• Odaberite i za korištenje desne ivice.
• Odaberite i za korištenje donje rubne linije.

U polju za razmak između komponenti ( Pixel spacing ) postavite razmak u pikselsima. Da biste onemogućili raspodjelu razmaka u pikselsima, odaberite gumb .

Koristite pozicionere

Komponente pozicionera su spremnici koji upravljaju položajima svojih podređenih komponenti. Za mnoge slučajeve upotrebe najbolji pozicioner za korištenje je jednostavna kolona, redak, tok ili mreža. Koristite komponente dostupne u Components > Default Components > Positioner za pozicioniranje podređenih komponenti u tim formacijama na najučinkovitiji mogući način.

Za pozicioniranje više komponenti u Column , Row , Grid ili Flow :

1. Odaberite komponente u prikazu 2D.
2. Desnom tipkom miša kliknite bilo gdje u prikazu 2D i odaberite Positioner > Row, Column, Grid ili Flow Positioner.

Pozicioner stupaca

Column pozicionira svoje podređene komponente u jednom stupcu. Koristi se kao praktičan način za vertikalno pozicioniranje niza komponenti bez upotrebe sidara.

Za sve pozicionere postavite razmak između podređenih komponenti u polju Razmak ( Spacing ).

Osim toga, u odjeljku Padding postavite vertikalno i vodoravno odmak između sadržaja i lijevog, desnog, gornjeg i donjeg ruba komponenti.

Pozicioneri Row i Flow

Row pozicionira svoje podređene komponente u jednom redu. Koristi se kao praktičan način za vodoravno pozicioniranje niza komponenti bez upotrebe sidara.

Flow komponenta pozicionira svoje podređene komponente poput riječi na stranici, omotavajući ih kako bi stvorila redove ili stupce komponenti.

Za pozicionere protoka i retka također postavite smjer protoka na lijevo-desno ili odozgo-dolje u polju za postavljanje smjera ( Flow ). Komponente se postavljaju jedna do druge prema vrijednosti koju ste postavili u polju za postavljanje smjera ( Layout direction ) sve dok se ne prekorači širina ili visina komponente Flow, nakon čega se prebacuju na sljedeći redak ili stupac.

Postavite smjer rasporeda na LeftToRight ili RightToLeft u polju Layout direction. Ako je širina retka izričito postavljena, lijeva sidrenica ostaje lijevo od retka, a desna sidrenica desno od njega.

Pozicioner mreže

Grid stvara mrežu ćelija dovoljno velikih da u sebe smjeste sve svoje podređene komponente i postavlja te komponente u ćelije slijedom lijevo-desno i gore-dolje. Svaka se komponenta postavlja u gornji lijevi kut svoje ćelije s položajem (0, 0).

Qt Quick Dizajner generira mrežu na temelju položaja podređenih komponenti u prikazu 2D. Možete mijenjati broj redaka i stupaca u poljima Rows i Columns.

Osim smjera protoka i rasporeda, možete postaviti vodoravno i okomito poravnanje komponenti mreže. Po zadanom su komponente mreže okomito poravnate na vrhu. Vodoravno poravnanje prati vrijednost polja Layout direction. Na primjer, kada je smjer rasporeda postavljen na LeftToRight, komponente su poravnate ulijevo.

Za ogledavanje rasporeda postavite smjer rasporeda na RightToLeft. Da biste također ogledali vodoravno poravnanje komponenti, odaberite AlignRight u polju Alignment H.

Koristite rasporede

Koristite komponente dostupne u Components > Qt Quick Layouts za raspored komponenti u korisničkim sučeljima.

PropertiesZa razliku od pozicionera, rasporedi upravljaju i položajima i veličinama svojih podređenih komponenti te su stoga vrlo prikladni za dinamičke korisničke sučelje koje se mogu mijenjati veličine. Međutim, nemojte odabrati fiksne položaje i veličine za podređene komponente u odjeljku Geometrija - 2D u rasporedu, osim ako njihove implicitne veličine nisu zadovoljavajuće.

Koristite sidra ili svojstva širine i visine samog rasporeda za odabir njegove veličine u odnosu na roditeljsku komponentu koja nije raspored. Međutim, nemojte sidriti podređene komponente unutar rasporeda.

Za postavljanje komponenti u Grid Layout:

1. Odaberite sve komponente i kliknite desnom tipkom miša na jednu od njih.
2. Iz kontekstualnog izbornika odaberite Layout > Grid Layout.

   

3. Nakon što ih dodijelite u Grid Layout, komponente se raspoređuju u redove i stupce.

   

Da biste prilagodili komponente širini i visini unutar mreže, slijedite ove korake:

1. Odaberite komponentu Rectangle u prikazu 2D i idite na Layout u prikazu Properties.
2. U prozoru Fill layout označite potvrdne okvire za Width i Height.

   

   Napomena: Podesite postavke Row span i Column span kako biste komponentama omogućili zauzimanje više redaka i stupaca unutar Grid Layout.

3. Ponovite prethodne korake za sve komponente Rectangle.
4. Odaberite Grid Layout u prikazu Navigator.
5. Idite na Geometry-2D u prikazu Properties. U Size povećajte Width i Height.
6. Sve komponente Rectangle -a se u skladu s tim mijenjaju.

   

Raspored slaganja

Za slaganje komponenti jedna na drugu možete koristiti Stack Layout.

Za korištenje Stack Layout:

1. Povucite komponentu Stack Layout u prikaz 2D ili Navigator.
2. Povucite komponente koje želite složiti iz prikaza Components u prikaz 2D ili Navigator i postavite ih na vrh komponente Stack Layout.

   Napomena: Komponentemožete dodati i u Stack Layout odabirom gumba pored naziva komponente Stack Layout u prikazu 2D.

3. Za premještanje između komponenti Stack Layout a odaberite komponentu Stack Layout u prikazu 2D. Zatim odaberite gumbe (Previous) i (Next). Time se ažurira Current index Stack Layout a i dovodi komponentu Current index na vrh hrpe.

   Napomena: Alternativno , odaberite komponentu Stack Layout, zatim idite na prikaz Properties > Stack Layout i ažurirajte Current index. Indeks počinje od "0" (nula).

Slijedite primjer u nastavku kako biste razumjeli kako Stack Layout radi:

1. Povucite Stack Layout iz prikaza Component u prikaz Navigator ili 2D.
2. Povucite tri komponente Rectangle na komponentu Stack Layout u prikazu Navigator.

   

3. Odaberite komponentu pravokutnika i idite na prikaz Properties > Rectangle > Fill color te je promijenite u "#ff0000".
4. Za drugi pravokutnik slijedite prethodni postupak i promijenite Fill color u "0000ff".
5. Fill color Za treći pravokutnik slijedite prethodni postupak i promijenite boju u "00ff00".
6. Povucite komponentu Slider iz prikaza Components u prikaz 2D.
7. Odaberite komponentu Slider i idite na prikaz Properties > Slider. Postavite Value na "0", From na "0", To na "2" i Step size na "1".

   

8. Idite na prikaz Navigator i odaberite komponentu Stack Layout.
9. Idite na prikaz Properties > Stack Layout. Odaberite za pristup kontekstnom izborniku, a zatim odaberite Set Binding.

   

10. U prozoru Binding Editor u lijevom padajućem izborniku odaberite Slider, a u desnom padajućem izborniku odaberite Value. Odaberite OK kako biste prihvatili povezivanje.

    

11. Odaberite Live Preview ili Run Project za pokretanje aplikacije.
12. Povucite klizač da promijenite boju u pravokutniku.

    

Organiziraj komponente

Možete koristiti kontrole Frame i Group Box za iscrtavanje okvira oko grupa kontrola.

Sljedeća tablica navodi UI kontrole koje možete koristiti za organizaciju komponenti u korisničkim sučeljima. Za pristup kontrolama idite na Components > Qt Quick Controls.

Ikona	Naziv	Svrha
	Frame	Vizualni okvir oko skupine kontrola.
	Group Box	Naslovljeni vizualni okvir oko skupine kontrola.
	Page	Stilizirana kontrola stranice s podrškom za zaglavlje i podnožje.
	Pane	Pozadina koja odgovara stilu i temi aplikacije.