Xamarin.FormsObjektLayout

Článek
12/02/2021
20 min ke čtení

Ke skládání nebo zabalení kolekce podřízených zobrazení použijte ObjektLayout.

je Xamarin.FormsFlexLayout novinka ve Xamarin.Forms verzi 3.0. Je založená na modulu CSS Flexible Box Layout,který se běžně označuje jako rozložení jazyka elastic nebo elasticky- takzvaný , protože obsahuje mnoho flexibilních možností uspořádání dětí v rozložení.

FlexLayoutse podobá v , že může uspořádat své děti Xamarin.FormsStackLayout vodorovně a svisle do zásobníku. Je však také schopen zabalit své děti, pokud je jich příliš mnoho, aby se vešly do jednoho řádku nebo sloupce, a má také mnoho možností pro orientaci, zarovnání a přizpůsobení různým velikostem FlexLayout obrazovky.

FlexLayoutje odvozen z Layout<View> a dědí Xamarin_Forms FlexLayout _Layout_1_Children" data-linktype="absolute-path">Children vlastnosti typu IList<View> .

FlexLayout definuje šest veřejných vázání vlastností a pět připojených vlastností s možností vazby, které mají vliv na velikost, orientaci a zarovnání podřízených prvků. (Pokud nejste obeznámeni s připojenými vlastnostmi s možností vazby, podívejte se na článek Připojené vlastnosti.) Tyto vlastnosti jsou podrobně popsány v částech níže v části Vlastnosti s možností vazby podrobně a Připojené vázání vlastností podrobně. Tento článek ale začíná oddílem o některých běžných scénářích použití , který popisuje mnoho z těchto vlastností neformálněji. Na konci článku uvidíte, jak zkombinovat šablonu FlexLayout stylů CSS se FlexLayout.

Obvyklé scénáře použití

Ukázkový programLayoutDemos obsahuje několik stránek, které demonstrují některá běžná použití a umožňují experimentovat s jeho vlastnostmi.

Použití ObjektuLayout pro jednoduchý zásobník

Stránka Simple Stack ukazuje, jak může nahradit za , ale StackLayout jednodušším přirážkou. Všechno v této ukázce je definované na stránce XAML. objekt FlexLayout obsahuje čtyři děti:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlexLayoutDemos"
             x:Class="FlexLayoutDemos.SimpleStackPage"
             Title="Simple Stack">

    <FlexLayout Direction="Column"
                AlignItems="Center"
                JustifyContent="SpaceEvenly">

        <Label Text="FlexLayout in Action"
               FontSize="Large" />

        <Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}" />

        <Button Text="Do-Nothing Button" />

        <Label Text="Another Label" />
    </FlexLayout>
</ContentPage>

Tato stránka běžící v iOSu, Androidu a univerzální platformě Windows Platform:

V souboru FlexLayoutFlexLayout se zobrazují tři vlastnosti :

Vlastnost Xamarin_Forms _FlexLayout_Direction" data-linktype="absolute-path">je nastavena Direction na hodnotu FlexDirection výčtu. Výchozí formát je Row. Nastavení vlastnosti na Column způsobí, že děti objektu budou uspořádány do FlexLayout jednoho sloupce položek.

Když jsou položky v objektu uspořádané ve sloupci, objekt má svislou hlavní osu FlexLayoutFlexLayout a vodorovnou FlexLayout. FlexLayout
Vlastnost Xamarin_Forms _FlexLayout_AlignItems" data-linktype="absolute-path">je typu a určuje, jak jsou položky zarovnané na AlignItemsFlexAlignItems křížové ose. Možnost Center způsobí, že každá položka bude vodorovně zarovnána na střed.

Pokud byste pro tuto úlohu místo , zacílili byste všechny položky přiřazením vlastnosti StackLayoutFlexLayout každé položky na HorizontalOptionsCenter . Vlastnost HorizontalOptions nefunguje pro děti objektu FlexLayout , ale jedna vlastnost AlignItems dosahuje stejného cíle. Pokud potřebujete, můžete použít připojenou vlastnost s možnou vazbami k AlignSelf přepsání vlastnosti pro jednotlivé AlignItems položky:
```
<Label Text="FlexLayout in Action"
       FontSize="Large"
       FlexLayout.AlignSelf="Start" />
```
S touto změnou je tato změna umístěná na levém okraji , když je pořadí čtení zleva LabelFlexLayout doprava.
Vlastnost Xamarin_Forms _FlexLayout_JustifyContent" data-linktype="absolute-path">je typu a určuje, jak jsou položky uspořádány na JustifyContentFlexJustify hlavní ose. Možnost přidělí veškerý levý svislý prostor rovnoměrně mezi všechny položky a nad první položkou a SpaceEvenly pod poslední položkou.

Pokud byste chtěli dosáhnout podobného efektu, muset přiřadit vlastnost každé StackLayoutVerticalOptions položky k CenterAndExpand . Možnost ale přidělí mezi každou položku dvakrát tolik místa než před první položkou CenterAndExpand a za poslední položkou. Možnost můžete CenterAndExpand napodobovat VerticalOptions nastavením vlastnosti JustifyContent na FlexLayoutSpaceAround .

Tyto vlastnosti jsou podrobněji popsány v části Níže jsou uvedeny vázání FlexLayoutFlexLayout

Použití objektuLayout pro zabalení položek

Stránka Photo Wrapping ukázkyLayoutDemos ukazuje, jak lze zabalit své děti do dalších řádků nebo sloupců. Soubor XAML vytvoří instanci objektu a FlexLayout přiřadí jeho dvě vlastnosti:

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

        <ActivityIndicator x:Name="activityIndicator"
                           IsRunning="True"
                           VerticalOptions="Center" />
    </Grid>
</ContentPage>

Vlastnost není nastavená, takže má výchozí nastavení , což znamená, že děti jsou uspořádané do řádků a hlavní DirectionFlexLayoutRow osa je vodorovná.

Vlastnost Xamarin_Forms _FlexLayout_Wrap" data-linktype="absolute-path">Wrap je typu výčtu FlexWrap . Pokud se na řádek nevejde příliš mnoho položek, pak toto nastavení vlastnosti způsobí, že se položky zabalí na další řádek.

Všimněte FlexLayout si, že je podřízený objekt ScrollView . Pokud se na stránku nevejde příliš mnoho řádků, má objekt výchozí vlastnost ScrollView a Orientation umožňuje svislé Vertical posouvání.

Vlastnost přidělí levý prostor na hlavní ose (vodorovná osa) tak, aby každá položka byla oteplená stejnou velikostí JustifyContent prázdného místa.

Soubor kódu přistupuje ke kolekci ukázkových fotek a přidává je Children do kolekce FlexLayout :

public partial class PhotoWrappingPage : ContentPage
{
    // Class for deserializing JSON list of sample bitmaps
    [DataContract]
    class ImageList
    {
        [DataMember(Name = "photos")]
        public List<string> Photos = null;
    }

    public PhotoWrappingPage ()
    {
        InitializeComponent ();

        LoadBitmapCollection();
    }

    async void LoadBitmapCollection()
    {
        using (WebClient webClient = new WebClient())
        {
            try
            {
                // Download the list of stock photos
                Uri uri = new Uri("https://raw.githubusercontent.com/xamarin/docs-archive/master/Images/stock/small/stock.json");
                byte[] data = await webClient.DownloadDataTaskAsync(uri);

                // Convert to a Stream object
                using (Stream stream = new MemoryStream(data))
                {
                    // Deserialize the JSON into an ImageList object
                    var jsonSerializer = new DataContractJsonSerializer(typeof(ImageList));
                    ImageList imageList = (ImageList)jsonSerializer.ReadObject(stream);

                    // Create an Image object for each bitmap
                    foreach (string filepath in imageList.Photos)
                    {
                        Image image = new Image
                        {
                            Source = ImageSource.FromUri(new Uri(filepath))
                        };
                        flexLayout.Children.Add(image);
                    }
                }
            }
            catch
            {
                flexLayout.Children.Add(new Label
                {
                    Text = "Cannot access list of bitmap files"
                });
            }
        }

        activityIndicator.IsRunning = false;
        activityIndicator.IsVisible = false;
    }
}

Tady je spuštěný program, který se postupně posouváním shora dolů:

Rozložení stránky s objektemLayout

Ve webovém návrhu existuje standardní rozložení nazývané návěs, protože se jedná o formát rozložení, který je velmi žádoucí, ale často je obtížné ho realizovat. Rozložení se skládá ze záhlaví v horní části stránky a zápatí v dolní části, obě se rozšiřují na celou šířku stránky. Hlavním obsahem je zabírání středu stránky, ale často se na pravé straně nachází sloupcová nabídka a na pravé straně se nachází doplňující informace (někdy nazývané doplňovací oblast). Oddíl 5.4.1 specifikace flexibilního rozložení pole CSS popisuje, jak lze rozložení šmouhů realizovat pomocí elasticky šátku.

Stránka s rozložením návěsí Na Stromu ukázkyLayoutDemos ukazuje jednoduchou implementaci tohoto rozložení pomocí jedné vnořené v jiné. Vzhledem k tomu, že tato stránka je určená pro telefon v režimu na výšku, mají oblasti vlevo a vpravo od oblasti obsahu pouze šířku 50 pixelů:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutDemos.HolyGrailLayoutPage"
             Title="Holy Grail Layout">

    <FlexLayout Direction="Column">

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

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

            <!-- Content -->
            <Label Text="CONTENT"
                   FontSize="Large"
                   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="Large"
               BackgroundColor="Pink"
               HorizontalTextAlignment="Center" />
    </FlexLayout>
</ContentPage>

Tady je spuštěný:

Navigace a sucené oblasti se BoxView vykreslují pomocí ovládacího panelu vlevo a vpravo.

První v FlexLayout souboru XAML má svislou hlavní osu a obsahuje tři podřazené prvky uspořádané do sloupce. Jedná se o záhlaví, text stránky a zápatí. Vnořená FlexLayout má vodorovnou hlavní osu se třemi děti uspořádanými v řádku.

V tomto programu jsou předvedené tři připojené vázání vlastností:

Připojená Order vlastnost s váže se nastaví u prvního BoxView objektu . Tato vlastnost je celé číslo s výchozí hodnotou 0. Tuto vlastnost můžete použít ke změně pořadí rozložení. Obecně platí, že vývojáři dávají přednost tomu, aby se obsah stránky před navigačními položkami a s položkami s přirážkami objevil ve značkách. Nastavení vlastnosti u prvního objektu na hodnotu menší než ostatní položky na stejné úrovni způsobí, že se zobrazí jako OrderBoxView první položka na řádku. Podobně můžete zajistit, že se položka zobrazí jako poslední nastavením vlastnosti na hodnotu větší než Order na stejné úrovni.
Připojená Basis vlastnost s možností vazby je nastavená u dvou položek, aby byla jejich šířka BoxView 50 pixelů. Tato vlastnost je typu , což je struktura, která definuje statickou vlastnost typu s názvem FlexBasis , což je výchozí FlexBasisAuto hodnota. Můžete použít k určení velikosti pixelů nebo procenta, které určuje, kolik místa Basis položka zabírá na hlavní ose. Označuje se jako základ, protože určuje velikost položky, která je základem veškerého následného rozložení.
Vlastnost Grow je nastavena na vnořené a Layout podřízený objekt představující Label obsah. Tato vlastnost je typu float a má výchozí hodnotu 0. Pokud je nastavená kladná hodnota, veškeré zbývající místo na hlavní ose se přidělí této položce a na stejné úrovni jako kladné hodnoty Grow . Prostor je přidělen proporcionálně k hodnotám, podobně jako hvězdcová specifikace v Grid objektu .

První připojená vlastnost je nastavena na vnořenou vlastnost , což znamená, že má zabírat veškeré nepoužívané GrowFlexLayout svislé místo uvnitř FlexLayout vnějšího objektu FlexLayout . Druhá připojená vlastnost je nastavena na reprezentující obsah, což znamená, že tento obsah má zabírat veškerý nevyužitý vodorovný Grow prostor uvnitř vnitřního objektu LabelFlexLayout .

Existuje také podobná připojená vlastnost s možnostmi vazby, kterou můžete použít, když velikost dětí překročí velikost objektu , ale zabalení ShrinkFlexLayout není žádoucí.

Položky katalogu s objektemLayout

Stránka Položky katalogu v ukázce FlexiLayoutDemos je podobná příkladu 1 v části 1.1 specifikace CSS Layout Box s tím rozdílem, že zobrazuje vodorovně posouvatelné řady obrázků a popisy tří temů:

Každá ze tří opic je obsažená v , která má explicitní výšku a šířku a která je také podřízeným FlexLayoutFrame objektem většího FlexLayout . V tomto souboru XAML je většina vlastností dětí zadaná ve stylech, z nichž všechny kromě jednoho FlexLayout mají implicitní styl:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlexLayoutDemos"
             x:Class="FlexLayoutDemos.CatalogItemsPage"
             Title="Catalog Items">
    <ContentPage.Resources>
        <Style TargetType="Frame">
            <Setter Property="BackgroundColor" Value="LightYellow" />
            <Setter Property="BorderColor" Value="Blue" />
            <Setter Property="Margin" Value="10" />
            <Setter Property="CornerRadius" Value="15" />
        </Style>

        <Style TargetType="Label">
            <Setter Property="Margin" Value="0, 4" />
        </Style>

        <Style x:Key="headerLabel" TargetType="Label">
            <Setter Property="Margin" Value="0, 8" />
            <Setter Property="FontSize" Value="Large" />
            <Setter Property="TextColor" Value="Blue" />
        </Style>

        <Style TargetType="Image">
            <Setter Property="FlexLayout.Order" Value="-1" />
            <Setter Property="FlexLayout.AlignSelf" Value="Center" />
        </Style>

        <Style TargetType="Button">
            <Setter Property="Text" Value="LEARN MORE" />
            <Setter Property="FontSize" Value="Large" />
            <Setter Property="TextColor" Value="White" />
            <Setter Property="BackgroundColor" Value="Green" />
            <Setter Property="BorderRadius" Value="20" />
        </Style>
    </ContentPage.Resources>

    <ScrollView Orientation="Both">
        <FlexLayout>
            <Frame WidthRequest="300"
                   HeightRequest="480">

                <FlexLayout Direction="Column">
                    <Label Text="Seated Monkey"
                           Style="{StaticResource headerLabel}" />
                    <Label Text="This monkey is laid back and relaxed, and likes to watch the world go by." />
                    <Label Text="  &#x2022; Doesn't make a lot of noise" />
                    <Label Text="  &#x2022; Often smiles mysteriously" />
                    <Label Text="  &#x2022; Sleeps sitting up" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}"
                           WidthRequest="180"
                           HeightRequest="180" />
                    <Label FlexLayout.Grow="1" />
                    <Button />
                </FlexLayout>
            </Frame>

            <Frame WidthRequest="300"
                   HeightRequest="480">

                <FlexLayout Direction="Column">
                    <Label Text="Banana Monkey"
                           Style="{StaticResource headerLabel}" />
                    <Label Text="Watch this monkey eat a giant banana." />
                    <Label Text="  &#x2022; More fun than a barrel of monkeys" />
                    <Label Text="  &#x2022; Banana not included" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.Banana.jpg}"
                           WidthRequest="240"
                           HeightRequest="180" />
                    <Label FlexLayout.Grow="1" />
                    <Button />
                </FlexLayout>
            </Frame>

            <Frame WidthRequest="300"
                   HeightRequest="480">

                <FlexLayout Direction="Column">
                    <Label Text="Face-Palm Monkey"
                           Style="{StaticResource headerLabel}" />
                    <Label Text="This monkey reacts appropriately to ridiculous assertions and actions." />
                    <Label Text="  &#x2022; Cynical but not unfriendly" />
                    <Label Text="  &#x2022; Seven varieties of grimaces" />
                    <Label Text="  &#x2022; Doesn't laugh at your jokes" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.FacePalm.jpg}"
                           WidthRequest="180"
                           HeightRequest="180" />
                    <Label FlexLayout.Grow="1" />
                    <Button />
                </FlexLayout>
            </Frame>
        </FlexLayout>
    </ScrollView>
</ContentPage>

Implicitní styl pro zahrnuje Image nastavení dvou připojených vlastností s možností vazby Flexlayout :

<Style TargetType="Image">
    <Setter Property="FlexLayout.Order" Value="-1" />
    <Setter Property="FlexLayout.AlignSelf" Value="Center" />
</Style>

Nastavení –1 způsobí, že prvek se zobrazí jako první v každém vnořeném zobrazení bez ohledu na jeho Order pozici v rámci kolekce ImageFlexLayout podřízených objektů. Vlastnost AlignSelfCenter způsobí, že Image objekt bude za středem objektu FlexLayout . Tím se přepíše nastavení vlastnosti , která má výchozí hodnotu , což znamená, že objekty a children jsou roztažené na AlignItemsStretch celou LabelButton šířku objektu FlexLayout .

V každém ze tří zobrazení předchází prázdná část FlexLayout , ale má nastavení LabelButtonGrow 1. To znamená, že veškeré dodatečné svislé místo je přiděleno tomuto prázdnému prostoru , což efektivně posune LabelButton hodnotu až na konec.

Podrobnosti o vlastnostech s možností vazby

Teď, když jste viděli některé běžné aplikace , je možné vlastnosti prozkoumat FlexLayoutFlexLayout podrobněji. FlexLayout definuje šest vlastností s možností vazby, které nastavíte na samotné vlastnosti, a to buď v kódu, nebo XAML, pro řízení orientace a FlexLayout zarovnání. (Jedna z těchto vlastností, Xamarin_Forms _FlexLayout_Position" data-linktype="absolute-path">, není Position v tomto článku.)

S pěti zbývajícími vlastnostmi s možností vazby můžete experimentovat pomocí stránky Experiment ukázkyLayoutDemos. Na této stránce můžete přidávat nebo odebírat děti z a a nastavovat kombinace pěti vlastností s možností FlexLayout vazby. Všechny prvky objektu jsou zobrazení různých barev a velikostí a vlastnost je nastavená na číslo odpovídající FlexLayoutLabel jeho pozici v TextChildren kolekci.

Při spuštění programu se v pěti Picker zobrazeních zobrazí výchozí hodnoty těchto pěti FlexLayout vlastností. V FlexLayout dolní části obrazovky jsou tři děti:

Každé zobrazení má šedé pozadí, které zobrazuje přidělené místo Label v rámci LabelFlexLayout . Pozadí samotného FlexLayout je Alice Blue. Zabírá celou dolní oblast stránky s výjimkou malého okraje vlevo a vpravo.

Vlastnost Direction

Vlastnost Xamarin_Forms _FlexLayout_Direction" data-linktype="absolute-path">je typu , výčet Direction se čtyřmi FlexDirection členy:

Column
ColumnReverse (nebo "column-reverse" v XAML)
Row, výchozí hodnota
RowReverse (nebo "row-reverse" v XAML)

V jazyce XAML můžete hodnotu této vlastnosti zadat pomocí názvů členů výčtu malými, velkými nebo smíšenými písmeny nebo můžete použít dva další řetězce zobrazené v závorkách, které jsou stejné jako indikátory CSS. (Řetězce "column-reverse" a "row-reverse" jsou definované ve třídě FlexDirectionTypeConverter používané analyzátorem XAML.)

Tady je stránka Experiment zobrazující (zleva doprava), směr, směr a ColumnColumnReverse směr:

Všimněte Reverse si, že u možností začínají položky vpravo nebo dole.

Vlastnost Wrap

Vlastnost Xamarin_Forms _FlexLayout_Wrap" data-linktype="absolute-path">je typu , výčet se WrapFlexWrap třemi členy:

NoWrap, výchozí hodnota
Wrap
Reverse (nebo "zalamování zpět" v jazyce XAML)

Zleva doprava tyto obrazovky zobrazují možnosti , a NoWrapWrap pro Reverse 12 dětí:

Když je vlastnost nastavená na a hlavní osa je osa 100, a hlavní osa není tak velká nebo vysoká, aby se vešla do všech dětí, pokusí se položky z menších, jak ukazuje snímek obrazovky WrapNoWrapFlexLayout iOSu. Pomocí připojené vázání vlastnosti můžete řídit zmenšení Shrink položek.

Vlastnost JustifyContent

Vlastnost Xamarin_Forms _FlexLayout_JustifyContent" data-linktype="absolute-path">je typu , výčet se JustifyContentFlexJustify šesti členy:

Start (nebo "flex-start" v jazyce XAML), výchozí hodnota
Center
End (nebo "flexi-end" v XAML)
SpaceBetween (nebo mezera mezi nimi v XAML)
SpaceAround (nebo "mezera kolem" v jazyce XAML)
SpaceEvenly

Tato vlastnost určuje, jak jsou položky v tomto příkladu mezery na hlavní ose, což je vodorovná osa:

Na všech třech snímcích obrazovky Wrap je vlastnost nastavená na Wrap . Výchozí Start hodnota je zobrazená na předchozím snímku obrazovky Androidu. Snímek obrazovky s iOSem Center ukazuje možnost: všechny položky se přesunou do středu. Další tři možnosti, které začínají slovem , přidělují dodatečné místo, které Space nevyubírá položky. SpaceBetween přiděluje prostor rovnoměrně mezi položkami. Kolem každé položky se zařadí stejné mezery, zatímco mezi každou položku a před první položku a za poslední položku SpaceAroundSpaceEvenly na řádku.

Vlastnost AlignItems

Vlastnost Xamarin_Forms _FlexLayout_AlignItems" data-linktype="absolute-path">je typu , výčet AlignItems se čtyřmi FlexAlignItems členy:

Stretch, výchozí hodnota
Center
Start (nebo "flexi-start" v jazyce XAML)
End (nebo "flexi-end" v XAML)

Jedná se o jednu ze dvou vlastností (druhá je ), která označuje, jak jsou děti AlignContent zarovnané na křížové ose. V každém řádku jsou děti roztažené (jak je znázorněno na předchozím snímku obrazovky) nebo zarovnané na začátku, středu nebo konci každé položky, jak je znázorněno na následujících třech snímcích obrazovky:

Na snímku obrazovky s iOSem jsou zarovnané horní části všech dětí. Na snímcích obrazovky Androidu jsou položky svisle za střed podle nejvyšší podřízené položky. Na snímku obrazovky UPW jsou zarovnané dolní části všech položek.

Pro každou jednotlivou položku lze nastavení přepsat připojenou vlastností AlignItemsAlignSelf s možností vazby.

Vlastnost AlignContent

Vlastnost Xamarin_Forms _FlexLayout_AlignContent" data-linktype="absolute-path">je typu , výčet se AlignContentFlexAlignContent sedmi členy:

Stretch, výchozí hodnota
Center
Start (nebo "flexi-start" v jazyce XAML)
End (nebo "flexi-end" v XAML)
SpaceBetween (nebo mezera mezi nimi v XAML)
SpaceAround (nebo "mezera kolem" v jazyce XAML)
SpaceEvenly

Podobně AlignItems jako AlignContent vlastnost zarovná i objekt children na křížové ose, ale má vliv na celé řádky nebo sloupce:

Na snímku obrazovky iOS jsou v horní části oba řádky. na snímku obrazovky Androidu jsou uprostřed. a na snímku obrazovky UPW jsou v dolní části. Řádky lze také roz mezerovat různými způsoby:

Nemá AlignContent žádný vliv, pokud existuje pouze jeden řádek nebo sloupec.

Podrobné informace o připojených vlastnostech s možností vazby

FlexLayout definuje pět připojených vlastností s možností vazby. Tyto vlastnosti jsou nastaveny pro podřízené objekty a týkají FlexLayout se pouze tohoto konkrétního podřízeného objektu.

Vlastnost AlignSelf

Připojená AlignSelf vázání vlastnosti je typu FlexAlignSelf , výčtu s pěti členy:

Auto, výchozí hodnota
Stretch
Center
Start (nebo "flexi-start" v jazyce XAML)
End (nebo "flexi-end" v XAML)

Pro každý jednotlivý podřízený objekt přepíše toto nastavení vlastnosti FlexLayoutAlignItems vlastnost nastavenou na FlexLayout samotné. Výchozí nastavení znamená Auto použití AlignItems tohoto nastavení.

Pro Label element label s názvem (nebo příklad) můžete nastavit AlignSelf vlastnost v kódu následujícím kódem:

FlexLayout.SetAlignSelf(label, FlexAlignSelf.Center);

Všimněte si, že neexistuje žádný FlexLayout odkaz na nadřazený prvek objektu Label . V jazyce XAML nastavíte vlastnost tímto kódem:

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

Vlastnost Order

Vlastnost Order je typu int . Výchozí hodnota je 0.

Vlastnost umožňuje změnit pořadí řazení dětí OrderFlexLayout objektu . Obvykle jsou děti objektů uspořádané ve stejném pořadí, ve FlexLayout stejném pořadí, v pořadí, ve které se zobrazují v Children kolekci. Toto pořadí můžete přepsat nastavením připojené vlastnosti s možností vazby na nenulovou celočíselnou hodnotu u Order jedné nebo více dětí. Potom uspořádá podřízené objekty na základě nastavení vlastnosti u každého podřízeného objektu, ale podřízené prvky se stejným nastavením jsou uspořádány v pořadí, v pořadí, ve stejném pořadí, v rámci FlexLayout které se zobrazují v OrderOrderChildren kolekci.

Vlastnost Basis

Připojená vlastnost s možnou vazebou označuje velikost místa přidělené podřízenému objektu na BasisFlexLayout hlavní ose. Velikost zadaná Basis vlastností je velikost podél hlavní osy nadřazeného objektu FlexLayout . Proto označuje šířku podřízeného zařízení, pokud jsou podřízené prvky uspořádány do řádků, nebo výšku, když jsou podřízené prvky Basis uspořádány do sloupců.

Vlastnost Basis je typu , FlexBasis struktura. Velikost lze zadat buď v jednotkách nezávislých na zařízení, nebo jako procento velikosti FlexLayout objektu . Výchozí hodnota vlastnosti je statická vlastnost , což znamená, že se používá požadovaná šířka nebo výška BasisFlexBasis.Auto podřízeného objektu.

V kódu můžete nastavit vlastnost pro pojmenovanou na BasisLabel 40 jednotek label nezávislých na zařízení, například:

FlexLayout.SetBasis(label, new FlexBasis(40, false));

Druhý argument konstruktoru má název a určuje, jestli je velikost relativní FlexBasis ( ) nebo absolutní ( isRelativetruefalse ). Argument má výchozí hodnotu false , takže můžete použít také následující kód:

FlexLayout.SetBasis(label, new FlexBasis(40));

Je definován implicitní převod float z na , takže ho můžete ještě více FlexBasis zjednodušit:

FlexLayout.SetBasis(label, 40);

Velikost můžete nastavit na 25 % nadřazené položky, jako FlexLayout je tato:

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

Tato desetinná hodnota musí být v rozsahu 0 až 1.

V jazyce XAML můžete pro velikost v jednotkách nezávislých na zařízení použít číslo:

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

Nebo můžete zadat procento v rozsahu od 0 % do 100 %:

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

Stránka Basis Experiment ukázkyLayoutDemos umožňuje experimentovat s vlastností . Na stránce se zobrazí zabalený sloupec pěti Label prvků se střídavým pozadím a barvami popředí. Dva Slider prvky umožňují zadat Basis hodnoty pro druhou a čtvrtou Label :

Základní experimenty stránky experimentou

Snímek obrazovky iOS na levé straně ukazuje dva Label prvky, které mají v jednotkách nezávislých na zařízení dané výšky. Obrazovka Androidu zobrazuje výšky, které jsou zlomkem celkové výšky FlexLayout . Pokud Basis je nastavené na 100%, pak je podřízeným prvkem výška a FlexLayout zabalí se do dalšího sloupce a zachová celou výšku tohoto sloupce, protože snímek UWP ukazuje, že se zobrazuje jako v případě, že je pět podřízených prvků uspořádáno na řádku, ale jsou ve skutečnosti uspořádány do pěti sloupců.

Vlastnost zvětšení

GrowPřipojená vlastnost s možností vazby je typu int . Výchozí hodnota je 0 a hodnota musí být větší než nebo rovna 0.

GrowVlastnost hraje roli, pokud Wrap je vlastnost nastavena na hodnotu NoWrap a řádek podřízených objektů má celkovou šířku menší než šířka FlexLayout , nebo sloupec podřízených objektů má kratší výšku než FlexLayout . GrowVlastnost určuje, jak rozdělit zbylé prostor mezi podřízené objekty.

Na stránce Zvětšit experiment se do sloupce uspořádají pět prvků střídajících se barev a dva Slider prvky umožňují upravit Grow vlastnost druhého a čtvrtého Label . Snímek obrazovky iOS v pravém rohu zobrazuje výchozí Grow vlastnosti 0:

Stránka růst experimentu –

Pokud má kterákoli z podřízených prvků kladnou Grow hodnotu, pak tento podřízený objekt zabere zbývající místo, protože ukázka obrazovky Androidu. Tento prostor se taky dá přidělit mezi dvě nebo víc podřízených objektů. Na snímku obrazovky UWP Grow je vlastnost druhé Label nastavená na 0,5, zatímco Grow vlastnost čtvrtého Label je 1,5, což dává čtvrté Label tři časy jako většinu zbylé prostoru jako druhý Label .

Způsob, jakým podřízené zobrazení používá toto místo, závisí na konkrétním typu podřízeného objektu. V případě Label lze text umístit do celkového prostoru Label pomocí vlastností HorizontalTextAlignment a VerticalTextAlignment .

Vlastnost zmenšení

ShrinkPřipojená vlastnost s možností vazby je typu int . Výchozí hodnota je 1 a hodnota musí být větší než nebo rovna 0.

ShrinkVlastnost hraje roli Wrap , pokud je vlastnost nastavena na hodnotu NoWrap a agregovaná šířka řádku podřízených objektů je větší než šířka FlexLayout , nebo je agregovaná výška jednoho sloupce podřízených objektů větší než výška FlexLayout . V normálním případě se FlexLayout tyto podřízené položky zobrazí s omezujícími velikostmi. ShrinkVlastnost může označovat, které podřízené položky mají prioritu v zobrazení jejich úplných velikostí.

Stránka experimentu pro zmenšení vytvoří s jedním řádkem pěti Label podřízených objektů, které vyžadují více místa, než FlexLayout Šířka. Snímek obrazovky iOS na levé straně zobrazuje všechny Label prvky s výchozími hodnotami 1:

Stránka experimentu zmenšit stránku

V Androidu obrazovky Shrink se hodnota druhé Label nastaví na 0 a ta Label se zobrazí v její plné šířce. Čtvrtý má také LabelShrink hodnotu větší než jedna a zmenší se. Snímek UWP zobrazuje oba Label prvky, které mají Shrink hodnotu 0, aby se mohly zobrazovat v plné velikosti, pokud je to možné.

GrowHodnoty a můžete nastavit Shrink tak, aby vyhovovaly situacím, kde mohou být agregované podřízené velikosti někdy menší než nebo někdy větší než velikost FlexLayout .

Styly CSS s FlexLayout

Funkci stylů CSS , která byla představena s 3,0, lze použít ve spojení s FlexLayout . Stránka katalogu CSS v ukázce FlexLayoutDemos duplikuje rozložení stránky položek katalogu , ale s šablonou stylů CSS pro mnoho stylů:

The CSS Catalog Items Page Stránka

Původní soubor CatalogItemsPage. XAML má ve svém oddílu pět definic Resources s 15 Setter objekty. V souboru CssCatalogItemsPage. XAML , který byl zmenšen na dvě definice pomocí pouze čtyř Setter objektů. Tyto styly doplňují šablonu stylů CSS pro vlastnosti, které Xamarin.Forms aktuálně nepodporují funkce stylů CSS:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:FlexLayoutDemos"
             x:Class="FlexLayoutDemos.CssCatalogItemsPage"
             Title="CSS Catalog Items">
    <ContentPage.Resources>
        <StyleSheet Source="CatalogItemsStyles.css" />

        <Style TargetType="Frame">
            <Setter Property="BorderColor" Value="Blue" />
            <Setter Property="CornerRadius" Value="15" />
        </Style>

        <Style TargetType="Button">
            <Setter Property="Text" Value="LEARN MORE" />
            <Setter Property="BorderRadius" Value="20" />
        </Style>
    </ContentPage.Resources>

    <ScrollView Orientation="Both">
        <FlexLayout>
            <Frame>
                <FlexLayout Direction="Column">
                    <Label Text="Seated Monkey" StyleClass="header" />
                    <Label Text="This monkey is laid back and relaxed, and likes to watch the world go by." />
                    <Label Text="  &#x2022; Doesn't make a lot of noise" />
                    <Label Text="  &#x2022; Often smiles mysteriously" />
                    <Label Text="  &#x2022; Sleeps sitting up" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}" />
                    <Label StyleClass="empty" />
                    <Button />
                </FlexLayout>
            </Frame>

            <Frame>
                <FlexLayout Direction="Column">
                    <Label Text="Banana Monkey" StyleClass="header" />
                    <Label Text="Watch this monkey eat a giant banana." />
                    <Label Text="  &#x2022; More fun than a barrel of monkeys" />
                    <Label Text="  &#x2022; Banana not included" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.Banana.jpg}" />
                    <Label StyleClass="empty" />
                    <Button />
                </FlexLayout>
            </Frame>

            <Frame>
                <FlexLayout Direction="Column">
                    <Label Text="Face-Palm Monkey" StyleClass="header" />
                    <Label Text="This monkey reacts appropriately to ridiculous assertions and actions." />
                    <Label Text="  &#x2022; Cynical but not unfriendly" />
                    <Label Text="  &#x2022; Seven varieties of grimaces" />
                    <Label Text="  &#x2022; Doesn't laugh at your jokes" />
                    <Image Source="{local:ImageResource FlexLayoutDemos.Images.FacePalm.jpg}" />
                    <Label StyleClass="empty" />
                    <Button />
                </FlexLayout>
            </Frame>
        </FlexLayout>
    </ScrollView>
</ContentPage>

Na šablonu stylů CSS je odkazováno v prvním řádku Resources oddílu:

<StyleSheet Source="CatalogItemsStyles.css" />

Všimněte si také, že dva prvky v každé ze tří položek obsahují StyleClass nastavení:

<Label Text="Seated Monkey" StyleClass="header" />
···
<Label StyleClass="empty" />

Tyto informace odkazují na selektory v šabloně stylů CatalogItemsStyles. CSS :

frame {
    width: 300;
    height: 480;
    background-color: lightyellow;
    margin: 10;
}

label {
    margin: 4 0;
}

label.header {
    margin: 8 0;
    font-size: large;
    color: blue;
}

label.empty {
    flex-grow: 1;
}

image {
    height: 180;
    order: -1;
    align-self: center;
}

button {
    font-size: large;
    color: white;
    background-color: green;
}

FlexLayoutTady se odkazuje na několik připojených vlastností s možností vazby. V label.empty selektoru se zobrazí flex-grow atribut, který je prázdný, Label aby poskytoval prázdné místo nad Button . imageSelektor obsahuje order atribut a align-self atribut, oba, které odpovídají FlexLayout připojeným vlastnostem s možností vazby.

Viděli jste, že můžete nastavit vlastnosti přímo na a můžete FlexLayout nastavit připojené vlastnosti s možností vazby na podřízené objekty FlexLayout . Nebo můžete tyto vlastnosti nastavit nepřímo pomocí tradičních stylů založených na jazyce XAML nebo stylů CSS. Důležité je vědět a pochopit tyto vlastnosti. Tyto vlastnosti jsou tím FlexLayout skutečně flexibilní.

FlexLayout s využitím Xamarin. University

video o rozložení 3,0 Flex

FlexLayoutDemos