Design responsive cu containere

Introducere în Power Apps

Luise Freese

Azure & Power Platform Architect

De ce responsive?

Aceeași aplicație se deschide pe telefoane, tablete, laptopuri
Un layout fix se taie pe ecrane mici și pare pierdut pe cele mari
Responsive = layoutul se adaptează

Telefon, tabletă și laptop arătând aceeași aplicație care își adaptează layoutul de la o coloană la mai multe.

Containere de layout moderne

Ilustrație care compară containerele Layout verticale și orizontale, cu controale copil stivuite versus alăturate.

Containerul de layout vertical stivuiește elementele de sus în jos
Containerul de layout orizontal așază elementele de la stânga la dreapta
Controalele moderne se încadrează în spațiul disponibil

Lățime și înălțime flexibile

FlexibleWidth și FlexibleHeight
Activat, controlul se întinde pentru a umple containerul
Dezactivat, controlul își păstrează dimensiunea fixă

Gallery1.FlexibleHeight = true    // stretches with screen
Gallery1.FlexibleWidth  = false   // stays at fixed reading width

LayoutMinWidth și LayoutMinHeight

Telefon versus tabletă arătând LayoutMinWidth ca punctul de prag unde layoutul trece de la o coloană la panou lateral plus conținut.

Un container are nevoie de spațiu suficient pentru a se organiza corect
LayoutMinWidth = lățimea minimă înainte de rearanjare
Declanșează un layout diferit pentru telefoane față de tablete

Setările de afișare ale aplicației

Settings → Display setează orientarea și dimensiunea
App layout: Fixed mărește la un singur raport, Responsive se adaptează la ecran
Testează la mai multe dimensiuni

Fereastra de Settings din Power Apps Studio, pe tab-ul Display, arătând opțiuni de layout, orientare și dimensiune a canvasului

Layout-urile predefinite

Captură de ecran reală a panoului New screen din Power Apps Studio, arătând șabloane de layout predefinite: Blank, Split screen, Sidebar, Header and footer, Approval request și Welcome screen, fiecare cu o previzualizare mică

+ New screen vine cu șabloane de layout predefinite
Sidebar, Header and footer, Split screen – deja responsive
Punct de pornire recomandat pentru prima ta aplicație responsive

Ce vei construi

Pune controale într-un Layout container · Comută între dimensiuni de dispozitive · Vezi cum aplicația reacționează

Ilustrație a unei aplicații pe telefon, tabletă și laptop, arătând layoutul unei galerii care se adaptează la fiecare dimensiune de ecran.

Hai să exersăm!

Introducere în Power Apps