Apa perbedaan antara LayoutOptions Xamarin.Form, terutama Fill dan Expand?

Dalam Xamarin. Bentuk setiap Viewproperti memiliki dua HorizontalOptionsdan VerticalOptions. Keduanya bertipe LayoutOptionsdan dapat memiliki salah satu dari nilai berikut:

• LayoutOptions.Start
• LayoutOptions.Center
• LayoutOptions.End
• LayoutOptions.Fill
• LayoutOptions.StartAndExpand
• LayoutOptions.CenterAndExpand
• LayoutOptions.EndAndExpand
• LayoutOptions.FillAndExpand

Tampaknya itu mengontrol perataan tampilan pada tampilan induk. Tetapi bagaimana tepatnya perilaku masing-masing pilihan individu? Dan apa perbedaan antara Filldan sufiks Expand?

Jawaban singkat

Start, Center, EndDan Fillmenentukan pandangan ini keselarasan dalam ruang yang .

Expandmendefinisikan apakah ia menempati lebih banyak ruang jika tersedia.

Teori

Struktur LayoutOptionsmengontrol dua perilaku berbeda:

1. Alignment: Bagaimana tampilan selaras dalam tampilan induk?

   • Start: Untuk penyelarasan vertikal, tampilan dipindahkan ke atas. Untuk penyejajaran horisontal ini biasanya sisi kiri. (Tetapi perhatikan, bahwa pada perangkat dengan pengaturan bahasa kanan-ke-kiri ini adalah sebaliknya, yaitu disejajarkan dari kanan.)
   • Center: Tampilan terpusat.
   • End: Biasanya tampilan bawah atau kanan rata. (Pada bahasa kanan-ke-kiri, tentu saja, selaras kiri.)
   • Fill: Penjajaran ini sedikit berbeda. Tampilan akan membentang di seluruh ukuran tampilan induk.

   Namun, jika orang tua tidak lebih besar dari anak-anaknya, Anda tidak akan melihat adanya perbedaan antara keberpihakan tersebut. Penyelarasan hanya penting untuk tampilan induk dengan ruang tambahan yang tersedia.

2. Ekspansi: Akankah elemen menempati lebih banyak ruang jika tersedia?

   • Suffix Expand: Jika tampilan orang tua lebih besar dari ukuran gabungan dari semua anak-anaknya, yaitu ruang tambahan tersedia, maka ruang tersebut proporsional di antara tampilan anak dengan suffix itu. Anak-anak itu akan "menempati" ruang mereka, tetapi tidak perlu "mengisinya". Kita akan melihat perilaku ini dalam contoh di bawah ini.
   • Tanpa akhiran: Anak-anak tanpa Expandakhiran tidak akan mendapatkan ruang tambahan, bahkan jika lebih banyak ruang tersedia.

   Sekali lagi, jika pandangan orang tua tidak lebih besar dari anak-anaknya, akhiran ekspansi tidak membuat perbedaan juga.

Contoh

Mari kita lihat contoh berikut untuk melihat perbedaan antara delapan opsi tata letak.

Aplikasi ini berisi abu-abu gelap StackLayoutdengan delapan tombol putih bersarang, yang masing-masing dilabeli dengan opsi tata letak vertikal. Ketika mengklik salah satu tombol, itu menetapkan opsi tata letak vertikal ke tata letak tumpukan. Dengan cara ini kita dapat dengan mudah menguji interaksi pandangan dengan orang tua, keduanya dengan opsi tata letak yang berbeda.

(Beberapa baris kode terakhir menambahkan kotak kuning tambahan. Kami akan kembali sebentar lagi.)

public static class App
{
    static readonly StackLayout stackLayout = new StackLayout {
        BackgroundColor = Color.Gray,
        VerticalOptions = LayoutOptions.Start,
        Spacing = 2,
        Padding = 2,
    };

    public static Page GetMainPage()
    {
        AddButton("Start", LayoutOptions.Start);
        AddButton("Center", LayoutOptions.Center);
        AddButton("End", LayoutOptions.End);
        AddButton("Fill", LayoutOptions.Fill);
        AddButton("StartAndExpand", LayoutOptions.StartAndExpand);
        AddButton("CenterAndExpand", LayoutOptions.CenterAndExpand);
        AddButton("EndAndExpand", LayoutOptions.EndAndExpand);
        AddButton("FillAndExpand", LayoutOptions.FillAndExpand);

        return new NavigationPage(new ContentPage {
            Content = stackLayout,
        });
    }

    static void AddButton(string text, LayoutOptions verticalOptions)
    {
        stackLayout.Children.Add(new Button {
            Text = text,
            BackgroundColor = Color.White,
            VerticalOptions = verticalOptions,
            HeightRequest = 20,
            Command = new Command(() => {
                stackLayout.VerticalOptions = verticalOptions;
                (stackLayout.ParentView as Page).Title = "StackLayout: " + text;
            }),
        });
        stackLayout.Children.Add(new BoxView {
            HeightRequest = 1,
            Color = Color.Yellow,
        });
    }
}

Tangkapan layar berikut menunjukkan hasilnya ketika mengklik masing-masing dari delapan tombol. Kami melakukan pengamatan berikut:

• Selama induknya stackLayoutkencang (tidak Fillhalaman), opsi tata letak vertikal masing-masing Buttondiabaikan.
• Pilihan tata letak vertikal hanya penting jika stackLayoutlebih besar (mis. Via Fillpenyelarasan) dan masing-masing tombol memiliki Expandakhiran.
• Ruang tambahan akhirnya proporsional di antara semua tombol dengan Expandakhiran. Untuk melihat ini lebih jelas, kami menambahkan garis horizontal kuning antara setiap dua tombol yang berdekatan.
• Tombol dengan ruang lebih dari ketinggian yang diminta tidak harus "mengisinya". Dalam hal ini perilaku aktual dikendalikan oleh penyelarasannya. Misalnya mereka disejajarkan di atas, tengah atau tombol ruang mereka atau mengisinya sepenuhnya.
• Semua tombol menjangkau seluruh lebar tata letak, karena kami hanya memodifikasi VerticalOptions.

Di sini Anda menemukan tangkapan layar resolusi tinggi yang sesuai.

Ada sedikit bug di versi Xamarin saat ini. mungkin sudah ada beberapa saat.

CenterAndExpand umumnya tidak berkembang, dan mengatasinya bisa membingungkan.

Misalnya jika Anda memiliki StackLayoutset untuk CenterAndExpand, maka Anda meletakkan label di dalamnya yang juga diatur untuk CenterAndExpandAnda akan mengharapkan label yang lebar penuh StackLayout. Nggak. Itu tidak akan berkembang. Anda harus mengatur StackLayout" FillAndExpand" ke untuk mendapatkan objek Label bersarang untuk memperluas ke lebar penuh StackLayout, kemudian memberi tahu Label untuk memusatkan teks, bukan dirinya sebagai objek, dengan HorizontalTextAlignment="Center". Dalam pengalaman saya, Anda perlu mengatur orang tua dan anak bersarang FillAndExpandjika Anda benar-benar ingin memastikan itu sesuai agar sesuai.

        <StackLayout HorizontalOptions="FillAndExpand"
                     Orientation="Vertical"
                     WidthRequest="300">
            <Label BackgroundColor="{StaticResource TileAlerts}"
                   HorizontalOptions="FillAndExpand"
                   Style="{StaticResource LabelStyleReversedLrg}"
                   HorizontalTextAlignment="Center"
                   Text="Alerts" />

Falko memberikan penjelasan yang baik tetapi saya ingin menambahkannya dengan visual lain dan bagaimana tag ini bekerja di xaml, yang mana saya lebih suka menggunakan sebagian besar waktu. Saya membuat proyek sederhana untuk menguji hasil tampilan. Inilah Xaml untuk Halaman Utama:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Alignments.MainPage"
             BackgroundColor="White">


    <StackLayout HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="LightGray" Padding="1" Margin="30">
        <Label Text="Vert: EndAndExpand, Horz: EndAndExpand" VerticalOptions="EndAndExpand" HorizontalOptions="EndAndExpand" BackgroundColor="White"/>
    </StackLayout>


</ContentPage>

Seperti yang Anda lihat itu adalah StackLayout yang sangat sederhana dengan Label di dalamnya. Untuk setiap gambar di bawah ini, saya menjaga StackLayout tetap sama, saya hanya mengubah opsi horizontal dan vertikal untuk Entri dan mengubah teks untuk menampilkan opsi yang dipilih, sehingga Anda dapat melihat bagaimana Entri bergerak dan mengubah ukuran.

Berikut adalah kode yang digunakan untuk Mulai:

<Label Text="Vert: Start, Horz: Start" VerticalOptions="Start" HorizontalOptions="Start" BackgroundColor="White"/>

Dan kode yang digunakan untuk StartAndExpand:

<Label Text="Vert: StartAndExpand, Horz: StartAndExpand" VerticalOptions="StartAndExpand" HorizontalOptions="StartAndExpand" BackgroundColor="White"/>

Seperti yang Anda lihat tidak ada perbedaan secara visual selain ada lebih banyak teks yang digunakan dalam opsi StartAndExpand. Ini diuji pada perangkat fisik Samsung A30 saya. Ini mungkin ditampilkan secara berbeda pada perangkat yang berbeda, tapi saya pikir semua gambar di sini secara kolektif menunjukkan bahwa ada beberapa bug di Xamarin. Untuk sisanya saya hanya akan menunjukkan tangkapan layar, saya pikir mereka cukup jelas.

Saya juga merekomendasikan untuk melihat dokumentasi Microsoft untuk beberapa detail tambahan. Yang perlu diperhatikan adalah "Ekspansi hanya digunakan oleh StackLayout".