HorizontalStackLayout

UI Aplikasi Multi-platform .NET (.NET MAUI) HorizontalStackLayout mengatur tampilan anak dalam tumpukan horizontal satu dimensi, dan merupakan alternatif yang lebih berkinerja untuk StackLayout. Selain itu, HorizontalStackLayout dapat digunakan sebagai tata letak induk yang berisi tata letak anak lainnya.

HorizontalStackLayout menentukan properti berikut:

• Spacing, dari jenis double, menunjukkan jumlah ruang antara setiap tampilan anak. Nilai default properti ini adalah 0.

Properti ini didukung oleh BindableProperty objek, yang berarti dapat menjadi target pengikatan data dan ditata.

XAML berikut menunjukkan cara membuat yang HorizontalStackLayout berisi tampilan anak yang berbeda:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.HorizontalStackLayoutPage">
    <HorizontalStackLayout Margin="20">
       <Rectangle Fill="Red"
                  HeightRequest="30"
                  WidthRequest="30" />
       <Label Text="Red"
              FontSize="18" />
    </HorizontalStackLayout>
</ContentPage>

Contoh ini membuat yang HorizontalStackLayout berisi Rectangle objek dan Label . Secara default, tidak ada ruang di antara tampilan anak:

Catatan

Nilai Margin properti mewakili jarak antara elemen dan elemen yang berdekatan. Untuk informasi selengkapnya, lihat Kontrol posisi.

Spasi antar tampilan anak

Penspasian antara tampilan anak dalam HorizontalStackLayout dapat diubah dengan mengatur Spacing properti ke double nilai:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.HorizontalStackLayoutPage">
    <HorizontalStackLayout Margin="20"
                           Spacing="10">
       <Rectangle Fill="Red"
                  HeightRequest="30"
                  WidthRequest="30" />
       <Label Text="Red"
              FontSize="18" />
    </HorizontalStackLayout>
</ContentPage>

Contoh ini membuat HorizontalStackLayout yang berisi Rectangle objek dan Label , yang memiliki sepuluh unit ruang independen perangkat di antaranya:

Tip

Properti Spacing dapat diatur ke nilai negatif untuk membuat tampilan anak tumpang tindih.

Tampilan posisi dan ukuran anak

Ukuran dan posisi tampilan anak dalam tergantung HorizontalStackLayout pada nilai tampilan HeightRequest dan WidthRequest properti anak, dan nilai propertinya VerticalOptions . HorizontalStackLayoutDalam tampilan , tampilan anak diperluas untuk mengisi tinggi yang tersedia saat ukurannya tidak diatur secara eksplisit.

Properti VerticalOptions , dan tampilan turunannya, dapat diatur ke bidang dari LayoutOptions struktur, yang merangkum preferensi tata letak perataan.HorizontalStackLayout Preferensi tata letak ini menentukan posisi dan ukuran tampilan anak dalam tata letak induknya.

Contoh XAML berikut menetapkan preferensi perataan pada setiap tampilan anak di HorizontalStackLayout:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.HorizontalStackLayoutPage">
    <HorizontalStackLayout Margin="20"
                           HeightRequest="200">
        <Label Text="Start"
               BackgroundColor="Gray"
               VerticalOptions="Start" />
        <Label Text="Center"
               BackgroundColor="Gray"
               VerticalOptions="Center" />
        <Label Text="End"
               BackgroundColor="Gray"
               VerticalOptions="End" />
        <Label Text="Fill"
               BackgroundColor="Gray"
               VerticalOptions="Fill" />
    </HorizontalStackLayout>
</ContentPage>

Dalam contoh ini, preferensi perataan diatur pada Label objek untuk mengontrol posisinya dalam HorizontalStackLayout. Bidang Start, Center, End, dan Fill digunakan untuk menentukan perataan Label objek dalam induk HorizontalStackLayout:

Hanya HorizontalStackLayout menghormati preferensi perataan pada tampilan anak yang berada di arah yang berlawanan dengan orientasi tata letak. Oleh karena itu, Label tampilan anak dalam HorizontalStackLayout atur propertinya VerticalOptions ke salah satu bidang perataan:

• Start, yang memposisikan Label di awal HorizontalStackLayout.
• Center, yang secara vertikal berpusat Label di HorizontalStackLayout.
• End, yang memposisikan Label di akhir HorizontalStackLayout.
• Fill, yang memastikan bahwa Label mengisi tinggi HorizontalStackLayout.

Untuk informasi selengkapnya tentang perataan, lihat Menyelaraskan dan memosisikan kontrol MAUI .NET.

Objek Nest HorizontalStackLayout

HorizontalStackLayout Dapat digunakan sebagai tata letak induk yang berisi tata letak anak berlapis lainnya.

XAML berikut menunjukkan contoh objek bersarang VerticalStackLayout dalam HorizontalStackLayout:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.HorizontalStackLayoutPage">
    <HorizontalStackLayout Margin="20"
                           Spacing="6">
        <Label Text="Primary colors:" />
        <VerticalStackLayout Spacing="6">
            <Rectangle Fill="Red"
                       WidthRequest="30"
                       HeightRequest="30" />
            <Rectangle Fill="Yellow"
                       WidthRequest="30"
                       HeightRequest="30" />
            <Rectangle Fill="Blue"
                       WidthRequest="30"
                       HeightRequest="30" />
        </VerticalStackLayout>
        <Label Text="Secondary colors:" />
        <VerticalStackLayout Spacing="6">
            <Rectangle Fill="Green"
                       WidthRequest="30"
                       HeightRequest="30" />
            <Rectangle Fill="Orange"
                       WidthRequest="30"
                       HeightRequest="30" />
            <Rectangle Fill="Purple"
                       WidthRequest="30"
                       HeightRequest="30" />
        </VerticalStackLayout>
    </HorizontalStackLayout>
</ContentPage>

Dalam contoh ini, induk HorizontalStackLayout berisi dua objek berlapis VerticalStackLayout :

Penting

Semakin dalam Anda menumpuk objek tata letak, semakin banyak perhitungan tata letak yang akan dilakukan, yang dapat memengaruhi performa. Untuk informasi selengkapnya, lihat Memilih tata letak yang benar.