Dodajte interakciju korisničkim sučeljima

Možete stvoriti instance unaprijed postavljenih osnovnih komponenti kako biste dodali metode interakcije korisničkim sučeljima, kao što su izvođenje radnji pomoću pokazivača ili tipkovnice, odnosno prevlačenje vidljivog područja zaslona vodoravno ili okomito. Dostupne su u Components > Default Components > Basic.

Osim toga, možete stvoriti instance unaprijed postavljenih UI kontrola kako biste obavijestili korisnike o napretku aplikacije ili prikupili korisničke unose.

Sljedeće osnovne komponente dostupne su za interakciju s korisnikom:

• Područje miša
• Opseg fokusa
• Flickable
• Sažetak osnovnih metoda interakcije

Možete navesti vrijednosti svojstava instanci komponenti u prikazu " Properties ".

Stvaranje područja za miš

Signali i ručatelji koriste se za obradu interakcija mišem. Konkretno, možete koristiti komponentu za praćenje miša ( Mouse Area ) za definiranje JavaScript poziva (također nazvanih ručatelji signala), koji prihvaćaju događaje miša unutar definirane površine.

Jedan brz način za definiranje područja miša jest odabir komponente i zatim odabir Add Mouse Area u kontekstnom izborniku. Time se područje miša veže za područje svog roditelja. Ako je roditelj Rectangle (ili bilo koja komponenta koja nasljeđuje od Item), područje miša ispunjava prostor definiran dimenzijama roditelja.

Također možete definirati područje manje ili veće od roditelja. Nekoliko kontrola, kao što su gumbi, sadrže područje miša.

Unaprijed definirani signali

Područje miša emitira signale kao odgovor na različite događaje miša:

• canceled()
• clicked()
• doubleClicked()
• entered()
• exited()
• positionChanged()
• pressAndHold()
• pressed()
• released()

Omogući područje miša

Mouse Area je nevidljiva komponenta koju obično koristite zajedno s vidljivom komponentom kako biste toj komponenti osigurali rukovanje mišem. Djelujući kao posrednik, logika za rukovanje mišem može biti smještena unutar komponente Mouse Area.

Za stvaranje područja miša:

• Odaberite komponentu u prikazu Navigator ili 2D, a zatim u kontekstnom izborniku odaberite Add Mouse Area.
• Povucite komponentu Mouse Area iz Components:
  1. Idite na Components > Default Components > Basic.
  2. Povucite komponentu Mouse Area na drugu komponentu u prikazu Navigator ili 2D.

U Properties, u odjeljku Mouse Area, Area omogućuje rukovanje mišem za posredovanu komponentu.

Postavite hover

Po zadanom, komponente Mouse Area prijavljuju samo klikove miša, a ne promjene položaja pokazivača miša. Odaberite Hover kako biste osigurali da se koriste odgovarajući rukovatelji i da se vrijednosti ostalih svojstava ažuriraju prema potrebi čak i kada se ne pritišću tipke miša.

Učinite područja miša prozirnima za događaje miša

Iako je Mouse Area nevidljiva komponenta, ona ima svojstvo Visible. Uklonite Visible u odjeljku Visibility kako biste učinili područje miša prozirnim za događaje miša.

Odgovaranje na tipke miša

U odjeljku Mouse Area, u polju Accepted buttons odaberite gumb miša na koji područje miša reagira.

Odaberite AllButtons da bi područje miša reagiralo na sve tipke miša.

Možete dodati podršku za više tipki u prikazu Code, načinu rada Edit ili Binding Editor kombiniranjem vrijednosti operaterom ILI (|). Za više informacija o dostupnim vrijednostima pogledajte MouseArea::acceptedButtons.

Postavite oblik pokazivača

U polju Cursor shape odaberite oblik kursora za ovo područje miša. Na platformama koje ne prikazuju kursor miša, ova vrijednost možda neće imati učinka.

Postavite interval zadržavanja signala

U polju Hold interval navedite vrijednost kojom ćete nadjačati vrijeme koje je prošlo u milisekundama prije nego što se emitira signal pressAndHold(). Ako vrijednost izričito ne postavite ili se ona resetira, primjenjuje se globalno postavljeni stilski nagovještaj aplikacije. Postavite ovu vrijednost ako su vam potrebni posebni intervali za određene primjerke Mouse Area.

Odgovarajte na geste pomicanja

Odaberite Scroll gesture kako biste reagirali na geste skrolanja s uređaja bez miša, kao što je gesta skrolanja s dva prsta na trackpadu. Ako potvrdni okvir nije odabran, signal kotačića se emitira samo kada događaj kotačića dolazi od stvarnog miša s kotačićem, dok će se događaji geste skrolanja proslijediti bilo kojoj drugoj komponenti koja će ih obraditi.

Na primjer, korisnik može izvesti gestu brzeg pomicanja dok je pokazivač iznad komponente koja sadrži instancu Mouse Area, namjeravajući komunicirati s komponentom Flickable koja se nalazi ispod. Postavljanjem ove svojstva na false omogućit će se komponenti PinchArea da obrađuje signal kotačića miša ili gestu stiskanja, dok će komponenta Flickable obrađivati gestu brzeg pomicanja.

Propagiraj događaje

Informacije o položaju miša i klikovima na tipke dostavljaju se putem signala za koje su definirane svojstva rukovatelja događaja. Ako se područje miša preklapa s područjem drugih instanci komponenti Mouse Area, možete propagirati događaje clicked(), doubleClicked() i pressAndHold() na te druge komponente odabirom Propagate events. Svaki se događaj propagira na sljedeću omogućenu komponentu Mouse Area ispod nje u redoslijedu slaganja, propagirajući se niz ovu vizualnu hijerarhiju sve dok Mouse Area ne prihvati događaj.

Spriječi krađu

Možete postaviti instancu Mouse Area unutar komponente koja filtrira dječje događaje miša, kao što je Flickable. Međutim, događaji miša mogu biti ukradeni iz Mouse Area ako roditeljska komponenta prepozna gestu, poput trzaja.

Odaberite Prevent stealing kako biste spriječili krađu događaja miša iz instance Mouse Area. Ova vrijednost neće imati učinka sve do sljedećeg događaja press() ako je postavljena nakon što je komponenta počela krasti događaje.

Za više informacija pogledajte MouseArea.

Postavite svojstva povlačenja

Navedite svojstva za povlačenje komponenti u odjeljku Drag. U polju Target odaberite komponentu koju želite povući. Imajte na umu da zakvačene komponente ne mogu biti povučene.

U polju Axis navedite može li se povlačenje izvoditi vodoravno, okomito ili oboje.

U polju Threshold postavite prag u pikselsima pri kojem operacija povlačenja treba započeti. Po zadanom je ova vrijednost vezana uz vrijednost ovisnu o platformi.

Odaberite Filter children kako biste omogućili da povlačenje nadjača instance Mouse Area a potomaka. To omogućuje instanci Mouse Area a roditelja da obrađuje povlačenja, na primjer, dok instance potomaka obrađuju klikove.

Odaberite Smoothed da biste premjestili ciljanu komponentu tek nakon što je operacija povlačenja započela. Ako ova potvrdna okvir nije odabran, ciljana komponenta se premješta izravno na trenutnu poziciju miša.

Postavite opseg fokusa

Kada se tipka pritisne ili otpusti, generira se događaj tipke i dostavlja usredotočenom komponentu. Ako nijedan komponent nema aktivni fokus, događaj tipke se zanemaruje. Ako komponent s aktivnim fokusom prihvati događaj tipke, propagacija se zaustavlja. U suprotnom se događaj šalje roditelju komponente dok se ne prihvati ili dok se ne stigne do korijenske komponente i događaj se zanemari.

Komponenta ima fokus kada je svojstvo Focus u odjeljku Advanced postavljeno na true. Međutim, za ponovno upotrebljive ili uvozne komponente to nije dovoljno i trebali biste koristiti komponentu Focus Scope.

Za stvaranje instance komponente Focus Scope, idite na Components > Default Components > Basic.

Unutar svakog opsega fokusa jedan objekt može imati omogućen fokus. Ako više od jedne komponente ima omogućen fokus, posljednja komponenta koja ga omogući imat će fokus, a kod ostalih će biti onemogućen, slično kao kada nema opsega fokusa.

Kada fokusni opseg primi aktivni fokus, sadržana komponenta s postavljenim fokusom (ako postoji) također dobiva aktivni fokus. Ako je ta komponenta također fokusni opseg, i fokusni opseg i podfokusirana komponenta imat će aktivni fokus.

Komponenta Focus Scope nije vizualna komponenta i stoga svojstva njezinih podređenih komponenti moraju biti izložena roditeljskoj komponenti opsega fokusa. Rasporedi i pozicionatori koristit će ta vizualna i stilska svojstva za izradu rasporeda.

Za više informacija pogledajte Fokus tipkovnice u Qt Quick u.

Stvorite komponente za brzo pomicanje

Flickable komponenta postavlja svoje podređene komponente na površinu koju korisnici mogu vući i kliziti, čime se prikaz podređenih komponenti pomiče. Ovo ponašanje čini osnovu komponenti koje prikazuju velik broj podređenih komponenti, kao što su List View i Grid View. Za više informacija pogledajte Prikaze popisa i mrežne prikaze.

U tradicionalnim korisničkim sučeljima korisnici mogu pomicati prikaze pomoću standardnih kontrola, kao što su trake za pomicanje i gumbe sa strelicama. Ponekad mogu izravno povući prikaz pritiskom i držanjem tipke miša dok pomiču pokazivač. U sučeljima osjetljivima na dodir ovo povlačenje često je nadopunjeno potezanjem, pri čemu pomicanje nastavlja i nakon što korisnik prestane dodirivati prikaz.

Orezivanje komponentâ s funkcijom prevlačenja

Sadržaj komponente Flickable ne klipi se automatski. Ako se komponenta ne koristi kao komponenta punog zaslona, razmislite o odabiru Clip u odjeljku Visibility.

Omogući listanje

Za izradu komponente za listanje:

1. Idite na Components > Default Components > Basic.
2. Povucite komponentu Flickable u prikaz Navigator ili 2D.
3. U odjeljku Flickable postavite Interactive na true.

   

Postavite Interactive na false kako biste privremeno onemogućili klizanje. Time se omogućuje posebna interakcija s podređenim komponentama. Na primjer, možda ćete htjeti zamrznuti mapu osjetljivu na klizanje dok listate skočni prozor koji je podređen komponenti Flickable.

Postavite smjer klizanja

U odjeljku Flickable postavite Flick direction kako biste odredili mogu li korisnici kliziti prikaz vodoravno ili okomito.

Odaberite AutoFlickDirection za omogućavanje klizanja okomito ako visina sadržaja nije jednaka visini kliznog područja i vodoravno ako širina sadržaja nije jednaka širini kliznog područja.

Odaberite AutoFlickIfNeeded ako je visina ili širina sadržaja veća od visine ili širine elementa za prevlačenje.

Postavite brzinu prevlačenja

U odjeljku Flickable postavite maksimalnu brzinu pomicanja prikaza u pikselima po sekundi u polju Max. velocity.

Postavite brzinu kojom će se zamah usporavati u polju Deceleration.

Postavite kretanje

U odjeljku Flickable postavite vrijednost polja Movement kako biste odredili hoće li područje za prevlačenje učiniti rubove prikaza mekanima, umjesto oštrog fizičkog ruba.

Odaberite StopAtBounds za prilagođene rubne efekte u kojima sadržaj ne prati povlačenja ili klizanja izvan granica kliznog područja.

Odaberite FollowBoundsBehavior kako bi sadržaj pratio povlačenja ili listanje izvan granica elementa za listanje, ovisno o vrijednosti polja Behavior.

U polju Press delay navedite vrijeme u milisekundama za odgodu isporuke događaja pritiska podređenim elementima elementa za prevlačenje. To može biti korisno kada reagirate na pritisak prije nego što nepoželjni učinci akcije prevlačenja stupe na snagu. Ako korisnici povuku ili prevuku element za prevlačenje prije nego što vrijeme odgode istekne, događaj pritiska neće biti isporučen. Ako se gumb otpusti unutar vremena odgode, isporučuju se i događaj pritiska i događaj otpuštanja.

Pixel aligned Postavlja jedinicu poravnanja navedenu u poljima za Content, X i Y na piksele (true) ili podpiksele (false). Postavite je na true za optimizaciju statičkog sadržaja ili pokretnog sadržaja s visokokontrastnim rubovima, kao što su linije širine jednog piksela, tekst ili vektorska grafika. Postavite je na false pri optimizaciji kvalitete animacije.

Ako je Synchronous drag postavljen na true, kada se miš ili dodirna točka pomakne dovoljno daleko da započne povlačenje sadržaja, sadržaj će poskočiti, tako da piksel sadržaja koji je bio ispod pokazivača ili dodirne točke pri pritisku ostane ispod te točke. Zadano je false, što pruža glađe iskustvo (bez skoka) uz gubitak dijela udaljenosti povlačenja na početku.

Postavite geometriju Flickable

U odjeljku Flickable Geometry, polje Content size specificira dimenzije površine kojom upravlja element za klizanje. Obično postavite vrijednosti polja W i H na kombiniranu veličinu komponenti smještenih u elementu za klizanje. Možete postaviti dodatne margina oko sadržaja u poljima Left margin, Right margin, Top margin i Bottom margin.

Polje Origin određuje porijeklo sadržaja. Odnosi se na gornju lijevu poziciju sadržaja bez obzira na smjer rasporeda. Obično se vrijednosti X i Y postavljaju na 0. Međutim, vrijednosti List View i Grid View mogu imati proizvoljno porijeklo zbog varijacije veličine delegata ili umetanja ili uklanjanja komponenti izvan vidljivog područja.

Sažetak osnovnih metoda interakcije

Sljedeća tablica navodi komponente koje možete koristiti za dodavanje osnovnih metoda interakcije u korisničke sučelje, uz poveznice na njihovu razvojnu dokumentaciju. Dostupne su u Components > Default Components > Basic. Kolona podrške za MCU-ove označava koje su komponente podržane na MCU-ovima.