Scaffold

Dalam Desain Material, scaffold adalah struktur dasar yang menyediakan platform standar untuk antarmuka pengguna yang kompleks. Panel ini menyatukan berbagai bagian UI, seperti panel aplikasi dan tombol tindakan mengambang, sehingga memberikan tampilan dan nuansa yang koheren bagi aplikasi.

Contoh

Composable Scaffold menyediakan API sederhana yang dapat Anda gunakan untuk menyusun struktur aplikasi dengan cepat sesuai dengan panduan Desain Material. Scaffold menerima beberapa composable sebagai parameter. Di antaranya adalah sebagai berikut:

  • topBar: Panel aplikasi di bagian atas layar.
  • bottomBar: Panel aplikasi di bagian bawah layar.
  • floatingActionButton: Tombol yang mengambang ke sudut kanan bawah layar yang dapat Anda gunakan untuk menampilkan tindakan tombol.

Untuk contoh yang lebih detail tentang cara menerapkan panel aplikasi atas dan bawah, lihat halaman panel aplikasi.

Anda juga dapat meneruskan konten Scaffold seperti yang Anda lakukan ke penampung lain. Fungsi ini meneruskan nilai innerPadding ke lambda content yang kemudian dapat Anda gunakan di composable turunan.

Contoh berikut memberikan contoh lengkap cara mengimplementasikan Scaffold. File ini berisi panel aplikasi atas, panel aplikasi bawah, dan tombol tindakan mengambang 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(),
            )
        }
    }
}
Scaffold.kt

Implementasi ini akan muncul sebagai berikut:

Implementasi scaffold yang berisi panel aplikasi atas dan bawah sederhana, serta tombol tindakan mengambang yang melakukan iterasi penghitung. Konten bagian dalam scaffold adalah teks sederhana yang menjelaskan komponen.
Gambar 1. Implementasi scaffold.

Referensi tambahan