Dizajnirajte 2D korisničke sučelje

Za dizajniranje aplikacija u prikazu 2D, otvorite datoteke komponenti i postavite instance 2D komponenti i resursa u njih.

Kada odaberete instance komponenti u prikazu 2D, oko njihovih rubova i u kutovima pojavljuju se markeri. Ovisno o obliku pokazivača, možete primijeniti sljedeće radnje povlačenjem instanci komponenti:

• Pomak
• Promijeni veličinu
• Rotirati

Pomicanje komponenti

Kada se prikaže pokazivač za premještanje, možete premjestiti odabranu instancu komponente na bilo koju poziciju u prikazu 2D.

Za više informacija o alternativnim načinima pozicioniranja instanci komponenti u korisničkim sučeljima pogledajte odjeljak " Make layouts scalable".

Promijeni veličinu komponenti

Kada se prikaže pokazivač za promjenu veličine, možete povući oznake za promjenu veličine instanci komponenti.

Da biste promjenu veličine izvršili iz središta odabrane instance komponente, a ne s njezinih rubova, pritisnite Alt (ili Opt na macOS-u).

Da biste sačuvali omjer stranica slike tijekom promjene veličine koristeći oznake na kutovima, pritisnite tipku Shift. Ovo također radi na instancama komponenti koje su privezane lijevim, desnim, gornjim ili donjim sidrima.

Za promjenu veličine središnjim dijelom instance komponente i istovremeno očuvanje omjera stranica, pritisnite Alt+Shift (ili Opt+Shift na macOS-u).

Za više informacija o alternativnim načinima određivanja veličine komponente ili instance komponente u korisničkom sučelju pogledajte odjeljak Postavljanje 2D geometrije.

Rotacija komponenti

Kada se pokazivač za rotaciju prikaže u jednom od kutova instance komponente, možete povlačiti u smjeru kazaljke na satu ili suprotno od smjera kazaljke na satu kako biste slobodno rotirali instancu komponente oko njezine početne točke.

Dodatno, pritisnite tipku Shift ili Alt (ili Opt na macOS-u) kako biste rotirali instance komponenti u koracima od 5, odnosno 45 stupnjeva.

Možete postaviti početnu točku u izborniku Properties > Geometry - 2D > Origin. Tamo također možete unijeti vrijednost svojstva Rotation u stupnjevima.

Zumiranje i odzumiranje

Možete koristiti gumbe zumiranja na alatnoj traci za zumiranje u prikaz 2D a ili odabrati razinu zumiranja kao postotak s popisa. Dostupni su i drugi gumbi za zumiranje kako bi se sav sadržaj prilagodio prikazu ili za zumiranje kako bi se prilagodile trenutačno odabrane instance komponenti.

Priljubljivanje uz roditeljske i sestrinske komponente

Možete koristiti prianjanje za poravnavanje instanci komponenti u prikazu 2D. Kada je prianjanje uključeno, sve instance komponenti prianjaju uz svoju nadređenu komponentu i sestre. Ako koristite prianjanje s sidrenim točkama, sidreni točke se stvaraju kada prikačite komponentu na drugu.

Za uključivanje prianjanja desnom tipkom miša kliknite u prikazu 2D i odaberite Snapping > Snap with Anchors ili Snap without Anchors.

Linije za prianjanje automatski se pojavljuju kako bi vam pomogle pri pozicioniranju instanci komponenti.

Odaberite Edit > Preferences > Qt Quick > Qt Quick Designer da biste specificirali postavke za prianjanje. U polju Parent component padding navedite udaljenost u pikselsima između roditelja i linija prianjanja. U polju Sibling component spacing navedite udaljenost u pikselskim jedinicama između braće i sestara i linija prianjanja.

Sljedeća slika prikazuje linije prianjanja (1) kada je Parent component padding postavljen na 8 piksela.

Za alternativne načine poravnavanja i raspoređivanja instanci komponenti pomoću prikaza Properties pogledajte Poravnajte i raspodijelite komponente.

Sakrij granice komponenti

Prikaz 2D prikazuje granice instanci komponenti. Da biste ih sakrili, kliknite desnom tipkom miša u prikazu 2D i iz kontekstualnog izbornika odaberite Show Bounds.

Pregled veličine komponente

Širina i visina korijenske komponente u UI datoteci određuju veličinu komponente. Možete ponovno koristiti komponente, kao što su gumbe, u različitim veličinama u drugim UI datotekama i dizajnirati korisničke sučelje za upotrebu s različitim profilima uređaja, rezolucijom zaslona ili orijentacijom zaslona. Veličina komponente također može biti nula (0,0) ako se njezina konačna veličina određuje vezama svojstava.

Kako biste eksperimentirali s različitim veličinama komponenti, unesite vrijednosti u polja Override Width i Override Height (1) na alatnoj traci. Promjene se prikazuju u prikazu 2D (2) i u prikazu States (3), ali vrijednosti svojstava se ne mijenjaju trajno u UI datoteci. Vrijednosti svojstava možete trajno promijeniti u prikazu Properties (4).

Za postavljanje početne veličine korijenske komponente odaberite Edit > Preferences > Qt Quick > Qt Quick Designer i navedite širinu i visinu komponente u grupi Root Component Init Size.

Odredite veličinu platna

Za promjenu veličine platna odaberite Edit > Preferences > Qt Quick > Qt Quick Designer i navedite širinu i visinu platna u grupi Canvas.

Postavite boju platna

Ako postavite pozadinu korijenske komponente prozirnom, boja radnog područja može otežati pregledavanje instance komponente na kojoj radite. Kako biste instance komponenti učinili vidljivijima, možete odabrati boju platna na popisu . Po zadanom je boja prozirna. Postavljanje boje platna ni na koji način ne utječe na boju pozadine vaše korijenske komponente ili instance komponenti.

Osvježite sadržaj 2D prikaza

Kada otvorite UI datoteku, komponenta definirana u datoteci i instance komponenti koje ona sadrži iscrtavaju se u prikazu 2D. Kada uređujete svojstva instance komponente u Properties, kod i njegova reprezentacija u 2D prikazu mogu se razići. Na primjer, kada promijenite položaj instance komponente unutar stupca ili retka, novi položaj možda neće biti ispravno prikazan u 2D prikazu.

Da biste osvježili sadržaj prikaza 2D, pritisnite tipku R ili gumb (Reset View).