Mengatur tampilan dengan StackLayout
Menumpuk tampilan dalam daftar vertikal atau horizontal adalah desain umum untuk antarmuka pengguna. Pikirkan tentang beberapa halaman umum dalam aplikasi. Contohnya termasuk halaman masuk, daftar, dan pengaturan. Semua halaman ini biasanya berisi konten tumpuk. Dalam unit ini, Anda mempelajari cara mengatur tampilan dalam daftar vertikal atau horizontal dengan menggunakan StackLayout dan kontrol VerticalStackLayout StackLayout yang dioptimalkan dan HorizontalStackLayout.
Apa itu StackLayout, VerticalStackLayout, dan HorizontalStackLayout?
StackLayout adalah kontainer tata letak yang menata tampilan turunannya dari kiri ke kanan atau atas ke bawah. Arah didasarkan pada properti Orientation nya, dan nilai defaultnya adalah atas ke bawah. Ilustrasi berikut ini memperlihatkan tampilan konseptual vertikal StackLayout.
StackLayoutmemiliki daftarChildrenyang diwarisi dari kelasLayout<T>dasarnya. Daftar ini menyimpan tampilan, yang berguna karena sebagian besar elemen UI yang Anda kerjakan di .NET MAUI berasal dariView. Panel tata letak juga berasal dariView, yang berarti Anda dapat menumpuk panel jika perlu.VerticalStackLayoutdanHorizontalStackLayoutmerupakan tata letak yang disukai untuk digunakan ketika Anda tahu bahwa orientasi Anda tidak akan berubah, karena dioptimalkan untuk performa.
Cara menambahkan tampilan ke StackLayout
Di .NET MAUI, Anda dapat menambahkan tampilan ke StackLayout di kode C# atau di XAML. Berikut adalah contoh tiga tampilan yang ditambahkan menggunakan kode:
<StackLayout x:Name="stack">
</StackLayout>
public partial class MainPage : ContentPage
{
public MainPage()
{
InitializeComponent();
var a = new BoxView { Color = Colors.Silver, HeightRequest = 40 };
var b = new BoxView { Color = Colors.Blue, HeightRequest = 40 };
var c = new BoxView { Color = Colors.Gray, HeightRequest = 40 };
stack.Children.Add(a);
stack.Children.Add(b);
stack.Children.Add(c);
}
}
Anda bisa menambahkan tampilan ke koleksi Children dan StackLayout secara otomatis memosisikan tampilan dalam daftar vertikal. Berikut tampilannya di perangkat Android:
Untuk melakukan hal yang sama di XAML, lapiskan elemen turunan di dalam tag StackLayout. Pemilah XAML menambahkan tampilan bertumpuk ke koleksi Children secara otomatis karena Children merupakan ContentProperty untuk semua panel tata letak. Berikut adalah contoh tiga tampilan yang sama yang ditambahkan ke dalam StackLayout pada XAML:
<StackLayout>
<BoxView Color="Silver" HeightRequest="40" />
<BoxView Color="Blue" HeightRequest="40" />
<BoxView Color="Gray" HeightRequest="40" />
</StackLayout>
Bagaimana tampilan diurutkan dalam StackLayout
Urutan tampilan dalam koleksi Children menentukan urutan tata letaknya ketika dirender. Untuk tampilan yang ditambahkan di XAML, urutan tekstual digunakan. Untuk anak yang ditambahkan dalam kode, urutan di mana Anda memanggil Add metode menentukan urutan tata letak.
Cara mengubah spasi antar tampilan dalam StackLayout
Adalah umum untuk menginginkan ruang di antara elemen turunan StackLayout. StackLayout memungkinkan Anda mengontrol ruang di antara setiap anak dengan menggunakan Spacing properti . Nilai defaultnya adalah nol unit, tetapi Anda dapat mengaturnya ke apa pun yang terlihat baik untuk Anda. Berikut adalah contoh pengaturan properti di Spacing ke 30 di XAML:
<StackLayout Spacing="30">
<BoxView Color="Silver" HeightRequest="40" />
<BoxView Color="Blue" HeightRequest="40" />
<BoxView Color="Gray" HeightRequest="40" />
</StackLayout>
Cuplikan layar berikut ini memperlihatkan bagaimana Antarmuka Pengguna akan ditampilkan di Android:
Cara mengatur orientasi StackLayout
StackLayout memungkinkan Anda mengatur elemen turunan baik dalam kolom atau baris. Anda mengontrol perilaku ini dengan mengatur properti Orientation nya. Sejauh ini, kami hanya menampilkan vertikal StackLayout.
Vertical adalah defaultnya. Apakah Anda secara eksplisit mengatur Orientation ke Vertical itu terserah Anda. Beberapa programmer lebih memilih pengaturan eksplisit untuk membuat kode lebih mendokumentasikan diri.
Berikut contoh pengaturan Orientation ke Horizontal di XAML:
<StackLayout x:Name="stack" Orientation="Horizontal">
<BoxView Color="Silver" WidthRequest="40"/>
<BoxView Color="Blue" WidthRequest="40"/>
<BoxView Color="Gray" WidthRequest="40"/>
</StackLayout>
Catatan
Seperti yang dijelaskan dalam latihan sebelumnya, perubahan orientasi StackPanel penyebabnya mengabaikan properti HeightRequest dari masing-masing BoxView. Sebagai gantinya, Anda mengatur WidthRequest.
Cuplikan layar berikut ini memperlihatkan bagaimana Antarmuka Pengguna akan ditampilkan di perangkat Android:
Mengatur LayoutOptions tampilan di StackLayout
Setiap tampilan memiliki properti VerticalOptions dan HorizontalOptions. Anda dapat menggunakan properti ini untuk mengatur posisi tampilan dalam area tampilan persegi yang disediakan oleh panel tata letak.
Seperti disebutkan sebelumnya, dengan StackLayout, perilaku LayoutOptions properti tergantung pada Orientation properti .StackLayout StackLayout menggunakan properti LayoutOptions ke arah yang berlawanan dengan Orientation. Secara default, elemen dalam tata letak tumpukan tidak dialokasikan ruang tambahan apa pun ke arah yang sama dengan Orientation tata letak tumpukan. Menetapkan posisi untuk arah tersebut dalam kasus default ini tidak mengubah penyajian elemen. Namun, ada perubahan dalam penyajian, ketika posisi dikombinasikan dengan ekspansi.
Bagaimana dengan ekspansi?
Ingat dari unit sebelumnya bahwa LayoutOptions struktur berisi properti yang bool disebut Expands yang sekarang usang di .NET MAUI. Ketika Anda mengatur VerticalOptions dan , Anda mungkin melihat LayoutOptions dari StartAndExpand, , CenterAndExpandEndAndExpand, dan FillAndExpandHorizontalOptions. Jika Anda mengatur LayoutOptions ke salah satu opsi iniAndExpand, opsi diabaikan dan bagian pertama digunakan LayoutOptions seperti Start, , CenterEnd, atau Fill. Jika Anda bermigrasi dari Xamarin.Forms, Anda harus menghapus semua AndExpand dari properti ini. Kemudian dalam modul, kita melihat cara mencapai fungsionalitas serupa ketika kita belajar tentang Grid.
StackLayouts yang Dioptimalkan
Seperti disebutkan sebelumnya, dan HorizontalStackLayout merupakan kontrol yang dioptimalkan StackLayout VerticalStackLayout dengan orientasi yang telah ditentukan sebelumnya. Kami menyarankan agar Anda menggunakan kontrol ini jika memungkinkan, untuk performa tata letak terbaik. Tata letak ini memiliki fungsionalitas LayoutOptions dan Spacing yang dimiliki reguler StackLayout.
<VerticalStackLayout Spacing="30">
<BoxView Color="Silver" HeightRequest="40" />
<BoxView Color="Blue" HeightRequest="40" />
<BoxView Color="Gray" HeightRequest="40"/>
</VerticalStackLayout>
<HorizontalStackLayout Spacing="30">
<BoxView Color="Silver" WidthRequest="40" />
<BoxView Color="Blue" WidthRequest="40" />
<BoxView Color="Gray" WidthRequest="40" />
</HorizontalStackLayout>