Tworzenie układów dynamicznych w aplikacjach kanwy

Przed przystąpieniem do tworzenia aplikacji kanwy w Power Apps należy określić, czy aplikacja ma być dobierana na telefon czy na tablet. Ten wybór określa rozmiar i kształt kanwy, na której utworzysz aplikację.

Po podjęciu tego wyboru możesz dokonać kilku dodatkowych wyborów, jeśli wybierzesz pozycję Ustawienia>Wyświetl. Użytkownik może wybrać orientację poziomą lub pionową, a także rozmiar ekranu (tylko tablet). Możesz również zablokować lub odblokować współczynnik proporcji i obsługiwać rotację urządzenia (lub nie).

Te opcje są oparte na każdym innym wyborze, który dokonujesz podczas projektowania układów ekranu. Jeśli aplikacja działa na urządzeniu o innym rozmiarze lub w Internecie, cały układ jest skalowany w celu dopasowania do ekranu, na którym działa aplikacja. Jeśli aplikacja zaprojektowana dla telefonu jest uruchamiana na przykład w dużym oknie przeglądarki, aplikacja skaluje się, tak aby skompensować ten rozmiar i wygląda na powiększoną. Aplikacja nie może korzystać z dodatkowych pikseli, wyświetlając więcej kontrolek lub więcej zawartości.

Jeśli tworzysz układ dynamiczny, kontrolki mogą reagować na różne urządzenia lub rozmiary okien, dzięki czemu różne środowiska czują się bardziej naturalne. Aby uzyskać responsywny układ, dostosuj niektóre ustawienia i pisz wyrażenia w całej aplikacji.

Włączanie skalowania w celu dopasowania

Każdy ekran można skonfigurować tak, aby jego układ był dostosowywany do rzeczywistego miejsca, w którym aplikacja jest uruchomiona.

Uruchamiasz responsywność, wyłączając domyślnie włączone ustawienie Skalowanie do dopasowania aplikacji. Po wyłączeniu tego ustawienia wyłączysz również opcję Zablokuj współczynnik proporcji , ponieważ nie projektujesz już określonego kształtu ekranu. (Nadal możesz określić, czy aplikacja obsługuje rotację urządzeń).

Aby aplikacja reagowała, musisz wykonać dodatkowe kroki, ale ta zmiana jest pierwszym krokiem w kierunku zapewniania możliwości reakcji.

Omówienie wymiarów aplikacji i ekranu

Aby układy aplikacji odpowiadały na zmiany wymiarów ekranu, napiszesz formuły korzystające z właściwości Width i Height ekranu. Aby wyświetlić te właściwości, otwórz aplikację w programie Power Apps Studio, a następnie wybierz ekran. Domyślne formuły dla tych właściwości są wyświetlane na karcie Zaawansowane w okienku po prawej stronie.

Szerokość = Max(App.Width, App.DesignWidth)

Wysokość = Max(App.Height, App.DesignHeight)

Te formuły odnoszą się do właściwości Width, Height, DesignWidth i DesignHeight aplikacji. Właściwości Width i Height aplikacji odpowiadają wymiarom urządzenia lub okna przeglądarki, w którym aplikacja jest uruchomiona. Jeśli użytkownik zmienia rozmiar okna przeglądarki (lub obraca urządzenie, jeśli wyłączono orientację Blokada), wartości tych właściwości zmieniają się dynamicznie. Formuły we właściwościach Width i Height na ekranie są ponownie oceniane po zmianie tych wartości.

Właściwości DesignWidth i DesignHeight pochodzą z wymiarów, które są określone w okienku Wyświetlanieustawień. Jeśli na przykład zostanie wybrany układ telefoniczny z orientacją pionową, DesignWidth wynosi 640, a DesignHeight wynosi 1136.

Ponieważ są one używane w formułach dla właściwości Width i Height ekranu, można myśleć o DesignWidth i DesignHeight jako minimalnych wymiarach, dla których projektujesz aplikację. Jeśli rzeczywisty obszar dostępny dla aplikacji jest jeszcze mniejszy niż te minimalne wymiary, formuły właściwości Szerokość i Wysokość ekranu zapewniają, że ich wartości nie staną się mniejsze niż minimum. W takim przypadku użytkownik musi przewinąć, aby wyświetlić całą zawartość ekranu.

Po ustawieniu właściwości aplikacji DesignWidth i DesignHeight nie trzeba (w większości przypadków) zmieniać domyślnych formuł dla atrybutów Width i Height każdego ekranu. W dalszej części tego tematu omówiono przypadki, w których można dostosować te formuły.

Używanie formuł dla układu dynamicznego

Aby utworzyć dynamiczny projekt, należy zlokalizować i rozmieścić każdą kontrolkę przy użyciu formuł zamiast wartości współrzędnych bezwzględnych (stałych). Te formuły wyrażają położenie i rozmiar każdej kontrolki pod względem ogólnego rozmiaru ekranu lub względem innych kontrolek na ekranie.

W najprostszym przypadku jedna kontrolka wypełnia cały ekran. Aby utworzyć ten efekt, ustaw właściwości kontrolki na następujące wartości:

Te formuły używają operatora Parent. Aby kontrolka była umieszczona bezpośrednio na ekranie, Nadrzędny odnosi się do ekranu. Przy użyciu tych wartości właściwości kontrolka jest wyświetlana w lewym górnym rogu ekranu (0, 0) i ma taką samą szerokość i wysokość , jak na ekranie.

W dalszej części tego tematu zastosujesz te zasady (i operator nadrzędny) do umieszczania kontrolek wewnątrz innych kontenerów, takich jak galerie, kontrolki grupowe i komponenty.

Alternatywnie kontrolka może wypełnić tylko górną połowę ekranu. Aby utworzyć ten efekt, ustaw właściwość Height na Parent.Height /2 i pozostaw pozostałe formuły bez zmian.

Jeśli chcesz, aby druga kontrolka wypełniła dolną połowę tego samego ekranu, możesz wykonać co najmniej dwa inne podejścia do konstruowania formuł. Dla uproszczenia możesz użyć następującego podejścia:

Ta konfiguracja umożliwiłaby osiągnięcie żądanego efektu, ale trzeba będzie edytować każdą formułę, jeśli zmienisz zdanie na temat względnych rozmiarów kontrolek. Na przykład możesz zdecydować, że górna kontrolka powinna zajmować tylko jedną trzecią górnej części ekranu, a dolna kontrolka wypełnia dolną dwie trzecie.

Aby utworzyć ten efekt, należy zaktualizować właściwość Height kontrolki Upper oraz właściwości Y i Height kontrolki Lower . Zamiast tego rozważ napisanie formuł dla kontrolki Lower pod względem górnej kontrolki (i samej), jak w tym przykładzie:

Po utworzeniu tych formuł wystarczy zmienić właściwość Height kontrolki Upper , aby wyrazić inny ułamek wysokości ekranu. Kontrolka Dolna automatycznie przenosi i zmienia rozmiar, aby uwzględnić zmianę.

Te wzorce formuł umożliwiają wyrażanie typowych relacji układu między kontrolką o nazwie C i jej kontrolką nadrzędną lub równorzędną o nazwie D.

Relacja między C a jej elementem nadrzędnym	Majątek	Formula	Ilustracja
C wypełnia szerokość elementu nadrzędnego, pozostawiając margines N	X	N
	Szerokość	Parent.Width - (N * 2)
C powoduje wypełnienie wysokości elementu nadrzędnego z marginesem N	Y	N
	Wysokość	Parent.Height - (N * 2)
C wyrównuje do prawej krawędzi obiektu nadrzędnego z marginesem N	X	Parent.Width - (C.Width + N)
C wyrównany do dolnej krawędzi elementu nadrzędnego z marginesem N	Y	Parent.Height - (C.Height + N)
C wyśrodkowuje w poziomie względem elementu nadrzędnego	X	(Parent.Width - C.Width) / 2
C wyśrodkowuje w pionie względem elementu nadrzędnego	Y	(Parent.Height - C.Height) / 2

Relacja między C i D	Majątek	Formula	Ilustracja
C jest wyrównany do poziomu z D i ma taką samą szerokość jak D	X	D.X
	Szerokość	D.Width
C wyrównany pionowo z D i ma tę samą wysokość co D	Y	D.Y
	Wysokość	D.Height
Prawa krawędź C wyrównana do prawej krawędzi D	X	D.X + D.Width - C.Width
Dolna krawędź C wyrównana z dolną krawędzią D	Y	D.Y + D.Height - C.Height
C wyśrodkowany w poziomie względem D	X	D.X + (D.Width - C.Width) / 2
C wyśrodkowany w pionie względem D	Y	D.Y + (D.Height - C.Height) /2
C umieszczony po prawej stronie D ze szczeliną N	X	D.X + D.Width + N
C umieszczony poniżej D ze szczeliną N	Y	D.Y + D.Height + N
C wypełnia przestrzeń między D a prawą krawędzią elementu nadrzędnego	X	D.X + D.Width
	Szerokość	Parent.Width - C.X
C wypełnia spację między D a dolną krawędzią elementu nadrzędnego	Y	D.Y + D.Height
	Wysokość	Parent.Height - C.Y

Układ hierarchiczny

Podczas konstruowania ekranów zawierających więcej kontrolek będzie on wygodniejszy (lub nawet niezbędny) do pozycjonowania elementów sterujących względem formantu nadrzędnego, a nie względem ekranu lub formantu siostrzanego. Organizując kontrolki w strukturę hierarchiczną, możesz ułatwić pisanie i konserwowanie formuł.

Galleries

Jeśli używasz galerii w aplikacji, musisz określić kontrolki w szablonie galerii. Te kontrolki można pozycjonować, pisząc formuły używające operatora Parent, który będzie odwoływał się do szablonu galerii. W formułach kontrolek w szablonie galerii użyj właściwości Parent.TemplateHeight i Parent.TemplateWidth ; Nie używaj elementów Parent.Width i Parent.Height, które odnoszą się do ogólnego rozmiaru galerii.

Kontrolka kontenera

Możesz użyć kontrolki Układ kontenera, jako kontrolki nadrzędnej.

Rozważmy przykład nagłówka w górnej części ekranu. Często nagłówek ma tytuł i kilka ikon, z którymi użytkownicy mogą korzystać. Taki nagłówek można skonstruować przy użyciu kontrolki Kontener , zawierającej kontrolkę Etykieta i dwie kontrolki Ikona :

Ustaw właściwości tych kontrolek na następujące wartości:

W przypadku kontrolki Nagłówek, Parent odwołuje się do ekranu. W przypadku innych Parent odwołuje się do kontrolki Nagłówek .

Po zapisaniu tych formuł można dostosować rozmiar lub położenie kontrolki Nagłówek , zmieniając formuły dla jej właściwości. Rozmiary i pozycje elementów sterujących elementami podrzędnymi będą automatycznie dostosowywane.

Automatycznie kontroluj kontenery w układach

Można użyć funkcji, które automatycznie kontrolują układ w celu ułożenia komponentów podrzędnych. Te kontenery określają położenie składników podrzędnych, tak aby nie trzeba było ustawiać wartości X, Y dla składnika wewnątrz kontenera. Rozmieszczają też dostępne miejsce w obrębie jego składników podrzędnych w zależności od ustawień, a także określają sposób wyrównania składników podrzędnych. Więcej informacji: Kontrolki automatycznego układu kontenera

Components

Jeśli używasz innej funkcji o nazwie Components, możesz tworzyć bloki konstrukcyjne i używać ich ponownie w całej aplikacji. Podobnie jak w przypadku kontrolki Kontener, kontrolki umieszczone w składniku powinny opierać się w ich położeniu i formułach rozmiaru na Parent.Width i Parent.Height, które odnoszą się do rozmiaru składnika. Więcej informacji: Tworzenie składnika.

Dostosowywanie układu dla rozmiaru i orientacji urządzenia

Użytkownik dowie się, jak używać formuł do zmiany rozmiaru poszczególnych kontrolek w odpowiedzi na dostępne miejsce, jednocześnie zachowując wyrównywanie kontrolek względem siebie. Może jednak być konieczne wprowadzenie bardziej znaczących zmian układu w odpowiedzi na różne rozmiary i orientacje urządzeń. Jeśli urządzenie jest obrócone z pionowej orientacji do poziomej, można zmienić układ pionowy na taki, który ma zostać przełączony na poziomy. Na większym urządzeniu można przedstawić więcej zawartości lub zmienić jej rozmieszczenie, aby zapewnić bardziej atrakcyjny układ. Na mniejszym urządzeniu może być konieczne podzielenie zawartości na wiele ekranów.

Orientacja urządzenia

Jak opisano wcześniej, domyślne formuły właściwości Width i Height ekranu mogą nie zapewniać dobrego wrażenia, jeśli użytkownik obraca urządzenie. Na przykład aplikacja przeznaczona dla telefonu w orientacji pionowej ma DesignWidth o wartości 640 i DesignHeight o wartości 1136. Ta sama aplikacja na telefonie w orientacji poziomej będzie mieć następujące wartości właściwości:

• Właściwość Width ekranu jest ustawiona na Max(App.Width, App.DesignWidth). Szerokość aplikacji (1136) jest większa niż jej wartość DesignWidth (640), więc formuła daje wartość 1136.
• Właściwość Height ekranu jest ustawiona na Max(App.Height, App.DesignHeight). Wysokość aplikacji (640) jest mniejsza niż jej DesignHeight (1136), więc wynik obliczeń to 1136.

Jeśli Wysokość ekranu wynosi 1136 i wysokość urządzenia (w tej orientacji) wynosi 640, użytkownik musi przewijać ekran w pionie w celu wyświetlenia całej jego zawartości, która może nie być pożądana.

Aby dostosować właściwości Width i Height ekranu do orientacji urządzenia, możesz użyć następujących formuł:

Szerokość = Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight))

Wysokość = Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))

Te formuły zamieniają wartości DesignWidth i DesignHeight aplikacji na podstawie tego, czy szerokość urządzenia jest mniejsza niż jego wysokość (orientacja pionowa) lub większa niż wysokość (orientacja pozioma).

Po dostosowaniu formuł szerokości i wysokości ekranu możesz również zmienić kolejność kontrolek na ekranie, aby lepiej wykorzystać dostępne miejsce. Na przykład, jeśli każda z dwóch kontrolek zajmuje połowę ekranu, można je układać pionowo w trybie portretowym, ale rozmieszczać je obok siebie w orientacji poziomej.

Możesz użyć właściwości Orientacja ekranu, aby określić, czy ekran jest zorientowany w pionie, czy w poziomie.

Rozmiary ekranu i punkty przerwania

Układ można dostosować na podstawie rozmiaru urządzenia. Właściwość Size ekranu klasyfikuje bieżący rozmiar urządzenia. Rozmiar jest dodatnią liczbą całkowitą; Typ ScreenSize zawiera nazwane stałe, które ułatwiają odczytywanie treści. W tej tabeli wymieniono stałe:

Użyj tych rozmiarów, aby podejmować decyzje dotyczące układu aplikacji. Jeśli na przykład chcesz, aby kontrolka była ukryta na urządzeniu o rozmiarze telefonu, ale jest widoczna w przeciwnym razie, możesz ustawić właściwość Visible kontrolki na następującą formułę:

Parent.Size >= ScreenSize.Medium

Ta formuła zwraca prawdę, gdy rozmiar jest średni lub większy, a w przeciwnym razie fałsz.

Jeśli chcesz, aby kontrolka zajmowała inny ułamek szerokości ekranu na podstawie rozmiaru ekranu, ustaw właściwość Width kontrolki na następującą formułę:

Parent.Width *
Switch(
    Parent.Size,
    ScreenSize.Small, 0.5,
    ScreenSize.Medium, 0.3,
    0.25
)

Ta formuła ustawia szerokość kontrolki na połowę szerokości ekranu na małym ekranie, trzy dziesiąte szerokości ekranu na średnim ekranie i jedną czwartą szerokości ekranu na wszystkich innych ekranach.

Niestandardowe punkty przerwania

Właściwość Size ekranu jest obliczana przez porównanie właściwości Width ekranu z wartościami właściwości SizeBreakpoints aplikacji. Ta właściwość to jednokolumna tabela liczb wskazująca punkty przerwania szerokości oddzielające nazwane rozmiary ekranu:

W aplikacji utworzonej dla tabletu lub sieci Web wartość domyślna właściwości SizeBreakpoints aplikacji to [600, 900, 1200]. W aplikacji utworzonej dla telefonów wartość to [1200, 1800, 2400]. (Wartości dla aplikacji na telefony są podwojone, ponieważ aplikacje używają współrzędnych, które są efektywnie podwojone w stosunku do współrzędnych używanych w innych aplikacjach).

Punkty przerwania aplikacji można dostosować, zmieniając wartości we właściwości SizeBreakpoints aplikacji. Wybierz pozycję Aplikacja w widoku drzewa, wybierz pozycję SizeBreakpoints na liście właściwości, a następnie edytuj wartości na pasku formuły. Możesz utworzyć dowolną liczbę punktów przerwania, ale rozmiary od 1 do 4 odpowiadają nazwanym rozmiarom ekranu. W formułach można odwoływać się do rozmiarów poza EkstraLarge według ich wartości liczbowych (5, 6 itd.).

Można również określić mniej punktów przerwania. Na przykład aplikacja może potrzebować tylko trzech rozmiarów (dwóch punktów przerwania), więc możliwe rozmiary ekranu będą małe, średnie i duże.

Znane ograniczenia

Kanwa autorska nie reaguje na utworzone formuły rozmiarowe. Aby przetestować zachowanie dynamiczne, zapisz i opublikuj aplikację, a następnie otwórz ją na urządzeniach lub w oknach przeglądarki o różnych rozmiarach i orientacjach.

Jeśli napiszesz wyrażenia lub formuły we właściwościach X, Y, Width i Height kontrolki, zastąpisz te wyrażenia lub formuły, jeśli później przeciągniesz kontrolkę do innej lokalizacji lub zmień rozmiar kontrolki, przeciągając jej obramowanie.