Projektowanie responsywne z kontenerami

Wprowadzenie do Power Apps

Luise Freese

Azure & Power Platform Architect

Po co responsywność?

 

  • ta sama aplikacja działa na telefonach, tabletach i laptopach
  • stały układ ucina się na małych ekranach i gubi się na dużych
  • responsywność = układ się dostosowuje

$$

Telefon, tablet i laptop pokazujące tę samą aplikację dostosowującą układ z jednej kolumny do wielu kolumn.

Wprowadzenie do Power Apps

Nowoczesne kontenery układu

Ilustracja porównująca pionowe i poziome kontenery układu z elementami ułożonymi jeden pod drugim lub obok siebie.

 

  • pionowy kontener układu - ustawia elementy jeden pod drugim
  • poziomy kontener układu - ustawia elementy obok siebie
  • nowoczesne kontrolki wypełniają dostępną przestrzeń
Wprowadzenie do Power Apps

Elastyczna szerokość i wysokość

 

  • FlexibleWidth i FlexibleHeight
  • włączone - kontrolka rozciąga się, wypełniając kontener
  • wyłączone - kontrolka zachowuje stały rozmiar

$$

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

LayoutMinWidth i LayoutMinHeight

Telefon kontra tablet pokazujące LayoutMinWidth jako punkt graniczny, w którym układ zmienia się z jednej kolumny na panel boczny z treścią.

 

  • kontener potrzebuje wystarczająco dużo miejsca, aby poprawnie się wyświetlić
  • LayoutMinWidth = najmniejsza szerokość, przy której układ się zmienia
  • wymusza inny układ na telefonach i tabletach
Wprowadzenie do Power Apps

Ustawienia wyświetlania aplikacji

 

  • Ustawienia → Wyświetlanie określają orientację i rozmiar
  • Układ aplikacji: Stały skaluje do jednych proporcji, Responsywny dostosowuje się do ekranu
  • testuj w różnych rozmiarach

$$

Okno ustawień Power Apps Studio na karcie Wyświetlanie, pokazujące opcje układu, orientacji i rozmiaru obszaru roboczego

Wprowadzenie do Power Apps

Gotowe układy

Zrzut ekranu panelu Nowy ekran w Power Apps Studio z gotowymi szablonami układu: Pusty, Podzielony ekran, Panel boczny, Nagłówek i stopka, Prośba o zatwierdzenie oraz Ekran powitalny, każdy z małym podglądem

 

  • + New screen zawiera gotowe szablony układu
  • panel boczny, nagłówek i stopka, podzielony ekran - od razu responsywne
  • dobry punkt wyjścia dla pierwszej responsywnej aplikacji
Wprowadzenie do Power Apps

Co zbudujesz

$$

Umieść kontrolki w kontenerze układu · zmieniaj rozmiary urządzeń · zobacz, jak aplikacja się dostosowuje

Ilustracja aplikacji na telefonie, tablecie i laptopie, pokazująca dostosowanie układu galerii do każdego rozmiaru ekranu.

Wprowadzenie do Power Apps

Czas na praktykę!

Wprowadzenie do Power Apps

Preparing Video For Download...