Opbygge dynamiske lærredapps

Artikel
03/16/2023

Responsiv betyder, at en app kan justeres i forhold til en anden skærmstørrelse og formfaktor for at udnytte den tilgængelige skærmplads fornuftigt, hvilket giver en god brugergrænseflade og UX i enhver enhed, formfaktor og skærmstørrelse.

Responsiv tillader også, at forskellige elementer i appen angiver, hvordan de:

Strækkes eller får ændret størrelsen efter ændringer af skærmstørrelsen.
Bevarer eller skifter placeringer, når skærmstørrelsen ændres.

Hvorfor du bør opbygge responsive apps

Slutbrugere kan få adgang til din app fra forskellige enheder, f.eks. telefoner, tablets, bærbare computere og stationære computere med store skærme, forskellige skærmstørrelser og med varierende antal pixel.

Hvis du vil sikre en fantastisk brugeroplevelse og anvendelighed af appen på hver enkelt formfaktor og enhed, er det nødvendigt at designe appen med responsive designprincipper. Selvom appen kun er beregnet til at blive brugt i webbrowseren eller mobiltelefoner, kan skærmstørrelser på brugerens enhed være forskellige, så det er en god ide at designe appen med responsive principper.

Design af appen med responsive principper

Før du går i gang med at designe brugergrænsefladen til din app, skal du overveje følgende aspekter:

Hvilke formfaktorer eller enheder du vil understøtte.
Hvordan skal appen se ud på hver formfaktor?
Hvilke elementer i appen skal strækkes eller have tilpasset størrelse?
Er elementerne skjult på visse formfaktorer?
Fungerer appen anderledes i visse formfaktorer?

Når alle disse krav er indsamlet, skal du overveje, hvordan disse forskellige brugergrænsefladelayout kan oprettes i et enkelt program med de tilgængelige responsive værktøjer i Power Apps.

Før du går i gang med at bruge responsive layout, skal du benytte følgende fremgangsmåde:

Gå til Power Apps.
Åbn den app, hvor du vil bruge det responsive layout.
Gå til Indstillinger > Vis for at deaktivere Skalering for at tilpasse, Lås aspektforhold, Lås retning og vælg Anvend.

Responsive layout

Du kan oprette følgende typer responsive layout ved at tilføje en ny skærm og vælge den relevante indstilling under fanen Layout:

Skærmlayout.

Bemærk

De nye responsive layout er tilgængelige for appformaterne, men de nye skærmskabeloner er kun tilgængelige i Tablet-format.

Opdelt skærmbillede

Layoutet i Opdelt skærmbillede har to sektioner, der hver fylder 50 % af skærmbredden på de stationære computere. På mobilenheder anbringes sektionerne under hinanden og optager hver især hele skærmens bredde.

Layoutet af margentekst har en fast bredde i venstre side. Hovedindholdet består af et sidehoved med fast højde, og hovedsektionen optager resten af skærmens bredde. Skabelonen har som standard samme funktionsmåde på mobilenheder, men nogle tilpasninger anbefales på baggrund af det brugergrænseflademønster, der er nødvendigt for mobiloplevelsen.

Arbejde med objektbeholdere

Objektbeholdere er byggeblokke i ethvert responsivt design. En objektbeholder kan være en objektbeholder til automatisk layout i lodret eller vandret retning eller en objektbeholder med fast layout, som i fremtiden vil understøtte begrænsninger.

Nedenfor finder du tip til oprettelse af appens brugergrænseflade med objektbeholdere:

Opret altid elementer i brugergrænsefladen, der udgør en tabel over brugergrænsefladen i en beholder.
Gør det muligt for objektbeholderen at have sine egne responsive egenskaber og indstillinger for at angive, hvordan den er placeret eller får tilpasset størrelsen på forskellige skærmstørrelser.
Giver dig mulighed for at ændre, hvordan dens underordnede komponenter placeres i forhold til det responsive.

Vælge en af to layouttilstande for en objektbeholder: manuelt layout eller automatisk layout (vandret eller lodret)

Objektbeholdere til automatisk layout

Det er muligt at bruge to kontrolelementer, Vandret objektbeholder og Lodret objektbeholder til automatisk at placere de underordnede komponenter. Disse objektbeholdere bestemmer placeringen af underordnede komponenter, så du aldrig skal angive X, Y for en komponent inde i objektbeholderen. Den kan fordele den ledige plads til de underordnede komponenter baseret på indstillingerne og bestemmer både den lodrette og vandrette justering af de underordnede komponenter.

Hvornår objektbeholderne til automatisk layout skal bruges

Du kan bruge automatisk layout i objektbeholdere i følgende scenarier:

Brugergrænsefladen skal reagere på ændringer af skærmstørrelse eller formfaktor.
Der findes mere end én underordnet komponent, der skal have tilpasset størrelsen eller skal flyttes rundt baseret på ændringer af skærmstørrelsen eller formfaktor.
Når du har brug for at stable elementerne lodret eller vandret (uanset størrelse).
Når du har brug for at fordele elementer jævnt på skærmen.

Eksempel på objektbeholder til automatisk layout

Sådan opretter du en responsiv skærm:

Opret en tom lærredapp med Tablet-layout.
Gå til Indstillinger > Vis og deaktiver Skalering for at tilpasse, Lås aspektforhold, Lås retning og vælg Anvend.
Vælg Objektbeholder til vandret under fanen Layout i ruderne Indsæt i venstre margentekst.
Den øverste objektbeholder skal have ændret størrelse for at optage hele pladsen med disse egenskaber. Den har samme størrelse som skærmbilledet, når størrelsen tilpasses.
1. X = 0
2. Y= 0
3. Width = Parent.Width
4. Højde = overordnet. Height
I ruden Indsæt skal du nu føje to lodrette objektbeholdere til den vandrette objektbeholder.
Hvis du vil få objektbeholderne til at udfylde hele den lodrette plads, skal du vælge Container1 og angive egenskaben Align (vertical) til Stretch.
Hvis du vil opdele skærmen mellem indholdet, skal du bruge egenskaben Fill portions i de to underordnede objektbeholdere. Den venstre objektbeholder optager 1/4 af skærmpladsen.
1. Vælg Container2. Du kan se, at Flexible width-egenskaben er slået til. Indstil Fill portions til 1.
2. Vælg Container3. Du kan se, at Flexible width-egenskaben er slået til. Indstil Fill portions til 3.
Vælg Container2. Angiv Fill = RGBA(56, 96, 178, 1)-egenskaben på formellinjen. Indstil Align (horizontal) til Stretch.
Tilføj nogle knapper for at oprette en menu. Omdøb knapperne efter behov.
Vælg Container3, og tilføj en vandret objektbeholder, og deaktiver Flexible height-egenskaben. Angiv Height til 100. Indstil Align (vertical) til Stretch.
Føj nogle Ikoner til Container4. Skift ikonerne, så de er forskellige, med ikonegenskaben.
Vælg Container4. Angiv egenskaben Justify (horizontal) til End. Indstil Align (vertical) til Center. Indstil Gap til 40 for at skabe plads mellem ikonerne.
Vælg Container3. Indstil Align (horizontal) til Stretch. Indstil Vertical Overflow til Scroll.
Tilføj andet Mærke, Input, Medie, indtil de går ud over objektbeholderren. Skift farven på rektanglerne til en anden. Du kan se et rullepanel for adgang til det ikke-synlige indhold.
Vælg Eksempel eller F5. Ret størrelsen på browservinduet for at se, hvordan din app justeres efter forskellige skærmstørrelser.

Kendte problemer

Visse kombinationer af egenskaber for layoutobjektbeholder er ikke kompatible, eller de kan oprette uønskede output, f.eks.:
- Hvis objektbeholderens Wrap-egenskab er aktiveret, bliver egenskaben Align ignoreret på underordnede kontrolelementer.
- Hvis objektbeholderens Wrap-egenskab er deaktiveret, og objektbeholderens overløb af primær akse er indstillet til Rul (vandret overløb for vandrette objektbeholdere eller lodret overløb for lodrette objektbeholdere), anbefales du at angive Justify-egenskaben til enten Start eller Plads mellem.
- Indstillingerne Center eller End kan betyde, at underordnede kontrolelementer ikke er tilgængelige, når objektbeholderen er for lille til at kunne vise alle kontrolelementerne, selvom Overflow-egenskaben er indstillet til Scroll.
Du kan ikke ændre størrelsen eller placeringen af kontrolelementerne på lærredappen, fordi træk og slip-kontrolelementer er deaktiveret i layoutobjektbeholderne. Brug i stedet egenskaberne for layoutobjektbeholder til at opnå den ønskede størrelse og placering. Kontrolelementers placering kan ændres via trævisningen eller ved hjælp af piletasterne som genveje.
Kontrolelementerne Datatabel, Charts og Tilføj billede understøttes ikke i øjeblikket i objektbeholderne til layout.
Nogle af egenskaberne for layoutobjektbeholdere er skjulte for underordnede kontrolelementer. Der kan stadig være adgang til de skjulte egenskaber via formellinjen eller fra panelet Avanceret. Disse egenskaber ignoreres dog, selvom de er angivet på disse steder.
Når kontrolelementer flyttes til en layoutobjektbeholder (f.eks. når du kopierer eller indsætter kontrolelementerne), indsættes de i objektbeholderen efter deres rækkefølge i trævisningen.

Se også

Oprette responsive layout