Hai guys! Lanjut materi jetpack compose, kali ini tentang Scaffold. Bagi developer flutter mungkin tidak asing dengan nama ini. Fungsinya sama namun pengimplementasiannya berbeda.
Introduction
Scaffold menjadi dasar dalam membuat struktur layout atau tampilan pada Jetpack Compose. Karena Scaffold menyediakan property property seperti AppBar, BottomBar, Floating Actionn Button, dan Drawer. Dengan properti yang sudah disebutkan diatas sudah bisa membuat tampilan sederhana.
Fungsinya sama seperti widget Scaffold pada flutter, namun ada perbedaan pada dengan android native view semacam ini tidak ada, jadi kita menyusun sendiri viewnya. Toolbar pada android native di Jetpack Compose di ganti dengan TopAppBar(). OK langsung saja kita cobain Composable ini.
Cara penggunaan 🤳
Penggunaannya cukup panggil composable Scaffold() lalu isi properti sesuai keinginan. Scaffold memiliki required properti yaitu content yang merupakan badan dari scaffold itu sendiri. Bisa dikosongi dengan diisi Unit kosong.
@Composable
fun HomeScreen(/*...*/) {
Scaffold(
drawerContent = { /*...*/ },
topBar = { /*...*/ },
content = { /*...*/ }
)
}
Properti yang tersedia
Ada beberapa properti yang tersedia selain contoh diatas
| Properti | Fungsi |
|---|---|
| modifier: Modifier = Modifier | Memodifikasi composable |
| scaffoldState: ScaffoldState = rememberScaffoldState() | Ini berisi keadaan layar, misalnya variabel untuk memberikan kontrol manual atas perilaku Scaffold, ukuran komponen, dll |
| topBar: () -> Unit = {} | Menampilkan toolbar dengan TopAppBar() |
| bottomBar: () -> Unit = {} | Menampilkan bilah bawah, dengan menggunakan BottomAppBar() |
| content: (PaddingValues) -> Unit | Berisi body atau konten dari scaffold |
| drawerContent: ColumnScope.() -> Unit = null | Isi dari drawer yang dapat di tarik dari kiri |
| backgroundColor: Color = MaterialTheme.colors.background | background dari kontent scaffold |
| floatingActionButton: () -> Unit = {} | Menampilkan composable FloatingActionBar() |
| floatingActionButtonPosition: FabPosition = FabPosition.End | Menentukan posisi FAB dengan Object FabPosition.End atau FabPosition.Center |
Penutup
Nah itu dia materia singkat tentang penggunaan composable Scaffold pada Jetpack Compose. Untuk penggunaan properti seperti AppBar, BottomBar, Drawer, dan FAB akan saya bahas sendiri di materi materi berikutnya. Properti properti diatas masih kurang lengkap karena masih banyak lagi yang dapat kalian gunakan. Info lebih lengkap kunjungi https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary
Jangan lupa follow saya di Instagram dan Twitter, Stay Connected 😁 😁 😁
Referensi
- https://foso.github.io/Jetpack-Compose-Playground/material/scaffold/
- https://developer.android.com/reference/kotlin/androidx/compose/material/package-summary