Jetpack Compose'ta Scaffold — nedir, özellikleri ve nasıl çalışır

Jetpack Compose'ta Scaffold Nedir

Scaffold, Material Design spesifikasyonuna göre ekran iskeletini uygulayan bir composable işlevidir. Scaffold geleneksel anlamda bir kapsayıcı değildir — ekrandaki birden çok standart Material bileşeninin yerleşimini koordine eden bir düzen yöneticisidir.

Scaffold, TopAppBar, BottomBar ve FloatingActionButton için kenar boşluklarını ve ayrıca sistem öğelerini — durum çubuğu ve gezinme çubuğunu — yönetir. Bu, içeriğin sistem öğeleriyle örtüşmemesini ve Material Design yönergelerine uygun olmasını sağlar.

Material Design Guidelines, 2025'e göre Scaffold, her uygulama ekranının kök öğesi olmalıdır. View sistemindeki eski CoordinatorLayout'un yerini alır ve ekran düzenleri oluşturmak için daha basit, bildirimsel bir API sağlar.

Temel Scaffold İmzası

Scaffold, modifier, scaffoldState, topBar, bottomBar, floatingActionButton, drawerContent, snackbarHost ve content parametrelerini kabul eder. content parametresi PaddingValues — ana içeriğin dikkate alması gereken kenar boşluklarını — alır.

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

Scaffold Yuvaları: topBar, bottomBar ve floatingActionButton

topBar, uygulamanın üst çubuğunu (genellikle TopAppBar veya LargeTopAppBar) yerleştirmek için yuvadır. Scaffold, içeriğin topBar ile örtüşmemesi için innerPadding'e otomatik olarak kenar boşluğu ekler. TopAppBar bir başlık, gezinme simgesi ve eylemler içerebilir.

bottomBar, alt gezinme çubuğu için yuvadır. BottomNavigation, BottomAppBar veya NavigationBar'ı destekler. Scaffold, içerik için innerPadding'i hesaplarken bottomBar'ın yüksekliğini dikkate alır. Material Design Guidelines, 2025'e göre bottomBar, 3–5 gezinme noktasına sahip ekranlarda kullanılmalıdır.

floatingActionButton, kayan eylem düğmesi için yuvadır. Scaffold, FAB'yi Material Design spesifikasyonuna göre otomatik olarak konumlandırır — doğru kenar boşluğuyla sağ alt köşede. floatingActionButtonPosition, FAB'yi ekranın alt kenarının ortasına taşımayı sağlar.

Tüm Yuvalarla Örnek

Bu örnekte Scaffold, tüm ana yuvaları kullanır: başlıklı TopAppBar, üç gezinme öğeli BottomBar ve ana eylem için FloatingActionButton.

@Composable
fun FullScaffold() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Uygulama") },
                navigationIcon = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Default.Menu, "Menu")
                    }
                }
            )
        },
        bottomBar = {
            NavigationBar {
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Home, "Ana Sayfa") },
                    label = { Text("Home") },
                    selected = true,
                    onClick = {}
                )
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Search, "Ara") },
                    label = { Text("Search") },
                    selected = false,
                    onClick = {}
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("Ekran İçeriği")
        }
    }
}

ScaffoldState: Drawer ve Snackbar Yönetimi

ScaffoldState, DrawerState ve SnackbarHostState'i birleştiren Scaffold'un durum nesnesidir. DrawerState yan menünün açılıp kapanmasını yönetirken, SnackbarHostState Snackbar'ın görüntülenmesini ve gizlenmesini yönetir. Durum rememberScaffoldState() aracılığıyla oluşturulur ve scaffoldState parametresine iletilir.

DrawerState, programatik Drawer kontrolü için open ve close yöntemleri sağlar. Drawer durumu açık, kapalı veya kısmen açık olabilir. drawerGesturesEnabled, Drawer'ı açmak için kaydırma hareketini devre dışı bırakarak yalnızca bir düğme aracılığıyla programatik açmaya izin verir.

SnackbarHostState, Snackbar'ı — ekranın alt kısmındaki geçici bildirimleri — yönetir. showSnackbar yöntemi, bir mesaj ve isteğe bağlı bir eylem içeren bir Snackbar görüntüler. Material Design Guidelines, 2025'e göre Snackbar, kritik öneme sahip olmayan kısa mesajlar için kullanılmalıdır.

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

    Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(
                title = { Text("Menü") },
                navigationIcon = {
                    IconButton(onClick = {
                        scope.launch {
                            scaffoldState.drawerState.open()
                        }
                    }) {
                        Icon(Icons.Default.Menu, "Menu")
                    }
                }
            )
        },
        drawerContent = {
            Column(modifier = Modifier.padding(16.dp)) {
                Text("Öğe 1")
                Text("Öğe 2")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("İçerik")
        }
    }
}

Scaffold ile Ekran Oluşturma Örneği

Scaffold ile tam bir ekran örneği, FAB'ye basıldığında bildirimleri görüntülemek için TopAppBar, BottomNavigation, FloatingActionButton ve Snackbar içerir. Durum koordinasyonu için ScaffoldState tüm bileşenlere iletilir.

@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, "Ana Sayfa") },
                    label = { Text("Home") }, selected = true, onClick = {})
                NavigationBarItem(icon = { Icon(Icons.Default.Settings, "Ayarlar") },
                    label = { Text("Settings") }, selected = false, onClick = {})
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {
                scope.launch {
                    state.snackbarHostState.showSnackbar("Tamam")
                }
            }) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { padding ->
        Box(
            modifier = Modifier.padding(padding).fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text("Hoş Geldiniz")
        }
    }
}

InnerPadding ve Scaffold ile Uyarlanabilir Düzen

innerPadding, Scaffold'un content bloğuna ilettiği PaddingValues'dur. İçeriğin statusBar, navigationBar, topBar ve bottomBar ile örtüşmesini önlemek için gereken kenar boşluklarını içerir. Farklı cihazlarda doğru görüntüleme için innerPadding kullanımı zorunludur.

Scaffold, sistem kenar boşluklarına ve kurulu yuvaların yüksekliğine göre innerPadding'i otomatik olarak hesaplar. Kamera adası veya ekran kesmesi olan cihazlarda Scaffold, durum çubuğu için kenar boşluklarını ayarlar. Fiziksel düğmelere sahip eski cihazlarda alt kenar boşluğu bulunmayabilir.

Android Developers, 2024'e göre innerPadding, Modifier.padding(innerPadding) aracılığıyla içeriğin kök kapsayıcısına uygulanmalıdır. İçerik kaydırılabilir bir kapsayıcı kullanıyorsa, innerPadding klavye ve sistem hareketlerinin doğru çalışması için Modifier.consumeWindowInsets aracılığıyla uygulanır.

• Modifier.padding(innerPadding) aracılığıyla içeriğin kök kapsayıcısına innerPadding uygulayın
• Kaydırılabilir kapsayıcılar için Modifier.consumeWindowInsets(innerPadding) kullanın
• Durum çubuğu için ekstra kenar boşluğu eklemeyin — Scaffold bunu otomatik olarak yapar
• topBar veya bottomBar yoksa innerPadding'deki ilgili kenar boşlukları sıfır olacaktır