Scaffold di Jetpack Compose — apa itu, properti dan cara kerjanya

Apa itu Scaffold di Jetpack Compose

Scaffold — adalah fungsi composable yang mengimplementasikan kerangka layar sesuai spesifikasi Material Design. Scaffold bukanlah kontainer dalam arti biasa — ini adalah manajer tata letak yang mengoordinasikan penempatan beberapa komponen Material standar di layar.

Scaffold mengelola jarak untuk TopAppBar, BottomBar dan FloatingActionButton, serta elemen sistem — bilah status dan panel navigasi. Ini memastikan bahwa konten tidak tumpang tindih dengan elemen sistem dan sesuai dengan panduan Material Design.

Menurut Material Design Guidelines, 2025, Scaffold harus menjadi elemen root dari setiap layar aplikasi. Ini menggantikan CoordinatorLayout yang sudah usang dari sistem View dan menyediakan API yang lebih sederhana dan deklaratif untuk membangun tata letak layar.

Signature dasar Scaffold

Scaffold menerima parameter modifier, scaffoldState, topBar, bottomBar, floatingActionButton, drawerContent, snackbarHost dan content. Parameter content menerima PaddingValues — jarak yang harus diperhitungkan oleh konten utama.

@Composable
fun BasicScaffold() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Beranda") }
            )
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, contentDescription = "Add")
            }
        }
    ) { innerPadding ->
        Column(
            modifier = Modifier.padding(innerPadding)
        ) {
            Text("Konten utama")
        }
    }
}

Slot Scaffold: topBar, bottomBar dan floatingActionButton

topBar — slot untuk menempatkan panel atas aplikasi, biasanya TopAppBar atau LargeTopAppBar. Scaffold secara otomatis menambahkan jarak di innerPadding untuk konten agar tidak tumpang tindih dengan topBar. TopAppBar dapat berisi judul, ikon navigasi dan tindakan.

bottomBar — slot untuk panel navigasi bawah. Mendukung BottomNavigation, BottomAppBar atau NavigationBar. Scaffold memperhitungkan tinggi bottomBar saat menghitung innerPadding untuk konten. Menurut Material Design Guidelines, 2025, bottomBar harus digunakan pada layar dengan 3–5 titik navigasi.

floatingActionButton — slot untuk tombol aksi mengambang. Scaffold secara otomatis memposisikan FAB sesuai spesifikasi Material Design — di sudut kanan bawah dengan jarak yang benar. floatingActionButtonPosition memungkinkan memindahkan FAB ke tengah tepi bawah layar.

Contoh dengan semua slot

Dalam contoh ini, Scaffold menggunakan semua slot utama: TopAppBar dengan judul, BottomBar dengan tiga elemen navigasi dan FloatingActionButton untuk tindakan utama.

@Composable
fun FullScaffold() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Aplikasi") },
                navigationIcon = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Default.Menu, "Menu")
                    }
                }
            )
        },
        bottomBar = {
            NavigationBar {
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Home, "Beranda") },
                    label = { Text("Home") },
                    selected = true,
                    onClick = {}
                )
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Search, "Cari") },
                    label = { Text("Search") },
                    selected = false,
                    onClick = {}
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("Konten layar")
        }
    }
}

ScaffoldState: mengelola Drawer dan Snackbar

ScaffoldState — objek status Scaffold yang menggabungkan DrawerState dan SnackbarHostState. DrawerState mengelola pembukaan dan penutupan menu samping, dan SnackbarHostState — menampilkan dan menyembunyikan Snackbar. Status dibuat melalui rememberScaffoldState() dan diteruskan ke parameter scaffoldState.

DrawerState menyediakan metode open dan close untuk pengelolaan Drawer secara programatik. Status Drawer bisa terbuka, tertutup atau sebagian terbuka. drawerGesturesEnabled memungkinkan menonaktifkan gerakan pembukaan Drawer dengan gesekan, hanya menyisakan pembukaan programatik melalui tombol.

SnackbarHostState mengelola Snackbar — notifikasi sementara di bagian bawah layar. Metode showSnackbar menampilkan Snackbar dengan pesan dan tindakan opsional. Menurut Material Design Guidelines, 2025, Snackbar harus digunakan untuk pesan singkat tanpa informasi yang sangat penting.

@Composable
fun ScaffoldWithDrawer() {
    val scaffoldState = rememberScaffoldState()
    val scope = rememberCoroutineScope()

    Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(
                title = { Text("Menu") },
                navigationIcon = {
                    IconButton(onClick = {
                        scope.launch {
                            scaffoldState.drawerState.open()
                        }
                    }) {
                        Icon(Icons.Default.Menu, "Menu")
                    }
                }
            )
        },
        drawerContent = {
            Column(modifier = Modifier.padding(16.dp)) {
                Text("Item 1")
                Text("Item 2")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("Konten")
        }
    }
}

Contoh pembuatan layar dengan Scaffold

Contoh layar lengkap dengan Scaffold mencakup TopAppBar, BottomNavigation, FloatingActionButton dan Snackbar untuk menampilkan notifikasi saat FAB ditekan. ScaffoldState diteruskan ke semua komponen untuk koordinasi status.

@Composable
fun MainScreen() {
    val state = rememberScaffoldState()
    val scope = rememberCoroutineScope()

    Scaffold(
        scaffoldState = state,
        topBar = {
            TopAppBar(
                title = { Text("IT Sectr") },
                actions = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Default.Notifications, "Notifications")
                    }
                }
            )
        },
        bottomBar = {
            NavigationBar {
                NavigationBarItem(icon = { Icon(Icons.Default.Home, "Beranda") },
                    label = { Text("Home") }, selected = true, onClick = {})
                NavigationBarItem(icon = { Icon(Icons.Default.Settings, "Pengaturan") },
                    label = { Text("Settings") }, selected = false, onClick = {})
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {
                scope.launch {
                    state.snackbarHostState.showSnackbar("Selesai")
                }
            }) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { padding ->
        Box(
            modifier = Modifier.padding(padding).fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text("Selamat datang")
        }
    }
}

InnerPadding dan tata letak adaptif dengan Scaffold

innerPadding — adalah PaddingValues yang Scaffold teruskan ke blok content. Ini berisi jarak yang diperlukan agar konten tidak tumpang tindih dengan statusBar, navigationBar, topBar dan bottomBar. Penggunaan innerPadding wajib untuk tampilan yang benar di berbagai perangkat.

Scaffold secara otomatis menghitung innerPadding berdasarkan jarak sistem dan tinggi slot yang terpasang. Pada perangkat dengan pulau kamera atau potongan layar, Scaffold menyesuaikan jarak untuk bilah status. Pada perangkat lama dengan tombol fisik, jarak bawah mungkin nol.

Menurut Android Developers, 2024, innerPadding harus diterapkan ke kontainer root konten melalui Modifier.padding(innerPadding). Jika konten menggunakan kontainer yang dapat digulir, innerPadding diterapkan melalui Modifier.consumeWindowInsets untuk kerja keyboard dan gerakan sistem yang benar.

• Terapkan innerPadding ke kontainer root konten melalui Modifier.padding(innerPadding)
• Untuk kontainer yang dapat digulir gunakan Modifier.consumeWindowInsets(innerPadding)
• Jangan tambahkan jarak tambahan untuk bilah status — Scaffold melakukannya secara otomatis
• Jika topBar atau bottomBar tidak ada, jarak yang sesuai di innerPadding akan nol