Umetanje UI kontrola

Unaprijed postavljene kontrole korisničkog sučelja dostupne su u Components > Qt Quick ControlsControls.

Sljedeće vrste kontrola dostupne su za interakciju korisnika:

• Kontrole tipki
• Indikatori
• Odabirači
• Traka s karticama
• Alatna traka
• Sažetak UI kontrola

Možete navesti vrijednosti svojstava instanci komponenti u prikazu Properties. Neka su svojstva zajednička svim komponentama, dok su neka zajednička određenim vrstama kontrola. Neka su svojstva dostupna samo za određenu kontrolu. Sljedeći odjeljci opisuju unaprijed postavljene UI kontrole i njihova svojstva.

Opće svojstva kontrole

Svojstva kontrole možete postaviti u prikazu Properties.

Enable Kutija za potvrdu "Omogući kontrolu" označava je li kontrola omogućena.

Vrijednost polja Focus policy određuje prihvaća li kontrola fokus prebacivanjem pomoću tipke Tab, klikom i korištenjem kotačića miša.

Odaberite Hover i Wheel kako biste omogućili kontrolu da prima događaje miša. Vrijednost hover se prenosi na sve podređene komponente, osim ako nije izričito postavljena za njih.

Spacing korisno je za kontrole koje imaju više ili ponavljajuće gradivne blokove. Na primjer, neki stilovi koriste razmak za određivanje udaljenosti između teksta i pokazivača potvrdnog okvira. Razmak ne nameću kontrole, pa ga svaki stil može tumačiti drugačije, a neki ga u potpunosti mogu ignorirati.

Kontrole gumba

Qt Quick Controls nude izbor kontrola nalik gumbima za specifične slučajeve upotrebe. Sljedeći odjeljci sadrže smjernice za odabir gumba najprikladnijeg za određeni slučaj upotrebe i raspravljaju o vrijednostima koje možete postaviti za svojstva gumba u prikazu Properties.

Preporuke za gumbe koji sadrže tekst:

• Održavajte oznake kratkima i sažetima.
• Koristite zadani font osim ako UI smjernice ne nalažu drugačije.
• Ako je tekst lokaliziran, razmotrite kako duži tekst utječe na raspored.

Za više informacija o postavljanju svojstava teksta pogledajte Svojstva znakova i Padding.

Svojstva koja su zajednička svim upravljačkim kontrolama gumba opisana su u:

• Prikaži tekst i ikone
• Oznake za označavanje
• Signali gumba

Gumb

Možete stvoriti instancu Components > Qt Quick ControlsControls > Button:

Gumb mogu korisnici pritisnuti ili kliknuti. Obično se gumba koriste za izvođenje radnje ili za odgovaranje na pitanje. Na primjer: U redu, Primijeni, Otkaži, Zatvori, Da, Ne i Pomoć.

Tekst gumba trebao bi biti glagol koji opisuje radnju ili imenica koja odgovara naslovu skočnog prozora koji će se otvoriti.

Ne koristite gumb za postavljanje stanja jer je za tu svrhu prikladniji Switch.

Istaknuti gumbi

Odaberite ' Highlight ' u odjeljku ' Button ' kako biste privukli pažnju korisnika na gumb. Isticanje gumba nema utjecaja na interakciju s tipkovnicom.

Sljedeća slika prikazuje primjer istaknutog gumba:

Plosnati gumbi

Ravni gumb obično ne iscrtava pozadinu osim ako nije pritisnut ili odabran. Za izradu ravnog gumba odaberite Flat u odjeljku Button.

Sljedeća slika prikazuje primjer ravnog gumba:

Gumb s odmakom

Kontrola odgađanja ( Delay Button ) uključuje odgodu prije pokretanja radnje. Ova odgoda sprječava slučajno pritiskanje.

Koristite gumbe s odgodom u sučeljima osjetljivim na dodir i za radnje koje se moraju pokretati pažljivo.

Možete postaviti odgodu u milisekundama u polju za odgodu ( Delay ).

Kutija za potvrdu

Možete stvoriti instance od Components > Qt Quick Controls > Controls > Check Box:

Kutija za potvrdu predstavlja gumb opcije koji se može uključiti (označiti) ili isključiti (neoznačiti). Kutije za potvrdu se obično koriste za odabir jedne ili više opcija iz skupa opcija. Za veće skupove opcija, kao što su oni u popisu, razmislite o stvaranju instance kontrole Check Delegate.

Delegat se može istaknuti kako bi se privukla pažnja korisnika. Isticanje nema utjecaja na interakciju s tipkovnicom. Odaberite Highlight u odjeljku Item Delegate kako biste istaknuli delegat.

Koristite potvrdne okvire za izradu popisa opcija s višestrukim odabirom na kojima se može odabrati bilo koji broj opcija, uključujući i nijednu, ali opcije nisu međusobno isključive.

Koristite jedno polje za potvrdu za izbor da/ne, kao što je slučaj kada korisnici moraju prihvatiti uvjete korištenja u dijaloškom okviru. Za pojedinačni izbor da/ne možete koristiti i prekidač. Ako korisnici biraju između opcija, koristite polje za potvrdu. Ako biraju između radnji koje treba poduzeti, preporučuje se prekidač.

Vrijednost atributa ' Checked ' u odjeljku ' Button Content ' određuje stanje potvrdnog okvira. Međutim, osim stanja označeno i neoznačeno, potvrdni okvir ima i treće stanje: djelomično označeno.

Odaberite Tri-state u odjeljku Check Box kako biste omogućili da se potvrdni okvir prebacuje između stanja označeno, djelomično označeno i neoznačeno kada ga korisnici prebacuju dodirom, mišem ili tipkovnicom.

Kada se opcije mogu grupirati, možete koristiti polu-označenu potvrdnu kućicu za predstavljanje cijele grupe. Odaberite PartiallyChecked u polju Check state kako biste naznačili da su korisnici odabrali neke podkomponente u grupi, ali ne sve.

Opcije koje se mogu označiti često su navedene okomito.

Oznaka potvrdnog okvira trebala bi biti izjava koju potvrdni znak čini istinitom, a izostanak potvrdnog znaka lažnom. Stoga oznaka potvrdnog okvira ne bi smjela sadržavati negativnu izjavu.

Radio gumb

Radio Button je gumb za odabir koji se može uključiti (označiti) ili isključiti (neoznačiti). Radio gumbi se obično koriste za odabir jedne opcije iz skupa opcija. Odabir opcije automatski poništava prethodni odabir.

Ako postoje samo dvije međusobno isključive opcije, objedinite ih u jedno polje za potvrdu ili prekidač.

Radio Delegate sličan je radio gumbu, osim što se obično koristi u prikazima.

Odaberite Highlight u odjeljku Radio Delegate kako biste istaknuli delegata.

Preporuke za radio gumbe:

• Ograničite tekst oznake na jedan redak.
• Osigurajte da je označena razumna zadana opcija.
• Popis opcija radio gumba poredajte vertikalno.
• Držite popis kratkim.
• Kako biste izbjegli zabunu, ne stavljajte dvije skupine radio gumbića jedna pored druge.

Prebaciti

Možete stvoriti instancu Components > Qt Quick ControlsControls > Switch:

Prekidač je gumb opcije koji se može povući ili prebaciti u uključeno (označeno) ili isključeno (neoznačeno) stanje. Prekidači se obično koriste za odabir između dva stanja: uključeno ili isključeno. Za veće skupove opcija, poput onih u popisu, razmislite o korištenju Switch Delegate umjesto toga.

Odaberite Highlight u odjeljku Item Delegate kako biste istaknuli delegat.

Koristite prekidač za binarne operacije koje stupaju na snagu odmah nakon što se prekidač prebaci. Na primjer, koristite prekidač za uključivanje ili isključivanje Wi-Fi-ja.

Okruglo gumb

Round Button je klikabilna kontrola koja pokreće radnju ili otvara ili zatvara skočni prozor. Okruglo gumb s kvadratnom ikonom slike ili ikonom fonta s jednim slovom je kružno. Kružno gumb zauzima manje prostora od običnog gumba i može se koristiti i kao plutajući akcijski gumb.

Osim uobičajenih svojstava gumba, okrugli gumb ima svojstvo ' Radius ', koje sadrži radijus gumba.

Za izradu relativno kvadratnog gumba s blago zaobljenim kutovima upotrijebite malu vrijednost, poput 3.

Za izradu potpuno kružnog gumba upotrijebite vrijednost koja je jednaka polovici širine ili visine gumba te postavite širinu i visinu gumba na istu vrijednost.

Prikaži tekst i ikone

Gumb može sadržavati tekst, ikonu ili oboje. Odredite tekst gumba u polju Text u odjeljku Button Content. Vrijednost polja Display određuje hoće li se prikazivati samo tekst ili ikona, a kada su oboje vidljivi, hoće li se tekst postaviti pokraj ikone ili ispod nje.

Gumbi s potvrdnim okvirom

Označivo gumbom se prebacuje između označenog (uključeno) i neoznačenog (isključeno) stanja kada ga korisnici odaberu ili pritisnu tipku razmaka dok gumb ima aktivni fokus. Odaberite Checkable da biste gumb učinili označivim. Da biste gumb označili, odaberite Checked.

Gumbi koji pripadaju istoj roditeljskoj komponenti mogu biti međusobno isključivi. Korisnici mogu odabrati gumb da bi ga označili, a prethodni odabir se briše. Korisnici ne mogu poništiti označavanje trenutno označenog gumba klikom na njega. Umjesto toga, moraju odabrati drugi gumb u grupi kako bi postavili novi označeni gumb za tu grupu.

Radio gumbi i gumbi kartica prema zadanim postavkama su međusobno isključivi. Da biste ostale vrste gumba učinili međusobno isključivima, odaberite Exclusive.

Ako gumbe ne pripadaju istom nadređenom elementu, označavanje i poništavanje označavanja gumbova ne utječe na ostale gumbe u grupi.

Signali gumba

Gumb emitira signal ' clicked() ' kada ga korisnici aktiviraju. Povežite se na ovaj signal kako biste izvršili radnju gumba. Gumbi pružaju sljedeće dodatne signale: ' canceled()', ' doubleClicked()', ' pressed()', ' released()' i ' pressAndHold() ' za dugotrajno pritiskanje.

Odaberite Auto-repeat kako biste ponovili signale pressed(), released() i clicked() dok je gumb pritisnut i držan. Signal pressAndHold() neće biti emitiran.

Pokazatelji

Qt Quick Controls nude izbor kontrola nalik indikatorima, kao što su indikator zauzetosti, indikator stranice i traka napretka, za određene slučajeve upotrebe. Sljedeći odjeljci sadrže smjernice za odabir indikatora najprikladnijeg za određeni slučaj upotrebe.

Indikator zauzetosti

Busy Indicator pokazuje da je operacija u tijeku i da korisnički sučelje mora pričekati da se operacija dovrši.

Pokazatelj zauzetosti sličan je neodređenoj traci napretka. Oba se mogu koristiti za označavanje pozadinske aktivnosti. Glavna je razlika vizualna, a traka napretka može prikazati i konkretnu količinu napretka (kada se ona može odrediti). Zbog vizualne razlike pokazatelji zauzetosti i neodređene trake napretka koriste se na različitim mjestima u korisničkim sučeljima.

Odaberite Running kako biste prikazali indikator zauzetosti.

Odaberite Live za prikaz ažuriranja napretka u stvarnom vremenu.

Uobičajena mjesta za pokazatelj zauzetosti su:

• U kutu Tool Bar a.
• Kao nadogradnja iznad Page a.
• Na strani Item Delegate a.

Pokazatelj stranice

Page Indicator koristi se za označavanje trenutno aktivne stranice u spremniku s više stranica. Navedite broj stranica u polju Count. Odaberite trenutnu stranicu u polju Current.

Odaberite Interactive kako biste omogućili da indikator stranice reagira na pritiske i automatski promijeni vrijednost polja Current u skladu s tim.

Swipe ViewIndikatori stranica obično su prilično mali kako bi se izbjeglo ometanje korisnika od stvarnog sadržaja korisničkog sučelja. Stoga ih je teško kliknuti i korisnici ih možda neće lako prepoznati kao interaktivne. Iz tih razloga najbolje ih je koristiti kao dopunu primarnim metodama navigacije, poput navigacijske trake, a ne kao njihovu zamjenu.

Traka napretka

Progress Bar pokazuje napredak operacije. Možete navesti početnu vrijednost u polju Value, ali je treba redovito ažurirati. Navedite raspon u poljima From i To, koja mogu sadržavati bilo koju vrijednost.

Odaberite Indeterminate kada nije moguće odrediti veličinu preuzimane stavke ili ako bi napredak preuzimanja mogao biti prekinut zbog mrežnog kvara.

Neodređeni način rada sličan je indikatoru zauzetosti po tome što se oba mogu koristiti za označavanje pozadinske aktivnosti. Zbog vizualnih razlika, indikatori neodređenog napretka i indikatori zauzetosti smješteni su na različitim mjestima u korisničkim sučeljima.

Tipična mjesta za neizvjesnu traku napretka su:

• Na dnu prozora za učitavanje ( Tool Bar).
• PageUnutar sadržaja prozora za preuzimanje.
• U Item Delegate u za prikaz napretka određenog stavka.

Odabirači

Qt Quick Controls nude skup kontrola nalik selektorima, kao što su klizači, brojčanik, polje za okretanje, kombinirano polje i tumbler, za specifične slučajeve upotrebe. Sljedeći odjeljci sadrže smjernice za odabir selektora najprikladnijeg za određeni slučaj upotrebe.

Klizač i kotačić

Možete stvoriti instancu Components > Qt Quick ControlsControls > Slider:

Klizač se koristi za odabir vrijednosti klizanjem ručke duž staze, dok se Range Slider koristi za odabir raspona definiranog dvjema vrijednostima klizanjem svake ručke duž staze.

Dial sličan je tradicionalnoj kotačnici koja se nalazi na uređajima poput stereo uređaja ili industrijske opreme. Omogućuje korisnicima da navedu vrijednost unutar raspona.

Components Možete stvoriti instancu klizača > Qt Quick Controls > Controls > Dial:

U poljima From i To postavite raspon klizača ili kotačića. Postavite vrijednost ručke klizača ili kotačića u polju Value. Za klizač raspona postavite početne položaje prve i druge ručke u poljima Value 1 i Value 2. Odaberite Live kako biste omogućili ažuriranja vrijednosti u stvarnom vremenu.

U polju Snap mode postavite kako se klizač ili kotačić ponašaju u odnosu na vrijednost polja Step size. Po zadanom se ne prilagođavaju koraku, ali možete ih postaviti da se prilagode tijekom povlačenja ili nakon otpuštanja.

U polju Orientation možete postaviti orijentaciju klizača na vodoravnu ili okomitu.

Prilagodite polje Drag threshold kako biste odredili prag pri kojem će se pokrenuti događaj povlačenja dodirom.

Za više informacija pogledajte sljedeći video:

Okretač podržava kružne, vodoravne i okomite načine unosa. Za aplikacije u kojima je brz unos važan, koristan je kružni način unosa, jer klikom na okretač on se pomiče izravno na tu poziciju. Za aplikacije u kojima je važan precizan unos preporučuju se vodoravni i okomiti načini unosa jer omogućuju sitna podešavanja u odnosu na mjesto na kojem se kotačić klikne. Ti su načini također bolji za kotačiće kod kojih bi veliki skokovi u vrijednostima mogli biti nesigurni, poput kotačića za kontrolu glasnoće zvuka. Postavite način unosa u polju " Input mode ".

Okretni okvir

Možete stvoriti instancu Components > Qt Quick Controls > Controls > Spin Box:

Polje za pomicanje omogućuje korisnicima odabir cjelobrojne vrijednosti klikom na gornje ili donje indikatorsko gumb ili pritiskom tipki gore/dolje na tipkovnici. Odaberite Editable kako biste korisnicima omogućili unos tekstualne vrijednosti u polje za unos.

DialOstala svojstva okretača slična su svojstvima polja za unos teksta.

Kombinirani popis

Combo Box je kombinirano gumbom i skočnom popisom. Pruža način za prikazivanje popisa opcija korisnicima na način koji zauzima najmanje prostora na zaslonu.

Kombinirani izbornik služi za odabir vrijednosti iz statične padajuće liste s više redaka. Korisnici ne mogu dodavati nove vrijednosti i može biti odabrana samo jedna opcija.

Vrijednosti kombiniranog okvira osigurava model podataka. Model podataka je obično JavaScript niz, ListModel ili cijeli broj, ali podržani su i drugi tipovi modela podataka.

Odaberite Editable za automatsko dovršavanje teksta kombinirane liste na temelju onoga što je dostupno u modelu.

Kada koristite modele koji imaju više imenovanih uloga, navedite ulogu svojstva Display text u polju Text role. Da biste koristili ulogu stavke modela koja odgovara ulogi teksta, unesite valueRole u polje.

Polje Current index sadrži indeks stavke koja se prikazuje u padajućoj listi. Zadana vrijednost je -1 kada je padajuća lista prazna i 0 u suprotnom.

Ravna padajuća lista ne iscrtava pozadinu osim ako se s njom ne interagira, što je čini neprimjetnom u korisničkom sučelju. Koristite ravne padajuće liste na alatnoj traci, na primjer, kako bi se uklopile u ravni izgled gumba alata. Da biste stvorili ravnu padajuću listu, odaberite Flat.

Preporuke za kombinirane okvire:

• Ako je broj vrijednosti vrlo velik, razmislite o primjeni filtra.
• Ako je broj vrijednosti mali, razmislite o korištenju radio gumba, kako bi korisnici mogli vidjeti sve opcije odjednom.
• Postavite zadano vrijednost, koja bi trebala biti ona vrijednost za koju očekujete da će biti najčešće odabrana.

Tumbler

Tumbler omogućuje korisnicima odabir opcije s rotirajućeg kotačića stavki. Koristan je kada postoji previše opcija za korištenje, na primjer, radio gumba, i premalo opcija da bi se zahtijevala upotreba uređivog okretačkog polja. Praktičan je jer ne zahtijeva upotrebu tipkovnice i omogućuje omotavanje na oba kraja kada postoji velik broj stavki.

Odredite broj vidljivih opcija u polju Visible count. Odaberite indeks trenutne opcije u polju Current index.

Da biste omogućili omotavanje, odaberite Wrap.

Traka kartica

Tab Bar pruža model navigacije temeljen na karticama, gdje korisnici mogu prebacivati između različitih prikaza ili podzadaća. Traka kartica se obično koristi kao zaglavlje ili podnožje ApplicationWindow a. Odaberite položaj alatne trake u polju Position.

Obično traka kartica sadrži statički skup kontrola Tab Button koje su definirane kao njezine podređene stavke. Polje Current index u odjeljku Container prikazuje indeks trenutnog gumba kartice. Zadana vrijednost je -1 kada je traka kartica prazna i 0 inače.

Možete navesti širinu sadržaja (W) i visinu (H) u polju Content size.

Ako ukupna širina gumbova premaši raspoloživu širinu trake kartica, ona se automatski pretvara u kliznu.

Alatna traka

Tool Bar sadrži akcije i kontrole dostupne za cijelu aplikaciju i osjetljive na kontekst, poput navigacijskih gumba i polja za pretraživanje. Traka alata se obično koristi kao zaglavlje ili podnožje ApplicationWindow a. Odaberite položaj trake alata u polju Position.

Tool Button gotovo je identičan gumbu, ali ima grafički izgled koji ga čini prikladnijim za umetanje u alatnu traku.

Alatna traka ne pruža vlastiti izgled, već zahtijeva da pozicionirate njezin sadržaj, na primjer izradom rasporeda ( RowLayout). Ako alatna traka sadrži samo jednu stavku, prilagodit će se veličini te stavke. To čini alatnu traku posebno prikladnom za upotrebu zajedno s rasporedima. Međutim, širinu sadržaja (W) i visinu (H) možete navesti u polju Content size u odjeljku Pane.

Tool Separator služi za vizualno razlikovanje skupina stavki na alatnoj traci njihovim razdvajanjem linijom. Može se koristiti u vodoravnim ili okomitim alatnim trakama postavljanjem vrijednosti polja Orientation.

Stiliziranje kontrola

Unaprijed postavljene kontrole korisničkog sučelja mogu se stilizirati. Prikaz 2D čita željeni stil iz konfiguracijske datoteke (qtquickcontrols2.conf). Za promjenu stila odaberite drugi stil s popisa na glavnoj alatnoj traci. To vam omogućuje da provjerite kako vaše korisničko sučelje izgleda pri korištenju dostupnih stilova.

Za primjer definiranja vlastitog stila i njegove upotrebe u načinu dizajna pogledajte Qt Quick Controls - Flat Style.

Za više informacija o tome kako prilagoditi određenu kontrolu, pogledajte Referencu za prilagodbu.

Sažetak UI kontrola

Sljedeća tablica navodi unaprijed definirane UI kontrole s poveznicama na njihovu razvojnu dokumentaciju. Dostupne su u Components > Qt Quick Controls. Kolona podrške za MCU-ove označava koje su kontrole podržane na MCU-ovima.