Scaffold
Dalam Desain Material, scaffold adalah struktur dasar yang menyediakan platform terstandardisasi untuk antarmuka pengguna yang kompleks. Hal ini menyatukan berbagai bagian dari UI, seperti bilah aplikasi dan tombol aksi mengambang, yang memberi aplikasi tampilan dan nuansa yang koheren.
Contoh
Composable Scaffold
menyediakan API sederhana yang dapat Anda gunakan untuk
menyusun struktur aplikasi Anda dengan cepat sesuai dengan pedoman Desain Material.
Scaffold
menerima beberapa composable sebagai parameter. Di antaranya adalah
berikut ini:
topBar
: Panel aplikasi di bagian atas layar.bottomBar
: Panel aplikasi di bagian bawah layar.floatingActionButton
: Tombol yang mengambang di sudut kanan bawah layar yang dapat Anda gunakan untuk mengekspos tindakan tombol.
Untuk contoh yang lebih detail tentang cara menerapkan bagian atas dan bawah panel aplikasi, lihat halaman panel aplikasi.
Anda juga dapat meneruskan konten Scaffold
seperti yang Anda lakukan ke penampung lain. Berhasil
nilai innerPadding
ke lambda content
yang kemudian dapat Anda gunakan di turunan
composable.
Contoh berikut memberikan contoh lengkap tentang cara mengimplementasikan
Scaffold
. Ini berisi panel aplikasi atas, panel aplikasi bawah, dan tindakan mengambang
tombol yang berinteraksi dengan status internal Scaffold
.
@Composable fun ScaffoldExample() { var presses by remember { mutableIntStateOf(0) } Scaffold( topBar = { TopAppBar( colors = topAppBarColors( containerColor = MaterialTheme.colorScheme.primaryContainer, titleContentColor = MaterialTheme.colorScheme.primary, ), title = { Text("Top app bar") } ) }, bottomBar = { BottomAppBar( containerColor = MaterialTheme.colorScheme.primaryContainer, contentColor = MaterialTheme.colorScheme.primary, ) { Text( modifier = Modifier .fillMaxWidth(), textAlign = TextAlign.Center, text = "Bottom app bar", ) } }, floatingActionButton = { FloatingActionButton(onClick = { presses++ }) { Icon(Icons.Default.Add, contentDescription = "Add") } } ) { innerPadding -> Column( modifier = Modifier .padding(innerPadding), verticalArrangement = Arrangement.spacedBy(16.dp), ) { Text( modifier = Modifier.padding(8.dp), text = """ This is an example of a scaffold. It uses the Scaffold composable's parameters to create a screen with a simple top app bar, bottom app bar, and floating action button. It also contains some basic inner content, such as this text. You have pressed the floating action button $presses times. """.trimIndent(), ) } } }
Implementasi ini muncul sebagai berikut: