Ustvarjanje odzivnih postavitev v aplikacijah s platnom
Preden ustvarite aplikacijo s platnom v storitvi Power Apps, določite, ali želite aplikacijo prilagoditi za telefon ali tablični računalnik. Ta izbira določa velikost in obliko delovnega območja, v katerem ustvarite aplikacijo.
Ko se odločite, lahko izbirate še naprej, če greste v Nastavitve > Prikaz. Izberete lahko pokončno ali ležečo usmeritev in velikost zaslona (samo tablični računalnik). Prav tako lahko odklenete ali zaklenete razmerje višina/širina in podprete vrtenje naprave (ali ne).
Te izbire so osnova za vse druge izbire, ki jih izvedete, ko oblikujete postavitve zaslonov. Če se vaša aplikacija izvaja na napravi drugačne velikosti ali v spletu, se celotna postavitev prilagodi zaslonu, na katerem se aplikacija izvaja. Če se na primer aplikacija, zasnovana za telefon, izvaja na večjem oknu brskalnika, se aplikacija prilagodi, da to izravna, in je videti prevelika za prostor. Aplikacija ne more izkoristiti dodatnih slikovnih pik, tako da bi prikazala več kontrolnikov ali več vsebine.
Če ustvarite odzivno postavite, se lahko kontrolniki odzovejo na različne naprave ali velikosti okna, da različne izkušnje postanejo naravnejše. Za doseganje odzivne postavitve prilagodite nekatere nastavitve in napišete izraze po aplikaciji.
Onemogočanje nastavitve »Prilagodi na«
Vsak zaslon lahko konfigurirate, tako da se njegova postavitev prilagodi dejanskemu prostoru, v katerem se aplikacija izvaja.
Odzivnost aktivirate tako, da za aplikacijo izklopite nastavitev Prilagodi na, ki je privzeto vklopljena. Ko izklopite to nastavitev, izklopite tudi Zakleni razmerje višina/širina, ker več ne oblikujete za določeno obliko zaslona. (Še vedno lahko določite, ali vaša aplikacija podpira vrtenje naprave.)
Da bi bila aplikacija odzivna, morate izvesti dodatne korake, toda ta sprememba je prvi korak k omogočanju odzivnosti.
Razumevanje dimenzij aplikacije in zaslona
Da bi se postavitve aplikacije odzivale na spremembe v dimenzijah zaslona, boste napisali formule, ki uporabljajo lastnosti Width in Height zaslona. Za prikaz teh lastnosti, odprite aplikacijo v storitvi Power Apps Studio, nato pa izberite zaslon. Privzete formule za te lastnosti so prikazane na zavihku Napredno podokna na desni strani.
Širina = Max(App.Width, App.DesignWidth)
Višina = Max(App.Height, App.DesignHeight)
Te formule se nanašajo na lastnosti Width, Height, DesignWidth in DesignHeight aplikacije. Lastnosti Width in Height aplikacije ustrezajo dimenzijam naprave ali okna brskalnika, v katerem se aplikacija izvaja. Če uporabnik spremeni velikost okna brskalnika (ali zavrti napravo, če ste izklopili Zaklep usmeritve), se vrednosti teh lastnosti dinamično spremenijo. Formule na lastnostih Width in Height zaslona so ponovno ovrednotene, ko se ti vrednosti spremenita.
Lastnosti DesignWidth in DesignHeight izvirata iz dimenzij, ki ste jih določili v podoknu Prikaz razdelka Nastavitve. Če na primer izberete postavitev telefona v pokončni usmeritvi, je DesignWidth 640 in DesignHeight 1136.
Ker se uporabljata v formulah za lastnosti Width in Height, lahko na lastnosti DesignWidth in DesignHeight gledate kot na minimalni dimenziji, za kateri boste oblikovali aplikacijo. Če je dejansko območje, na voljo za aplikacijo, celo manjše od teh minimalnih dimenzij, formuli za lastnosti Width in Height zaslona zagotavljata, da njuni vrednosti ne bosta postali manjši od minimalnih. V tem primer se mora uporabnik pomikati, da si lahko ogleda vso vsebino zaslona.
Ko določite DesignWidth in DesignHeight svoje aplikacije, vam ne bo treba (v večini primerov) spreminjati privzetih formul za lastnosti Width in Height vsakega zaslona. Pozneje bomo v tej temi obravnavali primere, v katerih bi morda želeli prilagoditi te formule.
Uporaba formul za dinamično postavitev
Da ustvarite odzivno zasnovo, poiščite in spremenite velikost vsakega kontrolnika z uporabo formul namesto absolutnih (konstantnih) koordinatnih vrednosti. Te formule izražajo položaj in velikost vsakega kontrolnika v smislu celotne velikosti zaslona ali glede na druge kontrolnike na zaslonu.
Pomembno
Potem ko zapišete formule lastnosti X, Y, Width in Height kontrolnika, bodo vaše formule prepisane s konstantnimi vrednostmi, če pozneje povlečete kontrolnik v urejevalnik delovnega območja. Ko začnete uporabljati formule za doseganje dinamične postavitve, se morate izogibati vlečenju kontrolnikov.
V najpreprostejšem primeru en kontrolnik zapolni cel zaslon. Za doseganje tega učinka nastavite lastnosti kontrolnika na te vrednosti:
| Lastnost | Vrednost |
|---|---|
| X | 0 |
| Y | 0 |
| Širina | Parent.Width |
| Višina | Parent.Height |
Te formule uporabljajo operator Nadrejeni. Za kontrolnik, umeščen neposredno na zaslon, se možnost Nadrejeni sklicuje na zaslon. S temi vrednostmi lastnosti je kontrolnik prikazan v zgornjem levem kotu zaslona (0, 0) ter ima isti lastnosti Width in Height kot zaslon.
Pozneje v tej temi bomo uporabili ta načela (in operator Nadrejeni) za umestitev kontrolnikov znotraj drugih vsebnikov, kot so galerije, kontrolniki skupine in komponente.
Alternativa je, da kontrolnik zapolni samo zgornjo polovico zaslona. Za ustvarjanje tega učinka nastavite lastnost Height na Parent.Height +/2 in pustite druge formule nespremenjene.
Če želite, da drugi kontrolnik zapolnjuje spodnjo polovico istega zaslona, lahko uporabite vsaj dva druga pristopa k sestavljanju njegovih formul. Zaradi preprostosti lahko uporabite ta pristop:
| Ctrl | Lastnost | Formula |
|---|---|---|
| Zgor. | X | 0 |
| Zgor. | Y | 0 |
| Zgor. | Širina | Parent.Width |
| Zgor. | Višina | Parent.Height / 2 |
| Nižje | X | 0 |
| Nižje | Y | Parent.Height / 2 |
| Nižje | Širina | Parent.Width |
| Nižje | Višina | Parent.Height / 2 |
S to konfiguracijo bi dosegli želeni učinek, vendar bi morali urediti vsako formulo, če bi si premislili o relativni velikosti kontrolnikov. Lahko bi se na primer odločili, da naj zgornji kontrolnik zaseda le zgornjo tretjino zaslona, spodnji kontrolnik pa spodnji dve tretjini.
Če želite ustvariti ta učinek, morate posodobiti lastnost Height kontrolnika Upper ter lastnosti Y in Height kontrolnika Lower. Raje razmislite o tem, da bi formule za kontrolnik Lower napisali v smislu kontrolnika Upper (in samega sebe), kot v tem primeru:
| Ctrl | Lastnost | Formula |
|---|---|---|
| Zgor. | X | 0 |
| Zgor. | Y | 0 |
| Zgor. | Širina | Parent.Width |
| Zgor. | Višina | Parent.Height / 3 |
| Lower | X | 0 |
| Lower | Y | Upper.Y + Upper.Height |
| Lower | Širina | Parent.Width |
| Nižje | Višina | Parent.Height - Lower.Y |
Ko so te formule umeščene, morate spremeniti samo lastnost Height kontrolnika Upper, da izrazite drugačen del višine zaslona. Kontrolnik Lower se samodejno premakne in spremeni velikost na račun za spremembo.
S temi vzorci formul lahko izražate običajne odnose postavitev med kontrolnikom, poimenovanim C, in njegovim nadrejenim ali sorodnim kontrolnikom, poimenovanim D.
| Odnos med kontrolnikom C in njegovim nadrejenim kontrolnikom | Lastnost | Formula | Ilustracija |
|---|---|---|---|
| C zapolni širino nadrejenega kontrolnika z obrobo N | X | N |
 |
| Širina | Parent.Width - (N * 2) |
||
| C zapolni višino nadrejenega kontrolnika z obrobo N | Y | N |
 |
| Višina | Parent.Height - (N * 2) |
||
| C poravnan z desnim robom nadrejenega kontrolnika, z obrobo N | X | Parent.Width - (C.Width + N) |
 |
| C poravnan s spodnjim robom nadrejenega kontrolnika, z obrobo N | Y | Parent.Height - (C.Height + N) |
 |
| C vodoravno centriran na nadrejeni kontrolnik | X | (Parent.Width - C.Width) / 2 |
 |
| C navpično centriran na nadrejeni kontrolnik | Y | (Parent.Height - C.Height) / 2 |
 |
| Odnos med kontrolnikoma C in D | Lastnost | Formula | Ilustracija |
|---|---|---|---|
| C je vodoravno poravnan s kontrolnikom D in iste širine kot D | X | D.X |
 |
| Širina | D.Width |
||
| C je navpično poravnan s kontrolnikom D in iste višine kot D | Y | D.Y |
 |
| Višina | D.Height |
||
| Desni rob kontrolnika C poravnan z desnim robom kontrolnika D | X | D.X + D.Width - C.Width |
 |
| Spodnji rob kontrolnika C poravnan s spodnjim robom kontrolnika D | Y | D.Y + D.Height - C.Height |
 |
| C vodoravno centriran glede na D | X | D.X + (D.Width - C.Width) / 2 |
 |
| C navpično centriran glede na D | Y | D.Y + (D.Height - C.Height) /2 |
 |
| C umeščen desno od kontrolnika D z vrzeljo N | X | D.X + D.Width + N |
 |
| C umeščen pod D z vrzeljo N | Y | D.Y + D.Height + N |
 |
| C zapolni prostor med kontrolnikom D in desnim robom nadrejenega kontrolnika | X | D.X + D.Width |
 |
| Širina | Parent.Width - C.X |
||
| C zapolni prostor med kontrolnikom D in spodnjim robom nadrejenega kontrolnika | Y | D.Y + D.Height |
 |
| Višina | Parent.Height - C.Y |
Hierarhična postavitev
Ko boste začeli graditi zaslone, ki vsebujejo več kontrolnikov, bo postalo priročnejše (ali celo potrebno) umestiti kontrolnike glede na nadrejeni kontrolnik, namesto glede na zaslon ali sorodni kontrolnik. Z organiziranjem kontrolnikov v hierarhično strukturo lahko poskrbite za enostavnejše pisanje in vzdrževanje formul.
Galerije
Če uporabite galerijo v aplikaciji, boste morali postaviti kontrolnike znotraj predloge galerije. Te kontrolnike lahko umestite s pisanjem formul, ki uporabljajo operator Nadrejeni, ki se bo skliceval na predlogo galerije. V formulah o kontrolnikih znotraj predloge galerije uporabite lastnosti Parent.TemplateHeight in Parent.TemplateWidth; ne uporabljajte Parent.Width in Parent.Height, ki se sklicujeta na splošno velikost galerije.
Kontrolnik vsebnika
Za nadrejeni kontrolnik lahko uporabite kontrolnik Vsebnik postavitve.
Poglejmo si primer glave na vrhu zaslona. Običajno je, da imate glavo z naslovom in več ikonami, s katerimi imajo lahko vaši uporabniki interakcije. Takšno glavo lahko sestavite s kontrolnikom Container, ki vsebuje kontrolnik Label in dva kontrolnika Icon:
Nastavite lastnosti za te kontrolnike na te vrednosti:
| Lastnost | Glava | Meni | Zaprto | Naziv |
|---|---|---|---|---|
| X | 0 |
0 |
Parent.Width - Close.Width |
Menu.X + Menu.Width |
| Y | 0 |
0 |
0 |
0 |
| Širina | Parent.Width |
Parent.Height |
Parent.Height |
Close.X - Title.X |
| Višina | 64 |
Parent.Height |
Parent.Height |
Parent.Height |
Za kontrolnik Header se Parent sklicuje na zaslon. Za druge se Parent sklicuje na kontrolnik Header.
Ko napišete te formule, lahko prilagodite zaslon ali položaj kontrolnika Header tako, da spremenite formule za njegove lastnosti. Velikosti in položaji podrejenih kontrolnikov se bodo samodejno ustrezno prilagodili.
Kontrolniki vsebnikov s samodejno postavitvijo
Za samodejno postavitev podrejenih komponent lahko uporabite funkcijo, kontrolnike vsebnika Samodejna postavitev . Ti kontrolniki določajo položaj podrejenih komponent, tako da vam nikoli ne bo treba nastaviti X, Y za komponento znotraj vsebnika. Lahko tudi razporedi razpoložljivi prostor svojim podrejenim komponentam ter določi vodoravno in navpično poravnavo podrejenih komponent. Več informacij: Kontrolniki vsebnikov s samodejno postavitvijo
Komponente
Če uporabljate drugo funkcijo, imenovano Komponente, lahko sestavite gradnike in jih znova uporabite v svoji aplikaciji. Kot pri kontrolniku Container bi morali kontrolniki, ki jih umestite znotraj komponente, utemeljiti svoje formule za položaj in velikost na Parent.Width in Parent.Height, ki se sklicujeta na velikost komponent. Več informacij: Ustvarjanje komponente.
Prilagajanje postavitve glede na velikost in usmeritev naprave
Do zdaj smo se naučili, kako uporabiti formule za spreminjanje velikosti vsakega kontrolnika kot odziv na razpoložljivi prostor, pri tem pa ohraniti kontrolnike poravnane glede na drug drugega. Morda pa bi želeli ali morali izvesti znatnejše spremembe postavitve v odziv na drugačne velikosti in usmeritve naprav. Ko je naprava zavrtena iz pokončne v ležečo usmeritev, boste morda želeli preklopiti z navpične postavitve v vodoravno. V večji napravi lahko prednastavite več vsebine ali jo prerazporedite, da zagotovite privlačnejšo postavitev. V manjši napravi boste morda morali razdeliti vsebino po več zaslonih.
Usmeritev naprave
Privzete formule za lastnosti Width in Height zaslona, kot so bile opisane v zgodnejšem delu te teme, ne bodo nujno zagotovile dobro izkušnjo, če uporabnik zavrti napravo. Na primer, aplikacija zasnovana za telefon v pokončni usmeritvi ima DesignWidth 640 in DesignHeight 1136. Ista aplikacija v telefonu v ležeči usmeritvi bo imela te vrednosti lastnosti:
- Lastnost zaslona Width je nastavljena na
Max(App.Width, App.DesignWidth). Širina (1136) aplikacije je večja kot njena vrednost DesignWidth (640), zato je formula ovrednotena na 1136. - Lastnost zaslona Height je nastavljena na
Max(App.Height, App.DesignHeight). Višina (640) aplikacije je manjša kot njena vrednost DesignHeight (1136), zato je formula ovrednotena na 1136.
Če je Višina zaslona 1136 in višina naprave (v tej usmeritvi) 640, se mora uporabnik navpično pomikati po zaslonu, kar morda ni izkušnja, ki jo želite.
Za prilagoditev lastnosti Width in Height na usmeritev naprave, lahko uporabite ti formuli:
Širina = Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight))
Višina = Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))
Ti formuli zamenjata vrednosti DesignWidth in DesignHeight aplikacije na podlagi tega, ali je širina naprave manjša od njene višine (pokončna usmeritev) ali večja od njene višine (ležeča usmeritev).
Ko prilagodite formuli Širina in Višina zaslona, bi morda želeli tudi prerazporediti kontrolnike na zaslonu za boljšo izrabo razpoložljivega prostora. Na primer, če vsak od obeh kontrolnikov zaseda polovico zaslona, bi ju lahko naložili navpično v pokončni usmeritvi, a razporedili drugega ob drugega v ležeči usmeritvi.
Uporabite lahko lastnost Orientation zaslona za določitev, ali je zaslon usmerjen navpično ali vodoravno.
Opomba
V ležeči usmeritvi sta kontrolnika Upper in Lower prikazana kot levi in desni kontrolnik.
| Ctrl | Lastnost | Formula |
|---|---|---|
| Zgor. | X | 0 |
| Zgor. | Y | 0 |
| Zgor. | Širina | If(Parent.Orientation = Layout.Vertical, Parent.Width, Parent.Width / 2) |
| Zgor. | Višina | If(Parent.Orientation = Layout.Vertical, Parent.Height / 2, Parent.Height) |
| Lower | X | If(Parent.Orientation = Layout.Vertical, 0, Upper.X + Upper.Width) |
| Lower | Y | If(Parent.Orientation = Layout.Vertical, Upper.Y + Upper.Height, 0) |
| Lower | Širina | Parent.Width - Lower.X |
| Nižje | Višina | Parent.Height - Lower.Y |
Velikosti zaslona in prekinitvene točke
Postavitev lahko prilagodite na podlagi velikosti naprave. Lastnost Size zaslona razvrsti velikost trenutne naprave. Velikost je pozitivno celo število; vrsta ScreenSize zagotovi poimenovane konstante za boljšo berljivost. V tej tabeli so navedene konstante:
| Konstanta | Vrednost | Vrsta običajne naprave (s privzetimi nastavitvami aplikacije) |
|---|---|---|
| ScreenSize.Small | 1 | Telefonska številka |
| ScreenSize.Medium | 2 | Tablični računalnik, navpična postavitev |
| ScreenSize.Large | 3 | Tablični računalnik, vodoravna postavitev |
| ScreenSize.ExtraLarge | 4 | Namizni računalnik |
Uporabite te velikosti za sprejemanje odločitev o postavitvi aplikacije. Na primer, če želite, da je kontrolnik skrit v napravi velikosti telefona, sicer pa viden, bi lahko nastavili lastnost Visible kontrolnika na to formulo:
Parent.Size >= ScreenSize.Medium
Ta formula je ovrednotena na true, ko je velikost srednja ali večja, sicer pa na false.
Če želite, da kontrolnik zavzema drugačen del širine zaslona na podlagi velikosti zaslona, nastavite lastnost kontrolnika Width na to formulo:
Parent.Width *
Switch(
Parent.Size,
ScreenSize.Small, 0.5,
ScreenSize.Medium, 0.3,
0.25
)
Ta formula nastavi širino kontrolnika na polovico širine zaslona na majhnem zaslonu, tri desetine širine zaslona na srednjem zaslonu in četrtino zaslona na vseh drugih zaslonih.
Prekinitvene točke po meri
Lastnost Size zaslona je izračunana s primerjavo lastnosti Width zaslona z vrednostmi v lastnosti SizeBreakpoints aplikacije. Ta lastnost je tabela z enim stolpcem s številkami, ki označujejo prekinitvene točke širine, ki ločujejo poimenovane velikosti zaslona:
V aplikaciji, ustvarjeni za tablični računalnik ali splet, je privzeta vrednost v lastnosti SizeBreakpoints aplikacije [600, 900, 1200]. V aplikaciji, ustvarjeni za telefone, je vrednost [1200, 1800, 2400]. (Vrednosti za telefonske aplikacije so podvojene, ker takšne aplikacije uporabljajo koordinate, ki so dejansko podvojene koordinate, uporabljene v drugih aplikacijah.)
Prekinitvene točke aplikacije lahko prilagodite, tako da spremenite vrednosti v lastnosti SizeBreakpoints. Izberite možnost Aplikacija v drevesnem pogledu, izberite SizeBreakpoints v seznamu lastnosti in nato uredite vrednosti v vnosni vrstici. Ustvarite lahko toliko prekinitvenih točk, kot jih vaša aplikacija potrebuje, toda samo velikosti od 1 do 4 ustrezajo poimenovanim velikostnim zaslona. V formulah se lahko sklicujete na velikosti, ki presegajo ExtraLarge, glede na njihove numerične vrednosti (5, 6 in tako naprej).
Določite lahko tudi manj prekinitvenih točk. Na primer, vaša aplikacija morda potrebuje le tri velikosti (dve prekinitveni točki), zato bodo možne velikosti zaslona majhna, srednja ali velika.
Znane omejitve
Delovno območje za ustvarjanje se ne odziva na ustvarjene formule za prilagajanje velikosti. Če želite preskusiti odzivno vedenje, shranite in objavite aplikacijo ter jo nato odprite v napravah ali oknih brskalnika različnih velikosti in usmeritev.
Če zapišete izraze ali formule v lastnostih X, Y, Width in Height kontrolnika, boste prepisali te izraze ali formule, če pozneje povlečete kontrolnik na drugo lokacijo ali spremenite velikost kontrolnika, tako da povlečete njegovo mejo.
Opomba
Ali nam lahko poveste, kateri je vaš prednostni jezik za dokumentacijo? Izpolnite kratko anketo. (upoštevajte, da je v angleščini)
Z anketo boste porabili približno sedem minut. Ne zbiramo nobenih osebnih podatkov (izjava o zasebnosti).