Създаване на отзивчиво оформление в приложения за платно
Преди да създадете приложение за платно в Power Apps, посочвате дали да персонализирате приложението за телефон или таблет. Този избор определя размера и формата на платното, върху което ще изградите приложението си.
След като направите този избор, можете да направите още няколко избора, ако изберете Настройки > Дисплей. Можете да изберете портретна или пейзажна ориентация и размер на екрана (само за таблет). Можете също да заключите или отключите съотношението на страните и да поддържате завъртането на устройството (или не).
Тези решения са в основата на всеки друг избор, който правите, докато проектирате оформления на екрана. Ако приложението ви работи на устройство с различен размер или в мрежата, цялото ви оформление мащабира, за да пасне на екрана, където приложението работи. Ако приложение, предназначено за телефон, работи в голям прозорец на браузъра, приложението мащабира, за да компенсира и изглежда по-голямо за своето пространство. Приложението не може да се възползва от допълнителните пиксели, като показва повече контроли или повече съдържание.
Ако създадете отзивчиво оформление, контролите могат да реагират на различни устройства или размери на прозореца, правейки различни преживявания да се чувстват по-естествени. За да постигнете отзивчиво оформление, коригирате някои настройки и пишете изрази в приложението си.
Дезактивиране на „Мащабиране за съответствие”
Можете да конфигурирате всеки екран, така че оформлението му да се адаптира към действителното пространство, в което работи приложението.
Активирате отзивчивостта, като изключите настройката Мащаб за съответствие на приложението, която е включена по подразбиране. Когато изключите тази настройка, вие също изключвате Заключване на съотношение, защото вече не проектирате за конкретна форма на екрана. (Все още можете да определите дали приложението ви поддържа въртене на устройството.)
За да направите приложението си отзивчив, трябва да предприемете допълнителни стъпки, но тази промяна е първата стъпка към възможна реакция.
Разберете размерите на приложението и екрана
За да накарате оформленията на приложението ви да реагират на промените в размерите на екрана, ще напишете формули, които използват широчина и височина свойства на екрана. За да покажете тези свойства, отворете приложение в Power Apps Studio и след това изберете екран. Формулите по подразбиране за тези свойства се появяват в раздела разширено на десния прозорец.
Ширина = Max(App.Width, App.DesignWidth)
Височина = Max(App.Height, App.DesignHeight)
Тези формули се отнасят до широчина, височина, DesignWidth, и DesignHeight свойства на приложението. Свойствата на приложението широчина и височина съответстват на размерите на устройството или прозореца на браузъра, в който се използва приложението ви. Ако потребителят промени размера на прозореца на браузъра (или завърти устройството, ако сте изключили Заключване на ориентация), стойностите на тези свойства се променят динамично. Формулите в свойствата на екрана широчина и височина се преоценяват, когато тези стойности се променят.
Свойствата Ширина на дизайна и Височина на дизайна идват от размерите, които сте посочили в екрана Показване на Настройки. Например, ако изберете оформлението на телефона в портретна ориентация, DesignWidth е 640, и DesignHeight е 1136.
Тъй като те се използват във формулите за свойството на екрана широчина и височина, можете да мислите за DesignWidth и DesignHeight като минимални размери, за които ще проектирате приложението. Ако действителната площ на вашето приложение е дори по-малка от тези минимални размери, формулите за свойството на екрана широчина и височина гарантират, че техните стойности няма да станат по-малки от минималните. В този случай потребителят трябва да превърти, за да прегледа цялото съдържание на екрана.
След като установите приложението си DesignWidth и DesignHeight, няма да е необходимо (в повечето случаи) да променяте формули по подразбиране за всяко свойсвто на екрана широчина и височина. По-късно тази тема обсъжда случаите, в които може да искате да персонализирате тези формули.
Използвайте формули за динамично оформление
За да създадете отзивчив дизайн, можете да намерите и оразмерите всяка контрола, като използвате формули вместо абсолютни (постоянни) стойности на координатите. Тези формули изразяват позицията и размера на всеки контрол по отношение на общия размер на екрана или спрямо другите контроли на екрана.
Важно
След като напишете формули за свойствата на контролата х, Y, широчина и височина, вашите формули ще бъдат презаписани с постоянни стойности, ако впоследствие плъзнете контрола в редактора на платното. Когато започнете да използвате формули за постигане на динамично оформление, трябва да избягвате влаченето на контролите.
В най-простия случай един елемент запълва цял екран. За да създадете този ефект, задайте свойствата на контрола на тези стойности:
| Свойство | Стойност |
|---|---|
| X | 0 |
| Ш | 0 |
| Ширина | Parent.Width |
| Височина | Parent.Height |
Тези формули използват оператор родител. За контрола, поставена директно на екрана, родител се отнася до екрана. С тези стойности на свойството контролата се появява в горния ляв ъгъл на екрана (0, 0) и има същите широчина и височина като екрана.
По-късно в тази тема ще приложите тези принципи (и оператор родител) за позициониране на контроли в други контейнери, като галерии, групови контроли и компоненти.
Като алтернатива, контролът може да запълни само горната половина на екрана. За да създадете този ефект, задайте свойството височина на Parent.Height / 2, а останалите формули оставете непроменени.
Ако искате втори елемент за запълване на долната половина на същия екран, можете да предприемете поне два други подхода за изграждането на неговите формули. За простота може да използвате този подход:
| Контрола | Свойство | Формула |
|---|---|---|
| По-високо | X | 0 |
| По-високо | Ш | 0 |
| По-високо | Ширина | Parent.Width |
| По-високо | Височина | Parent.Height / 2 |
| По-ниско | X | 0 |
| По-ниско | Y | Parent.Height / 2 |
| По-ниско | Ширина | Parent.Width |
| По-ниско | Височина | Parent.Height / 2 |
Тази конфигурация би постигнала желания от вас ефект, но ще трябва да редактирате всяка формула, ако сте променили мнението си относно относителните размери на контролите. Например, можете да решите, че горното управление трябва да заема само горната една трета от екрана, като долното управление запълва долните две трети.
За да създадете този ефект, трябва да актуализирате свойството височина на контролата Горе и свойствата Y и височина на контролата долу. Вместо това помислете за написването на формулите за контролата долу по отношение на контролата Горе (и себе си), както в този пример:
| Контрола | Свойство | Формула |
|---|---|---|
| По-високо | X | 0 |
| По-високо | Ш | 0 |
| По-високо | Ширина | Parent.Width |
| По-високо | Височина | Parent.Height / 3 |
| Lower | X | 0 |
| Lower | Ш | Upper.Y + Upper.Height |
| Lower | Ширина | Parent.Width |
| По-ниско | Височина | Parent.Height - Lower.Y |
С тези формули на място, трябва само да промените свойството височина на контролата горе за изразяване на различна част от височината на екрана. Контролата долу автоматично се премества и оразмерява, за да отчете промяната.
Можете да използвате тези модели на формули за изразяване на общи връзки на оформление между контрола, наречена С, и неговият родител или контролен елемент на близките D.
| Връзка между C и неговия родител | Свойство | Формула | Илюстрация |
|---|---|---|---|
| С запълва ширина на родителя, с марж на N | X | N |
 |
| Ширина | Parent.Width - (N * 2) |
||
| С запълва височината на родителя, с марж на N | Y | N |
 |
| Височина | Parent.Height - (N * 2) |
||
| С подравнен с десния ръб на родителя, с марж на N | X | Parent.Width - (C.Width + N) |
 |
| С подравнен с долния ръб на родителя, с марж на N | Y | Parent.Height - (C.Height + N) |
 |
| С центриран хоризонтално върху родител | X | (Parent.Width - C.Width) / 2 |
 |
| С центриран вертикално върху родител | Y | (Parent.Height - C.Height) / 2 |
 |
| Релация между C и D | Свойство | Формула | Илюстрация |
|---|---|---|---|
| С хоризонтално подравнени с D и същата ширина като D | X | D.X |
 |
| Ширина | D.Width |
||
| С вертикално подравнени с D и същата височина като D | Y | D.Y |
 |
| Височина | D.Height |
||
| Десен ръб на С, подравнен с десния ръб на D | X | D.X + D.Width - C.Width |
 |
| Долен ръб на С, подравнен с долния ръб на D | Y | D.Y + D.Height - C.Height |
 |
| С, центриран хоризонтално спрямо D | X | D.X + (D.Width - C.Width) / 2 |
 |
| С, центриран вертикално спрямо D | Y | D.Y + (D.Height - C.Height) /2 |
 |
| С, позициониран вдясно от D с пролука N | X | D.X + D.Width + N |
 |
| С, позициониран под D с пролука N | Y | D.Y + D.Height + N |
 |
| С запълва пространството между D и десния ръб на родителя | X | D.X + D.Width |
 |
| Ширина | Parent.Width - C.X |
||
| С запълва пространството между D и долния ръб на родителя | Y | D.Y + D.Height |
 |
| Височина | Parent.Height - C.Y |
Йерархично оформление
Докато конструирате екрани, които съдържат повече контроли, ще стане по-удобно (или дори необходимо) да се позиционират контроли по отношение на родителски контрол, а не спрямо екрана или контролния брат. Като организирате контролите си в йерархична структура, можете да направите формулите си по-лесни за писане и поддържане.
Галерии
Ако използвате галерия в приложението си, ще трябва да поставите контроли в шаблона на галерията. Можете да позиционирате тези контроли, като пишете формули, които използват оператор родител, който ще се позовава на шаблона на галерията. Във формулите за контроли в рамките на шаблон на галерията използвайте свойството Parent.TemplateHeight и Parent.TemplateWidth; не използвайте Parent.Width и Parent.Height, които се отнасят до общия размер на галерията.
Контрол на контейнерите
Можете да използвате Контейнер за оформление контрола, като родителски контрол.
Разгледайте примера на заглавка в горната част на екрана. Обичайно е да имате заглавие със заглавие и няколко икони, с които вашите потребители могат да си взаимодействат. Можете да конструирате такова заглавие с помощта на контролата Контейнер, съдържащ контролата етикет и две контроли икона:
Задайте свойствата за тези контроли на тези стойности:
| Свойство | Заглавие | Меню | затваряне | Заглавие |
|---|---|---|---|---|
| X | 0 |
0 |
Parent.Width - Close.Width |
Menu.X + Menu.Width |
| Ш | 0 |
0 |
0 |
0 |
| Ширина | Parent.Width |
Parent.Height |
Parent.Height |
Close.X - Title.X |
| Височина | 64 |
Parent.Height |
Parent.Height |
Parent.Height |
За контролата Заглавие, Parent се отнася до екрана. За останалите Parent се отнася за контролата Заглавие.
След като напишете тези формули, можете да коригирате размера или позицията на контролата Заглавие чрез промяна на формулите за неговите свойства. Размерите и позициите на детските контроли автоматично ще се коригират съответно.
Контроли за контейнери с автооформление
Можете да използвате функция, контролите за контейнер за автоматично оформление , за да оформите автоматично дъщерните компоненти. Тези контейнери определят позицията на дъщерните компоненти, така че никога да не се налага да задавате X, Y за компонент вътре в контейнера. Също така той може да разпредели наличното пространство на своите дъщерни компоненти въз основа на настройките, както и да определя както вертикалното, така и хоризонталното подравняване на дъщерните компоненти. Повече информация: Контроли на контейнери с автооформление
Компоненти
Ако използвате друга функция, наречена "Компоненти", можете да изграждате градивни блокове и да ги използвате повторно в приложението си. Както и контролата Контейнер, контролите, които поставяте в даден компонент, трябва да базират формулите за тяхното положение и размер Parent.Width и Parent.Height, които се отнасят до размера на компонента. Повече информация: Създаване на компонент.
Адаптиране на оформление за размера и ориентацията на устройството
Досега научихте как да използвате формули, за да промените размера на всеки контрол в отговор на наличното пространство, като същевременно поддържате контролите подравнени една спрямо друга. Но може да искате или трябва да направите по-съществени промени в оформлението в отговор на различни размери и ориентации на устройството. Когато например устройството се завърти от ориентация към ориентация към пейзаж, може да искате да преминете от вертикално оформление към хоризонтално. На по-голямо устройство можете да представите повече съдържание или да го пренаредите, за да осигурите по-привлекателно оформление. На по-малко устройство може да се наложи да разделите съдържание на няколко екрана.
Ориентация на устройството
Формулите по подразбиране за свойствата на екрана широчина и височина, както тази тема, описана по-рано, не е задължително да осигурят добро изживяване, ако потребителят завърти устройство. Например приложение, създадено за телефон в портретна ориентация, има DesignWidth от 640 и DesignHeight от 1136. Същото приложение на телефон в пейзажна ориентация ще има следните стойности на свойствата:
- Свойството широчина на екрана е настроено на
Max(App.Width, App.DesignWidth). Широчина (1136) на приложението е по-голямо от неговия DesignWidth (640), така че формулата се оценява на 1136. - Свойството Височина на екрана е настроено на
Max(App.Height, App.DesignHeight). Височина (640) на приложението е по-малко от неговия DesignHeight (1136), така че формулата се оценява на 1136.
С височина от 1136 на екрана и височина на устройството (в тази ориентация) от 640, потребителят трябва да превърта екрана вертикално, за да покаже цялото му съдържание, което може да не е опитът, който искате.
За да адаптирате свойствата широчина и височина на екрана ориентацията на устройството, можете да използвате следните формули:
Ширина = Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight))
Височина = Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))
Тези формули разменят приложенията DesignWidth и DesignHeight стойности въз основа на това дали ширината на устройството е по-малка от височината му (ориентация в портрет) или повече от височината му (пейзажна ориентация).
След като коригирате екрана широчина и височина формули, може също да искате да пренаредите контролите в екрана си, за да използвате по-добре наличното пространство. Например, ако всяка от двете контроли заема половината от екрана, може да ги подредите вертикално в портрет, но да ги подредите една до друга в пейзаж.
Можете да използвате свойството ориентация на екрана да определя дали екранът е ориентиран вертикално или хоризонтално.
Бележка
В пейзажна ориентация, на контролите горе и долу се показват като леви и десни контроли.
| Контрола | Свойство | Формула |
|---|---|---|
| По-високо | X | 0 |
| По-високо | Ш | 0 |
| По-високо | Ширина | If(Parent.Orientation = Layout.Vertical, Parent.Width, Parent.Width / 2) |
| По-високо | Височина | If(Parent.Orientation = Layout.Vertical, Parent.Height / 2, Parent.Height) |
| Lower | X | If(Parent.Orientation = Layout.Vertical, 0, Upper.X + Upper.Width) |
| Lower | Ш | If(Parent.Orientation = Layout.Vertical, Upper.Y + Upper.Height, 0) |
| Lower | Ширина | Parent.Width - Lower.X |
| По-ниско | Височина | Parent.Height - Lower.Y |
Размери на екрана и точки на прекъсване
Можете да коригирате оформлението си въз основа на размера на устройството. Свойството размер на екрана класифицира текущия размер на устройството. Размерът е положително цяло число; типът ScreenSize осигурява име на константи, за да помогне при четене. Тази таблица съдържа константи:
| постоянен | Стойност | Типичен тип устройство (използвайки настройките на приложението по подразбиране) |
|---|---|---|
| ScreenSize.Small | 1 | Телефонен номер |
| ScreenSize.Medium | 2 | Таблетка, държана вертикално |
| ScreenSize.Large | 3 | Таблет, държан хоризонтално |
| ScreenSize.ExtraLarge | 4 | Настолен компютър |
Използвайте тези размери, за да вземате решения относно оформлението на приложението си. Например, ако искате контролът да бъде скрит на устройство с размер на телефона, но видимо по друг начин, можете да зададете свойството видимо на контролата на тази формула:
Parent.Size >= ScreenSize.Medium
Тази формула се оценява на вярно, когато размерът е среден или по-голям и невярно в противен случай.
Ако искате даден елемент заема различна част от ширината на екрана въз основа на размера на екрана, задайте свойството широчина на контролата на тази формула:
Parent.Width *
Switch(
Parent.Size,
ScreenSize.Small, 0.5,
ScreenSize.Medium, 0.3,
0.25
)
Тази формула задава ширината на контрола до половината от ширината на екрана на малък екран, три десети от ширината на средния екран и една четвърт от ширината на екрана на всички останали екрани.
Персонализирани точки за прекъсване
Свойството размер на контролата се изчислява чрез сравняване на свойството широчина на екрана към стойностите в свойството SizeBreakpoints на приложението. Това свойство представлява таблица с числа в една колона, която показва точките на прекъсване на ширината, които разделят имената на размерите на екрана:
В приложение, създадено за таблет или мрежа, стойността по подразбиране в тази на свойството SizeBreakpoints на приложението са [600, 900, 1200]. В приложение, създадено за телефони, стойността е [1200, 1800, 2400]. (Стойностите за приложенията за телефон се удвояват, защото такива приложения използват координати, които ефективно удвояват координатите, използвани в други приложения.)
Можете да персонализирате точките на прекъсване на приложението си, като промените стойностите в свойството SizeBreakpoints на приложението. Изберете Приложение в изглед на дърво изберете SizeBreakpoints в списъка със свойствата и след това редактирайте стойностите в лентата с формули. Можете да създадете толкова точки на прекъсване, колкото е необходимо на приложението ви, но само размерите от 1 до 4 съответстват на посочените размери на екрана. Във формулите можете да се обърнете към размери извън ExtraLarge според техните числови стойности (5, 6 и т.н.).
Можете също да посочите по-малко точки на прекъсване. Например, приложението ви може да се нуждае от само три размера (две точки на прекъсване), така че възможните размери на екрана ще бъдат малки, средни и големи.
Известни ограничения
Платното за авторство не отговаря на създадените формули за оразмеряване. За да тествате отзивчиво поведение, запазете и публикуйте приложението си и след това го отворете на устройства или в прозорци на браузъра с различни размери и ориентации.
Ако пишете изрази или формули в свойството х, Y, широчина и височина на контрола, ще презапишете тези изрази или формули, ако по-късно преместите контрола до друго място или преоразмерите контрола, като плъзнете неговата граница.
Бележка
Можете ли да ни споделите повече за езиковите си предпочитания за документацията? Попълнете кратко проучване. (имайте предвид, че това проучване е на английски език)
Проучването ще отнеме около седем минути. Не се събират лични данни (декларация за поверителност).
Обратна връзка
Очаквайте скоро: През цялата 2024 г. постепенно ще отстраняваме проблемите в GitHub като механизъм за обратна връзка за съдържание и ще го заменим с нова система за обратна връзка. За повече информация вижте: https://aka.ms/ContentUserFeedback.
Подаване и преглед на обратна връзка за