FlexLayout

Przeglądaj przykład. Przeglądanie przykładu

.NET MAUI FlexLayout.

Wieloplatformowy interfejs użytkownika aplikacji platformy .NET (.NET MAUI) FlexLayout to układ, który umożliwia rozmieszczenie elementów podrzędnych poziomo i pionowo w stosie oraz owijanie elementów podrzędnych, jeśli jest ich zbyt wiele, aby zmieścić się w jednym wierszu lub kolumnie. Ponadto FlexLayout może kontrolować orientację i wyrównanie oraz dostosowywać się do różnych rozmiarów ekranu. FlexLayout jest oparty na module elastycznego układu ramek kaskadowych (CSS).

Klasa FlexLayout definiuje następujące właściwości:

  • AlignContent, typu FlexAlignContent, który określa, w jaki sposób silnik rozmieszczenia rozdzieli przestrzeń między i wokół elementami podrzędnymi, które zostały ułożone na wielu wierszach. Wartość domyślna tej właściwości to Stretch. Aby uzyskać więcej informacji, zobacz AlignContent.
  • AlignItems, typu FlexAlignItems, który wskazuje, w jaki sposób mechanizm układu rozdzieli przestrzeń między i wokół elementów podrzędnych wzdłuż osi krzyżowej. Wartość domyślna tej właściwości to Stretch. Aby uzyskać więcej informacji, zobacz AlignItems.
  • Direction, typu FlexDirection, który określa kierunek i główną oś elementów podrzędnych. Wartość domyślna tej właściwości to Row. Aby uzyskać więcej informacji, zobacz Kierunek.
  • JustifyContent, typu FlexJustify, który określa rozkład przestrzeni między elementami podrzędnymi i wokół nich wzdłuż osi głównej. Wartość domyślna tej właściwości to Start. Aby uzyskać więcej informacji, zobacz JustifyContent.
  • Position, typu FlexPosition, który określa, czy pozycja elementów podrzędnych jest względem siebie, czy przy użyciu wartości stałych. Wartość domyślna tej właściwości to Relative.
  • Wrap, typu FlexWrap, który określa, czy elementy podrzędne są rozmieszczone w jednym wierszu, czy w wielu wierszach. Wartość domyślna tej właściwości to NoWrap. Aby uzyskać więcej informacji, zobacz Zawijanie.
  • AlignSelf, typu FlexAlignSelf, który jest dołączoną właściwością wskazującą, w jaki sposób silnik układu rozdzieli przestrzeń między i wokół elementów podrzędnych dla danego elementu podrzędnego wzdłuż osi krzyżowej. Wartość domyślna tej właściwości to Auto. Aby uzyskać więcej informacji, zobacz AlignSelf.
  • Basis, typu FlexBasis, który jest dołączoną właściwością, która definiuje początkowy główny rozmiar elementu podrzędnego przed rozłożeniem wolnego miejsca zgodnie z innymi wartościami właściwości. Wartość domyślna tej właściwości to Auto. Aby uzyskać więcej informacji, zobacz Podstawy.
  • Grow, typu float, to dołączona właściwość, która określa ilość dostępnego miejsca, jakiego element podrzędny powinien używać wzdłuż osi głównej. Wartość domyślna tej właściwości to 0,0. Wywołanie zwrotne weryfikacji gwarantuje, że po ustawieniu właściwości jego wartość jest większa lub równa 0. Aby uzyskać więcej informacji, zobacz Zwiększanie.
  • Order, typu int, to właściwość dołączana, która określa, czy element podrzędny powinien być ułożony przed innymi elementami podrzędnymi w kontenerze, czy po nich. Wartość domyślna tej właściwości to 0. Aby uzyskać więcej informacji, zobacz Order (Zamówienie).
  • Shrink, typu float, który jest dołączoną właściwością, kontrolującą sposób zmniejszania dziecka, tak żeby wszystkie dzieci mogły zmieścić się wewnątrz kontenera. Wartość domyślna tej właściwości to 1.0. Wywołanie zwrotne weryfikacji gwarantuje, że po ustawieniu właściwości jego wartość jest większa lub równa 0. Aby uzyskać więcej informacji, zobacz Zmniejszanie.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że właściwości mogą być obiektami docelowymi powiązań danych i stylizowanymi.

Ważna

Gdy elementy w FlexLayout obiekcie są rozmieszczone w kolumnie, FlexLayout ma pionową oś główną i poziomą oś krzyżową. Gdy elementy w obiekcie FlexLayout są rozmieszczone w wierszu, FlexLayoutma poziomą oś główną i pionową oś krzyżową.

FlexLayout i jego elementy podrzędne mogą być częściowo stylowane przy użyciu kaskadowych arkuszy stylów (CSS). Aby uzyskać więcej informacji, zobacz Styleing apps using Cascading Style Sheets (CSS)( Tworzenie stylów przy użyciu kaskadowych arkuszy stylów (CSS).

Orientacja i wyrównanie

Właściwości Direction, Wrap, JustifyContent, AlignItems, AlignContent i Position możliwe do powiązania można ustawić na FlexLayout w celu kontrolowania orientacji i wyrównania wszystkich elementów podrzędnych.

Kierunek

Właściwość Direction typu FlexDirectiondefiniuje kierunek i główną oś elementów podrzędnych. Wyliczenie FlexDirection definiuje następujących członków:

  • Column, który wskazuje, że elementy podrzędne powinny być ułożone w pionie.
  • ColumnReverse (lub "column-reverse" w języku XAML), który wskazuje, że elementy podrzędne powinny być ułożone w pionie w odwrotnej kolejności.
  • Row, co wskazuje, że elementy podrzędne powinny być ułożone w poziomie. Jest to wartość domyślna Direction właściwości.
  • RowReverse (lub "row-reverse" w języku XAML), który wskazuje, że elementy podrzędne powinny być ułożone w poziomie w odwrotnej kolejności.

Direction Gdy właściwość jest ustawiona na Column, lub ColumnReverse, główna oś będzie osią y, a elementy zostaną ułożone w pionie. Gdy właściwość Direction jest ustawiona na Row lub RowReverse, główna oś będzie osią x, a elementy podrzędne zostaną ułożone poziomo.

Uwaga / Notatka

W języku XAML można określić wartość tej właściwości, używając nazw członków wyliczenia w małych, wielkich lub mieszanych literach albo dwóch dodatkowych ciągów podanych w nawiasach.

Owijać

Właściwość Wrap typu FlexWrap określa, czy dzieci są ułożone w jednym wierszu, czy w wielu wierszach. Wyliczenie FlexWrap definiuje następujących członków:

  • NoWrap, co wskazuje, że elementy podrzędne są rozmieszczone w jednym wierszu. Jest to wartość domyślna Wrap właściwości.
  • Wrap, który wskazuje, że elementy są układane w wielu wierszach, jeśli to konieczne.
  • Reverse (lub "zawijanie odwrotne" w języku XAML), co wskazuje, że elementy są rozmieszczone w wielu wierszach, jeśli to konieczne, w odwrotnej kolejności.

Gdy właściwość Wrap jest ustawiona na NoWrap, jeżeli oś główna jest ograniczona i nie ma wystarczającej szerokości ani wysokości, aby zmieścić wszystkie elementy podrzędne, FlexLayout próbuje zmniejszyć te elementy. Można kontrolować współczynnik zmniejszania elementów podrzędnych za pomocą dołączonej właściwości wiązanej Shrink.

Wrap Gdy właściwość jest ustawiona na Wrap lub WrapReverse, AlignContent właściwość może służyć do określania sposobu dystrybucji wierszy.

Wyjustujcontent

Właściwość JustifyContent typu FlexJustify określa, jak przestrzeń jest rozkładana między i wokół elementów podrzędnych wzdłuż osi głównej. Wyliczenie FlexJustify definiuje następujących członków:

  • Start (lub "flex-start" w XAML), który wskazuje, że dzieci powinny być wyrównane na początku. Jest to wartość domyślna JustifyContent właściwości.
  • Center, co wskazuje, że dzieci powinny być wyrównane do środka.
  • End (lub "flex-end" w XAML), który wskazuje, że dzieci powinny być wyrównane na końcu.
  • SpaceBetween (lub "space-between" w XAML), który wskazuje, że dzieci powinny być równomiernie rozłożone, z pierwszym dzieckiem na początku i ostatnim dzieckiem na końcu.
  • SpaceAround (lub "space-around" w XAML), który wskazuje, że elementy potomne powinny być równomiernie rozłożone, z pierwszym i ostatnim elementem mającym przestrzeń o połowie szerokości.
  • SpaceEvenly, co wskazuje, że dzieci powinny być równomiernie rozłożone, a wszystkie dzieci mają równe miejsce wokół nich.

WyrównajElementy

Właściwość AlignItems typu FlexAlignItems, wskazuje, w jaki sposób silnik układu rozdzieli przestrzeń między i wokół elementów podrzędnych wzdłuż osi poprzecznej. Wyliczenie FlexAlignItems definiuje następujących członków:

  • Stretch, co oznacza, że dzieci powinny być rozciągnięte. Jest to wartość domyślna właściwości AlignItems.
  • Center, co wskazuje, że dzieci powinny być wyrównane w centrum.
  • Start (lub "flex-start" w XAML), który wskazuje, że dzieci powinny być wyrównane na początku.
  • End (lub "flex-end" w XAML), który wskazuje, że dzieci powinny być wyrównane na końcu.

Jest to jedna z dwóch właściwości wskazujących, jak dzieci są wyrównane na osi poprzecznej. W każdym wierszu elementy podrzędne są rozciągnięte lub wyrównane na początku, w środku lub na końcu każdego elementu.

W przypadku każdego dziecka ustawienie AlignItems może zostać zastąpione powiązaną właściwością dołączoną AlignSelf.

AlignContent

Właściwość AlignContent, typu FlexAlignContent, określa, w jaki sposób aparat układu rozdziela przestrzeń między i wokół elementami podrzędnymi, które zostały rozmieszczone na wielu wierszach. Wyliczenie FlexAlignContent definiuje następujących członków:

  • Stretch, co wskazuje, że dzieci powinny być rozciągnięte. Jest to wartość domyślna AlignContent właściwości.
  • Center, co oznacza, że dzieci powinny być wyrównane względem środka.
  • Start (lub "flex-start" w XAML), który wskazuje, że dzieci powinny być wyrównane na początku.
  • End (lub "flex-end" w XAML), który wskazuje, że dzieci powinny być wyrównane na końcu.
  • SpaceBetween (lub "spacja między" w XAML), który wskazuje, że dzieci powinny być równomiernie rozłożone, a pierwsze dziecko jest na początku i ostatnim dzieckiem jest na końcu.
  • SpaceAround (lub "spacja wokół" w XAML), który wskazuje, że dzieci powinny być równomiernie rozłożone, a przy pierwszym i ostatnim dziecku przestrzeń powinna być o połowę mniejsza.
  • SpaceEvenly, co wskazuje, że dzieci powinny być równomiernie rozłożone, a wszystkie dzieci mają równe miejsce wokół nich.

Właściwość AlignContent nie ma wpływu, gdy istnieje tylko jeden wiersz lub kolumna.

Wyrównanie i rozmiarowanie elementów podrzędnych

Właściwości dołączone do elementów AlignSelf, Order, Basis, Grow i Shrink można ustawić dla elementów podrzędnych FlexLayout w celu kontroli orientacji, wyrównania i ustalania rozmiaru dziecka.

Wyrównaj siebie

Właściwość AlignSelf typu FlexAlignSelf wskazuje, w jaki sposób silnik układu rozdzieli przestrzeń między i wokół elementów podrzędnych dla określonego elementu wzdłuż osi poprzecznej. Wyliczenie FlexAlignSelf definiuje następujących członków:

  • Auto, który wskazuje, że element podrzędny powinien być wyrównany zgodnie z wartością wyrównania elementu nadrzędnego. Jest to wartość domyślna AlignSelf właściwości.
  • Stretch, który wskazuje, że dziecko powinno zostać rozciągnięte.
  • Center, który wskazuje, że element podrzędny powinien być wyrównany wzdłuż środka.
  • Start (lub "flex-start" w XAML), który wskazuje, że dziecko powinno być wyrównane na początku.
  • End (lub "flex-end" w języku XAML), wskazuje, że element podrzędny powinien być wyrównany do końca.

Dla każdego pojedynczego elementu podrzędnego FlexLayout właściwość ta zastępuje właściwość AlignItems ustawioną na FlexLayout. Domyślne ustawienie Auto oznacza użycie ustawienia AlignItems.

W języku XAML ta właściwość jest ustawiana na elemencie podrzędnym bez żadnego odwołania do elementu FlexLayout nadrzędnego:

<Label FlexLayout.AlignSelf="Center"
       ... />

Równoważny kod języka C# to:

Label label = new Label();
FlexLayout.SetAlignSelf(label, FlexAlignSelf.Center);

Zamówienie

Właściwość Order typu int umożliwia zmianę kolejności rozmieszczania elementów podrzędnych FlexLayout. Wartość domyślna tej właściwości to 0.

Zazwyczaj dzieci są rozmieszczane w kolejności, w której są dodawane do FlexLayout. Tę kolejność można jednak zastąpić, ustawiając tę właściwość na niezerową wartość liczby całkowitej dla jednego lub kilku elementów podrzędnych. Następnie FlexLayout rozmieszcza swoje elementy podrzędne na podstawie ich Order wartości właściwości. Dzieci z tymi samymi Order wartościami właściwości są ustawiane w kolejności dodawania do FlexLayout.

Podstawa

Właściwość Basis typu FlexBasisdefiniuje początkowy rozmiar elementu podrzędnego na osi głównej przed rozłożeniem wolnego miejsca zgodnie z innymi wartościami właściwości. Wartość określona przez tę właściwość to rozmiar wzdłuż głównej osi elementu nadrzędnego FlexLayout. W związku z tym ta właściwość wskazuje szerokość elementu podrzędnego, gdy elementy podrzędne są rozmieszczone w wierszach lub wysokość elementu podrzędnego, gdy elementy podrzędne są rozmieszczone w kolumnach. Ta właściwość jest nazywana podstawą , ponieważ określa rozmiar, który jest podstawą wszystkich kolejnych układów.

Typ FlexBasis jest strukturą, która umożliwia określenie rozmiaru w jednostkach niezależnych od urządzenia lub jako procent rozmiaru FlexLayoutelementu . Domyślna wartość właściwości Basis to Auto, co oznacza, że jest używana żądana szerokość lub wysokość elementu podrzędnego.

W języku XAML można użyć liczby dla rozmiaru w jednostkach niezależnych od urządzenia:

<Label FlexLayout.Basis="40"
       ... />

Równoważny kod języka C# to:

FlexLayout.SetBasis(label, 40);

W języku XAML można określić wartość procentową w następujący sposób:

<Label FlexLayout.Basis="25%"
       ... />

Równoważny kod języka C# to:

FlexLayout.SetBasis(label, new FlexBasis(0.25f, true));

Pierwszym argumentem konstruktora FlexBasis jest wartość ułamkowa float , która musi należeć do zakresu od 0 do 1. Drugi argument wskazuje, że rozmiar jest względny, a nie bezwzględny.

Rosnąć

Właściwość Grow typu floatokreśla ilość dostępnego miejsca, które dziecko powinno używać na osi głównej. Wartość domyślna tej właściwości to 0,0, a jej wartość musi być większa lub równa 0.

Właściwość Grow jest używana, gdy właściwość Wrap jest ustawiona na wartość NoWrap, a wiersz dzieci ma całkowitą szerokość mniejszą niż szerokość FlexLayout, lub kolumna dzieci ma krótszą wysokość niż FlexLayout. Właściwość Grow wskazuje sposób rozdzielania spacji między elementami podrzędnymi. Jeśli pojedyncze dziecko otrzymuje wartość dodatnią Grow , to to dziecko zajmuje całe pozostałe miejsce. Alternatywnie, pozostałe miejsce można również przydzielić między dwoje lub więcej dzieci.

Shrink

Właściwość Shrink, typu float, określa sposób zmniejszania elementu podrzędnego tak, aby wszystkie elementy podrzędne mogły zmieścić się w kontenerze. Wartość domyślna tej właściwości to 1,0, a jej wartość musi być większa lub równa 0.

Właściwość Shrink jest używana, gdy właściwość Wrap jest ustawiona na NoWrap, a zagregowana szerokość wiersza elementów podrzędnych jest większa niż szerokość FlexLayout, lub łączna wysokość pojedynczej kolumny elementów podrzędnych jest większa niż wysokość FlexLayout. Zwykle FlexLayout wyświetla te elementy podrzędne, ograniczając ich rozmiary. Właściwość Shrink może wskazywać, które dzieci są priorytetowo wyświetlane w pełnych rozmiarach.

Wskazówka

Wartości Grow i Shrink można ustawić tak, aby uwzględniać sytuacje, w których łączna wielkość elementów podrzędnych może być czasami mniejsza lub większa od rozmiaru FlexLayout elementu.

Examples

W poniższych przykładach pokazano typowe zastosowania programu FlexLayout.

Stos

Element FlexLayout może zastąpić element :StackLayout

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutDemos.Views.SimpleStackPage"
             Title="Simple Stack">    
    <FlexLayout Direction="Column"
                AlignItems="Center"
                JustifyContent="SpaceEvenly">        
        <Label Text="FlexLayout in Action"
               FontSize="18" />
        <Image Source="dotnet_bot_branded.png"
               HeightRequest="300" />
        <Button Text="Do-Nothing Button" />
        <Label Text="Another Label" />
    </FlexLayout>
</ContentPage>

W tym przykładzie właściwość Direction jest ustawiona na Column, co powoduje, że elementy podrzędne FlexLayout są rozmieszczone w jednej kolumnie. Właściwość AlignItems jest ustawiona na Center, co powoduje, że każde dziecko jest wyśrodkowane w poziomie. Właściwość JustifyContent jest ustawiona do SpaceEvenly, co umożliwia przydzielenie wszystkich pozostałych pionowych miejsc równo między wszystkimi elementami podrzędnymi, nad pierwszym elementem i pod ostatnim elementem podrzędnym.

Zorientowany w pionie .NET MAUI FlexLayout.

Uwaga / Notatka

Dołączona właściwość AlignSelf może być użyta do nadpisania właściwości AlignItems dla określonego elementu podrzędnego.

Zawiń elementy

Element FlexLayout może zawijać elementy podrzędne w dodatkowe wiersze lub kolumny.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutDemos.Views.PhotoWrappingPage"
             Title="Photo Wrapping">
    <Grid>
        <ScrollView>
            <FlexLayout x:Name="flexLayout"
                        Wrap="Wrap"
                        JustifyContent="SpaceAround" />
        </ScrollView>
        ...
    </Grid>
</ContentPage>

W tym przykładzie właściwość Direction elementu FlexLayout nie jest ustawiona, dlatego ma domyślne ustawienie Row, co oznacza, że dzieci są rozmieszczone w wierszach, a oś główna jest pozioma. Właściwość jest ustawiona Wrap na Wrap, co powoduje zawijanie elementów podrzędnych do następnego wiersza, jeśli istnieje zbyt wiele elementów podrzędnych, aby zmieścić się w wierszu. Właściwość JustifyContent jest ustawiona na SpaceAround, co przydziela całe pozostałe miejsce na osi głównej, tak aby każdy element był otoczony taką samą ilością przestrzeni.

Poziome zawijanie w .NET MAUI FlexLayout.

W tym przykładzie plik code-behind pobiera kolekcję zdjęć i dodaje je do FlexLayout.

Ponadto element FlexLayout jest elementem podrzędnym elementu ScrollView. W związku z tym, jeśli na stronie jest zbyt wiele wierszy, aby się zmieściły, ScrollView ma domyślną właściwość OrientationVertical i umożliwia przewijanie w pionie.

Układ strony

Istnieje standardowy układ w projekcie internetowym nazywany świętym graalem , ponieważ jest to format układu, który jest bardzo pożądany, ale często trudno sobie zdać sprawę z doskonałością. Układ składa się z nagłówka w górnej części strony i stopki u dołu, która rozciąga się na pełną szerokość strony. Główna zawartość zajmuje środek strony, ale często z menu kolumnowym po lewej stronie zawartości i dodatkową informacją (czasami nazywaną obszarem bocznym) po prawej stronie. Ten układ można zrealizować za pomocą polecenia FlexLayout.

Poniższy przykład przedstawia implementację tego układu przy użyciu elementu FlexLayout, zagnieżdżonego w innym elemencie.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutDemos.Views.HolyGrailLayoutPage"
             Title="Holy Grail Layout">

    <FlexLayout Direction="Column">

        <!-- Header -->
        <Label Text="HEADER"
               FontSize="18"
               BackgroundColor="Aqua"
               HorizontalTextAlignment="Center" />

        <!-- Body -->
        <FlexLayout FlexLayout.Grow="1">

            <!-- Content -->
            <Label Text="CONTENT"
                   FontSize="18"
                   BackgroundColor="Gray"
                   HorizontalTextAlignment="Center"
                   VerticalTextAlignment="Center"
                   FlexLayout.Grow="1" />

            <!-- Navigation items-->
            <BoxView FlexLayout.Basis="50"
                     FlexLayout.Order="-1"
                     Color="Blue" />

            <!-- Aside items -->
            <BoxView FlexLayout.Basis="50"
                     Color="Green" />

        </FlexLayout>

        <!-- Footer -->
        <Label Text="FOOTER"
               FontSize="18"
               BackgroundColor="Pink"
               HorizontalTextAlignment="Center" />
    </FlexLayout>
</ContentPage>

Obszary nawigacyjne i boczne są renderowane z użyciem BoxView po lewej i prawej. FlexLayout Pierwsza ma pionową oś główną i zawiera trzy elementy podrzędne rozmieszczone w kolumnie. Są to nagłówek, treść strony i stopka. Zagnieżdżony FlexLayout ma poziomą oś główną z trzema elementami podrzędnymi rozmieszczonymi w wierszu:

Układ Świętego Graala z platformą .NET MAUI FlexLayout.

W tym przykładzie właściwość Order jest ustawiona na pierwszy BoxView z wartością mniejszą niż jego elementy równorzędne, aby pojawiał się jako pierwszy element w wierszu. Właściwość Basis jest ustawiana na obu BoxView obiektach, aby zapewnić im szerokość 50 jednostek niezależnych od urządzenia. Właściwość Grow jest ustawiona na zagnieżdżonym FlexLayout, aby wskazać, że ten FlexLayout powinien zajmować całą nieużywaną przestrzeń pionową w obrębie zewnętrznego FlexLayout obiektu. Ponadto dla Grow właściwość jest ustawiana w Label, który reprezentuje zawartość, aby wskazać, że ta zawartość ma zajmować całą nieużytą przestrzeń poziomą w zagnieżdżonym FlexLayout obiekcie.

Uwaga / Notatka

Istnieje również właściwość Shrink, którą można użyć, gdy rozmiar elementów podrzędnych przekracza rozmiar FlexLayout, ale zawijanie nie jest pożądane.

  • Ostatnia aktualizacja o