Rozložení

  • Článek
  • 7 min ke čtení

.NET MAUI layout classes.

Třídy rozložení .NET Multi-Platform App UI (.NET MAUI) umožňují uspořádat a seskupit ovládací prvky uživatelského rozhraní ve vaší aplikaci. Volba třídy rozložení vyžaduje znalost umístění podřízených prvků rozložení a velikosti podřízených prvků rozložení. Kromě toho může být nutné vnořit rozložení k vytvoření požadovaného rozložení.

StackLayout

Uspořádá StackLayout prvky v jednorozměrném zásobníku vodorovně nebo svisle. Vlastnost Orientation určuje směr prvků a výchozí orientace je Vertical. StackLayout se obvykle používá k uspořádání dílčího oddílu uživatelského rozhraní na stránce.

Následující XAML ukazuje, jak vytvořit svislý StackLayout objekt obsahující tři Label objekty:

<StackLayout Margin="20,35,20,25">
    <Label Text="The StackLayout has its Margin property set, to control the rendering position of the StackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the StackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the StackLayout." />
</StackLayout>

StackLayoutPokud velikost prvku není explicitně nastavena, rozbalí se tak, aby vyplnila dostupnou šířku nebo výšku, pokud Orientation je vlastnost nastavena na Horizontal.

A StackLayout se často používá jako nadřazené rozložení, které obsahuje jiná podřízená rozložení. StackLayout K reprodukování Grid rozložení by se ale nemělo použít kombinace StackLayout objektů. Následující kód ukazuje příklad tohoto chybného postupu:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Details.HomePage"
             Padding="0,20,0,0">
    <StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Name:" />
            <Entry Placeholder="Enter your name" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Age:" />
            <Entry Placeholder="Enter your age" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Occupation:" />
            <Entry Placeholder="Enter your occupation" />
        </StackLayout>
        <StackLayout Orientation="Horizontal">
            <Label Text="Address:" />
            <Entry Placeholder="Enter your address" />
        </StackLayout>
    </StackLayout>
</ContentPage>

Je to plýtvání, protože se provádějí nepotřebné výpočty rozložení. Místo toho lze požadované rozložení lépe dosáhnout pomocí Grid.

Další informace najdete v tématu StackLayout.

HorizontalStackLayout

Uspořádá HorizontalStackLayout podřízená zobrazení v jednorozměrném vodorovném zásobníku a je výkonnější alternativou StackLayoutk . HorizontalStackLayout se obvykle používá k uspořádání dílčího oddílu uživatelského rozhraní na stránce.

Následující kód XAML ukazuje, jak vytvořit obsahující různá HorizontalStackLayout podřízená zobrazení:

<HorizontalStackLayout Margin="20">
   <Rectangle Fill="Red"
              HeightRequest="30"
              WidthRequest="30" />
   <Label Text="Red"
          FontSize="18" />
</HorizontalStackLayout>

HorizontalStackLayoutPokud velikost elementu není explicitně nastavená, rozbalí se a vyplní dostupnou výšku.

Další informace naleznete v tématu HorizontalStackLayout.

VerticalStackLayout

Uspořádá VerticalStackLayout podřízená zobrazení v jednorozměrném svislém zásobníku a je výkonnější alternativou StackLayoutk . VerticalStackLayout se obvykle používá k uspořádání dílčího oddílu uživatelského rozhraní na stránce.

Následující xaml ukazuje, jak vytvořit obsahující VerticalStackLayout tři Label objekty:

<VerticalStackLayout Margin="20,35,20,25">
    <Label Text="The VericalStackLayout has its Margin property set, to control the rendering position of the VerticalStackLayout." />
    <Label Text="The Padding property can be set to specify the distance between the VerticalStackLayout and its children." />
    <Label Text="The Spacing property can be set to specify the distance between views in the VerticalStackLayout." />
</VerticalStackLayout>

VerticalStackLayoutPokud velikost elementu není explicitně nastavená, rozbalí se a vyplní dostupnou šířku.

Další informace naleznete v tématu VerticalStackLayout.

Mřížka

Používá Grid se k zobrazení prvků v řádcích a sloupcích, které můžou mít proporcionální nebo absolutní velikosti. Řádky a sloupce mřížky jsou zadané s vlastnostmi a ColumnDefinitions vlastnostmi mřížkyRowDefinitions.

K umístění prvků v konkrétních Grid buňkách použijte Grid.Column vlastnosti a Grid.Row připojené vlastnosti. Pokud chcete, aby prvky byly rozloženy mezi více řádky a sloupci, použijte vlastnosti Grid.RowSpan a Grid.ColumnSpan připojené vlastnosti.

Poznámka

Rozložení Grid by nemělo být zaměňováno s tabulkami a není určeno k prezentaci tabulkových dat.

Následující XAML ukazuje, jak vytvořit se Grid dvěma řádky a dvěma sloupci:

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="50" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>    
    <Label Text="Column 0, Row 0"
           WidthRequest="200" />
    <Label Grid.Column="1"
           Text="Column 1, Row 0" />
    <Label Grid.Row="1"
           Text="Column 0, Row 1" />
    <Label Grid.Column="1"
           Grid.Row="1"
           Text="Column 1, Row 1" />
</Grid>

V tomto příkladu velikost funguje takto:

  • Každý řádek má explicitní výšku 50 jednotek nezávislých na zařízeních.
  • Šířka prvního sloupce je nastavena na Autohodnotu , a proto je tak široká, jak je požadována pro své podřízené položky. V tomto případě je to 200 jednotek nezávislých na zařízení, aby se přizpůsobily šířce první Label.

Prostor lze distribuovat v rámci sloupce nebo řádku pomocí automatického nastavení velikosti, což umožňuje přizpůsobit jejich obsah sloupcům a řádkům. Toho dosáhnete nastavením výšky RowDefinition, nebo šířky ColumnDefinition, na Auto. Proporcionální velikost lze použít také k distribuci dostupného prostoru mezi řádky a sloupce mřížky váženými poměry. Toho dosáhnete nastavením výšky RowDefinition( nebo šířky ColumnDefinition) na hodnotu, která používá * operátor.

Upozornění

Pokuste se zajistit, aby bylo na velikost nastaveno Auto co nejvíce řádků a sloupců. Každý řádek nebo sloupec s automatickou velikostí způsobí, že modul rozložení provede další výpočty rozložení. Místo toho použijte řádky a sloupce s pevnou velikostí, pokud je to možné. Případně můžete nastavit řádky a sloupce tak, aby zabíraly poměrnou velikost místa s hodnotou výčtu GridUnitType.Star .

Další informace najdete v tématu Grid.

FlexLayout

A FlexLayout je podobný StackLayout jako v tom, že zobrazuje podřízené prvky vodorovně nebo svisle v zásobníku. Může ale také zabalit své podřízené položky, FlexLayout pokud je příliš mnoho, aby se vešly do jednoho řádku nebo sloupce, a také umožňuje podrobnější kontrolu nad velikostí, orientací a zarovnáním jeho podřízených prvků.

Následující KÓD XAML ukazuje, jak vytvořit FlexLayout zobrazení, které zobrazuje jeho zobrazení v jednom sloupci:

<FlexLayout Direction="Column"
            AlignItems="Center"
            JustifyContent="SpaceEvenly">
    <Label Text="FlexLayout in Action" />
    <Button Text="Button" />
    <Label Text="Another Label" />
</FlexLayout>

V tomto příkladu funguje rozložení takto:

  • Vlastnost Direction je nastavena na Column, což způsobí, že podřízené položky FlexLayout budou uspořádány do jednoho sloupce položek.
  • Vlastnost AlignItems je nastavena na Centerhodnotu , která způsobí, že každá položka bude vodorovně zarovnaná na střed.
  • Vlastnost JustifyContent je nastavena na SpaceEvenly, která přiděluje všechny zbývající svislé mezery rovnoměrně mezi všemi položkami a nad první položkou a pod poslední položkou.

Další informace naleznete v tématu FlexLayout.

AbsoluteLayout

Slouží AbsoluteLayout k umístění a velikosti prvků pomocí explicitních hodnot nebo hodnot vzhledem k velikosti rozložení. Pozice je určena levým horním rohem podřízeného rohu vzhledem k levému hornímu rohu AbsoluteLayout.

Mělo AbsoluteLayout by být považováno za speciální rozložení, které se má použít pouze v případě, že můžete nastavit velikost u podřízených položek nebo když velikost prvku nemá vliv na umístění ostatních podřízených položek. Standardním použitím tohoto rozložení je vytvoření překrytí, které pokrývá stránku s jinými ovládacími prvky, například k ochraně uživatele před interakcí s normálními ovládacími prvky na stránce.

Důležité

Vlastnosti HorizontalOptions nemají VerticalOptions žádný vliv na podřízené AbsoluteLayoutpoložky .

AbsoluteLayoutUvnitř objektu se připojená AbsoluteLayout.LayoutBounds vlastnost používá k určení vodorovné pozice, svislé pozice, šířky a výšky prvku. Kromě toho připojená AbsoluteLayout.LayoutFlags vlastnost určuje, jak budou hranice rozložení interpretovány.

Následující KÓD XAML ukazuje, jak uspořádat prvky v :AbsoluteLayout

<AbsoluteLayout Margin="40">
    <BoxView Color="Red"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
             Rotation="30" />
    <BoxView Color="Green"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100"
             Rotation="60" />
    <BoxView Color="Blue"
             AbsoluteLayout.LayoutFlags="PositionProportional"
             AbsoluteLayout.LayoutBounds="0.5, 0, 100, 100" />
</AbsoluteLayout>

V tomto příkladu funguje rozložení takto:

  • Každý z nich BoxView má explicitní velikost 100x100 a zobrazuje se ve stejné poloze vodorovně na střed.
  • Červená BoxView se otočí o 30 stupňů a zelená BoxView se otočí o 60 stupňů.
  • U každého BoxViewz nich je připojená AbsoluteLayout.LayoutFlags vlastnost nastavena na PositionProportional, což znamená, že pozice je úměrná zbývajícímu prostoru po šířce a výšce jsou stanoveny.

Upozornění

Vyhněte se použití AbsoluteLayout.AutoSize vlastnosti, kdykoli je to možné, protože způsobí, že modul rozložení provede další výpočty rozložení.

Další informace naleznete v tématu AbsoluteLayout.

BindableLayout

A BindableLayout umožňuje libovolnou třídu rozložení, která je odvozena od Layout třídy, generovat svůj obsah vazbou na kolekci položek, s možností nastavit vzhled každé položky pomocí DataTemplate.

Svázatelné rozložení se naplní daty nastavením jeho ItemsSource vlastnosti na libovolnou kolekci, která implementuje IEnumerable, a připojením k -odvozené Layouttřídě. Vzhled každé položky v svázatelném rozložení lze definovat nastavením BindableLayout.ItemTemplate připojené vlastnosti na DataTemplate.

Následující XAML ukazuje, jak vytvořit vazbu StackLayout na kolekci položek a definovat jejich vzhled pomocí DataTemplate:

<StackLayout BindableLayout.ItemsSource="{Binding User.TopFollowers}"
             Orientation="Horizontal">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Image Source="{Binding}"
                   Aspect="AspectFill"
                   WidthRequest="44"
                   HeightRequest="44" />
        </DataTemplate>
    </BindableLayout.ItemTemplate>
</StackLayout>

Rozložení s možností vazby by se měla použít jenom v případě, že je kolekce položek, která se mají zobrazit, malá a posouvání a výběr se nevyžaduje.

Další informace naleznete v tématu BindableLayout.

Průhlednost vstupu

Každý prvek vizuálu InputTransparent má bindable vlastnost, která se používá k definování, zda prvek může přijímat vstup. Jeho výchozí hodnota je false, aby prvek mohl přijímat vstup. Pokud je true tato vlastnost na elementu, element neobdrží žádný vstup. Místo toho se vstup předá všem prvkům, které jsou vizuálně za elementem.

Třída Layout , ze které jsou odvozena všechna rozložení, má CascadeInputTransparent svázatelnou vlastnost, která řídí, zda podřízené prvky dědí vstupní průhlednost rozložení. Jeho výchozí hodnota je true, aby nastavení InputTransparent vlastnosti na true třídu rozložení vedlo ke všem prvkům v rozložení, které nepřijímají žádný vstup.