Jetpack Compose - Scaffold

Penting

Pembahasan ini merupakan rentetan dari topik pembahasan tentang Dasar Dasar Jetpack Compose, terdapat hampir 100 pembahasan, untuk melihat daftarnya silahkan klik DAFTAR PEMBAHASAN COMPOSE

Pengertian

Scaffold adalah komponen dalam toolkit UI Jetpack Compose yang digunakan sebagai kerangka dasar untuk membangun antarmuka pengguna (UI) dalam aplikasi. Scaffold menyediakan struktur dasar yang umumnya digunakan dalam aplikasi Android, seperti AppBar, FloatingActionButton, Drawer, dan banyak lagi.

Anda harus menggunakan Scaffold ketika:

1. Membutuhkan Struktur Dasar Aplikasi: Jika Anda ingin membangun aplikasi dengan struktur dasar yang umum seperti AppBar di bagian atas, konten utama di tengah, dan fitur-fitur tambahan seperti FloatingActionButton atau Drawer, maka Scaffold adalah pilihan yang tepat.

2. Mengorganisir Komponen-Komponen UI: Jika Anda perlu mengelompokkan dan mengorganisir komponen-komponen UI dalam sebuah tata letak yang terstruktur, Scaffold menyediakan kerangka kerja yang nyaman untuk menempatkan komponen-komponen ini dengan lebih terstruktur.

3. Menyediakan Fungsionalitas Tambahan: Jika aplikasi Anda memerlukan fungsionalitas tambahan seperti navigasi, menu, atau aksi tambahan yang terkait dengan interaksi pengguna, Scaffold menyediakan fitur-fitur ini secara bawaan yang dapat digunakan dengan mudah.

Parameter/Atribut

@Composable
fun Scaffold(
    modifier: Modifier = Modifier,
    topBar: @Composable () -> Unit = {},
    bottomBar: @Composable () -> Unit = {},
    snackbarHost: @Composable () -> Unit = {},
    floatingActionButton: @Composable () -> Unit = {},
    floatingActionButtonPosition: FabPosition = FabPosition.End,
    containerColor: Color = MaterialTheme.colorScheme.background,
    contentColor: Color = contentColorFor(containerColor),
    contentWindowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets,
    content: @Composable (PaddingValues) -> Unit
) 

modifier: Modifier = Modifier

• Modifier untuk menyesuaikan tampilan dan perilaku dari Scaffold. Dengan menggunakan modifier, Anda dapat mengontrol hal-hal seperti padding, margin, warna latar belakang, dan tata letak dari Scaffold.

topBar: @Composable () -> Unit = {}

• AppBar yang akan ditampilkan di bagian atas aplikasi. Anda dapat menambahkan komponen AppBar seperti judul, tombol, dan sebagainya di dalamnya.

bottomBar: @Composable () -> Unit = {}

• BottomAppBar yang akan ditampilkan di bagian bawah aplikasi. Anda dapat menambahkan komponen-komponen seperti navigasi, menu, atau tombol di dalamnya.

snackbarHost: @Composable () -> Unit = {}

• SnackbarHost yang akan menampilkan snackbar di aplikasi. Anda dapat menambahkan logika untuk menampilkan pesan atau tindakan tambahan di dalamnya.

floatingActionButton: @Composable () -> Unit = {}

• FloatingActionButton yang akan ditampilkan di pojok kanan bawah aplikasi. Anda dapat menambahkan logika aksi yang terkait dengan FloatingActionButton di dalamnya.

floatingActionButtonPosition: FabPosition = FabPosition.End

• Penempatan FloatingActionButton di dalam aplikasi, seperti di sebelah kanan bawah atau di sebelah kiri bawah.

containerColor: Color = MaterialTheme.colorScheme.background

• Warna latar belakang dari aplikasi. Anda dapat menyesuaikan warna latar belakang sesuai dengan kebutuhan desain aplikasi Anda.

contentColor: Color = contentColorFor(containerColor)

• Warna konten dari aplikasi. Ini memungkinkan Anda untuk menyesuaikan warna teks dan ikon agar sesuai dengan warna latar belakang.

contentWindowInsets: WindowInsets = ScaffoldDefaults.contentWindowInsets

• Jendela insets dari konten aplikasi. Ini mengatur bagaimana konten akan berinteraksi dengan batas-batas jendela seperti status bar dan navigation bar.

content: @Composable (PaddingValues) -> Unit

• Konten utama aplikasi yang akan ditampilkan di bawah AppBar. Anda dapat menambahkan komponen-komponen utama aplikasi di dalamnya.

Contoh

@Composable
fun DemoScaffold() {
    Scaffold(
        topBar = {
            // AppBar
            // Di sini Anda bisa menambahkan komponen AppBar seperti judul, tombol, dsb.
            Text(text = "AppBar")
        },
        content = { paddingValues ->
            // Konten Utama
            // Di sini Anda bisa menambahkan komponen-komponen utama aplikasi.
            Column(modifier = Modifier.padding(paddingValues)) {
                Text(text = "The")
                Text(text = "Ngoding")
            }
        },
        floatingActionButton = {
            // FloatingActionButton
            // Di sini Anda bisa menambahkan FloatingActionButton dan logika aksi yang terkait.
            Text(text = "FAB")
        }
    )
}

✨”Jika Kamu tidak sanggup menahan lelahnya belajar maka kamu harus sanggup menahan perihnya kebodohan” ✨Imam Syafi'i

Video