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:
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.
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.
