Адаптивний дизайн із контейнерами

Вступ до Power Apps

Luise Freese

Azure & Power Platform Architect

Навіщо адаптивність?

Та сама програма відкривається на телефонах, планшетах, ноутбуках
Фіксований макет обрізається на малих екранах, губиться на великих
Адаптивний = макет пристосовується

Телефон, планшет і ноутбук з однією програмою, що змінює макет від однієї колонки до кількох.

Сучасні контейнери макета

Ілюстрація порівняння вертикальних і горизонтальних контейнерів Layout: елементи зверху-вниз проти поряд.

Vertical layout container: розташовує дітей зверху вниз
Horizontal layout container: розташовує дітей зліва направо
Сучасні елементи пливуть у доступний простір

Гнучна ширина та висота

FlexibleWidth і FlexibleHeight
On — елемент розтягується, щоб заповнити контейнер
Off — елемент зберігає фіксований розмір

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

LayoutMinWidth і LayoutMinHeight

Телефон vs планшет із LayoutMinWidth як поріг, коли макет перемикається з однієї колонки на бокову панель плюс контент.

Контейнеру потрібен достатній простір, щоб правильно розкласти елементи
LayoutMinWidth = найменша ширина до перестановки
Вмикає інший макет для телефонів проти планшетів

Налаштування відображення застосунку

Settings → Display задає орієнтацію та розмір
App layout: Fixed масштабує до одного співвідношення, Responsive підлаштовується під екран
Тестуйте на декількох розмірах

Діалог Power Apps Studio Settings на вкладці Display з опціями макета, орієнтації та розміру полотна

Попередньо визначені макети

Справжній скриншот меню New у Power Apps Studio з шаблонами макетів: Blank, Split screen, Sidebar, Header and footer, Approval request, Welcome screen з міні-прев'ю

+ New screen містить готові шаблони макетів
Sidebar, Header and footer, Split screen — вже адаптивні
Рекомендований старт для першого адаптивного застосунку

Що ви створите

Оберніть елементи в Layout container · Перемикайте розміри пристроїв · Дивіться, як застосунок реагує

Ілюстрація застосунку на телефоні, планшеті й ноутбуку, де галерея підлаштовується під кожен розмір екрана.

Давайте потренуємось!

Вступ до Power Apps