Scaffold στο Jetpack Compose — τι είναι, ιδιότητες και πώς λειτουργεί

Τι είναι το Scaffold στο Jetpack Compose

Scaffold — είναι μια composable συνάρτηση που υλοποιεί το πλαίσιο οθόνης σύμφωνα με την προδιαγραφή Material Design. Το Scaffold δεν είναι δοχείο στη συνήθη έννοια — είναι ένας διαχειριστής διαταξης που συντονίζει τη θέση πολλών τυπικών στοιχείων Material στην οθόνη.

Το Scaffold διαχειρίζεται διαστήματα για TopAppBar, BottomBar και FloatingActionButton, καθώς και συστημικά στοιχεία — γραμμή κατάστασης και πίνακα πλοήγησης. Αυτό εγγυάται ότι το περιεχόμενο δεν επικαλύπτει τα συστημικά στοιχεία και συμμορφώνεται με τις οδηγίες Material Design.

Σύμφωνα με Material Design Guidelines, 2025, το Scaffold πρέπει να είναι το ριζικό στοιχείο κάθε οθόνης εφαρμογής. Αντικαθιστά τον απαρχαιωμένο CoordinatorLayout από το σύστημα View και παρέχει ένα απλούστερο και πιο δηλωτικό API για την δημιουργία διαταξης οθόνης.

Βασική υπογραφή του Scaffold

Scaffold δέχεται παραμέτρους modifier, scaffoldState, topBar, bottomBar, floatingActionButton, drawerContent, snackbarHost και content. Η παράμετρος content λαμβάνει PaddingValues — τα διαστήματα που πρέπει να λαμβάνει υπόψη το κύριο περιεχόμενο.

@Composable
fun BasicScaffold() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Αρχική") }
            )
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, contentDescription = "Add")
            }
        }
    ) { innerPadding ->
        Column(
            modifier = Modifier.padding(innerPadding)
        ) {
            Text("Κύριο περιεχόμενο")
        }
    }
}

Υποδοχές Scaffold: topBar, bottomBar και floatingActionButton

topBar — υποδοχή για την τοποθέτηση του άνω πίνακα εφαρμογής, συνήθως TopAppBar ή LargeTopAppBar. Το Scaffold προσθέτει αυτόματα ένα διάστημα στο innerPadding για το περιεχόμενο ωστε να μην επικαλύπτει το topBar. Το TopAppBar μπορεί να περιέχει τίτλο, εικονίδιο πλοήγησης και ενέργειες.

bottomBar — υποδοχή για τον κάτω πίνακα πλοήγησης. Υποστηρίζει BottomNavigation, BottomAppBar ή NavigationBar. Το Scaffold λαμβάνει υπόψη το ύψος του bottomBar κατά τον υπολογισμό του innerPadding για το περιεχόμενο. Σύμφωνα με Material Design Guidelines, 2025, το bottomBar πρέπει να χρησιμοποιείται σε οθόνες με 3–5 σημεία πλοήγησης.

floatingActionButton — υποδοχή για το πλευτό κουμπί ενέργειας. Το Scaffold τοποθετεί αυτόματα το FAB σύμφωνα με την προδιαγραφή Material Design — στη κάτω δεξιά γωνία με σωστό διάστημα. Το floatingActionButtonPosition επιτρέπει τη μετακίνηση του FAB στο κέντρο του κάτω άκρου της οθόνης.

Παράδειγμα με όλες τις υποδοχές

Σε αυτό το παράδειγμα, το Scaffold χρησιμοποιεί όλες τις κύριες υποδοχές: TopAppBar με τίτλο, BottomBar με τρία στοιχεία πλοήγησης και FloatingActionButton για την κύρια ενέργεια.

@Composable
fun FullScaffold() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Εφαρμογή") },
                navigationIcon = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Default.Menu, "Menu")
                    }
                }
            )
        },
        bottomBar = {
            NavigationBar {
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Home, "Αρχική") },
                    label = { Text("Home") },
                    selected = true,
                    onClick = {}
                )
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Search, "Αναζήτηση") },
                    label = { Text("Search") },
                    selected = false,
                    onClick = {}
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("Περιεχόμενο οθόνης")
        }
    }
}

ScaffoldState: διαχείριση Drawer και Snackbar

ScaffoldState — αντικείμενο κατάστασης του Scaffold που συνδυάζει το DrawerState και το SnackbarHostState. Το DrawerState διαχειρίζεται το άνοιγμα και κλείσιμο του πλευρικού μενού, και το SnackbarHostState την εμφάνιση και απόκρυψη του Snackbar. Η κατάσταση δημιουργείται μέσω rememberScaffoldState() και μεταβιβάζεται στην παράμετρο scaffoldState.

DrawerState παρέχει μεθόδους open και close για τον προγραμματικό έλεγχο του Drawer. Η κατάσταση του Drawer μπορεί να είναι ανοιχτή, κλειστή ή μερικά ανοιχτή. Το drawerGesturesEnabled επιτρέπει την απενεργοποίηση της χειρονομίας ανοίγματος του Drawer με σύρσιμο, αφήνοντας μόνο το προγραμματικό άνοιγμα μέσω κουμπιού.

SnackbarHostState διαχειρίζεται το Snackbar — προσωρινές ειδοποιήσεις στο κάτω μέρος της οθόνης. Η μέθοδος showSnackbar εμφανίζει το Snackbar με ένα μήνυμα και προαιρετική ενέργεια. Σύμφωνα με Material Design Guidelines, 2025, το Snackbar πρέπει να χρησιμοποιείται για σύντομα μηνύματα χωρίς κρίσιμες πληροφορίες.

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

    Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(
                title = { Text("Μενού") },
                navigationIcon = {
                    IconButton(onClick = {
                        scope.launch {
                            scaffoldState.drawerState.open()
                        }
                    }) {
                        Icon(Icons.Default.Menu, "Menu")
                    }
                }
            )
        },
        drawerContent = {
            Column(modifier = Modifier.padding(16.dp)) {
                Text("Στοιχείο 1")
                Text("Στοιχείο 2")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("Περιεχόμενο")
        }
    }
}

Παράδειγμα κατασκευής οθόνης με Scaffold

Ένα πλήρες παράδειγμα οθόνης με Scaffold περιλαμβάνει TopAppBar, BottomNavigation, FloatingActionButton και Snackbar για την εμφάνιση ειδοποιήσεων κατά το πάτημα στο FAB. Το ScaffoldState μεταβιβάζεται σε όλα τα στοιχεία για τον συντονισμό της κατάστασης.

@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, "Αρχική") },
                    label = { Text("Home") }, selected = true, onClick = {})
                NavigationBarItem(icon = { Icon(Icons.Default.Settings, "Ρυθμίσεις") },
                    label = { Text("Settings") }, selected = false, onClick = {})
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {
                scope.launch {
                    state.snackbarHostState.showSnackbar("Έγινε")
                }
            }) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { padding ->
        Box(
            modifier = Modifier.padding(padding).fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text("Καλώς ορίσατε")
        }
    }
}

InnerPadding και προσαρμοστική διαταξη με Scaffold

innerPadding — είναι PaddingValues που το Scaffold μεταβιβάζει στο content block. Περιέχουν τα απαραίτητα διαστήματα ώστε το περιεχόμενο να μην επικαλύπτει τα statusBar, navigationBar, topBar και bottomBar. Η χρήση του innerPadding είναι υποχρεωτική για σωστή εμφάνιση σε διαφορετικές συσκευές.

Το Scaffold υπολογίζει αυτόματα το innerPadding βάσει των συστημικών διαστημάτων και του ύψους των εγκατεστημένων υποδοχών. Σε συσκευές με νησί κάμερας ή εκκοπή οθόνης, το Scaffold προσαρμόζει τα διαστήματα για τη γραμμή κατάστασης. Σε παλαιότερες συσκευές με φυσικά κουμπιά, το κάτω διάστημα μπορεί να είναι μηδέν.

Σύμφωνα με Android Developers, 2024, το innerPadding πρέπει να εφαρμόζεται στο ριζικό δοχείο περιεχομένου μέσω Modifier.padding(innerPadding). Εάν το περιεχόμενο χρησιμοποιεί κυλίομενο δοχείο, το innerPadding εφαρμόζεται μέσω Modifier.consumeWindowInsets για σωστή λειτουργία πληκτρολογίου και συστημικών χειρονομιών.

• Εφαρμόστε το innerPadding στο ριζικό δοχείο περιεχομένου μέσω Modifier.padding(innerPadding)
• Για κυλίομενα δοχεία χρησιμοποιείστε Modifier.consumeWindowInsets(innerPadding)
• Μην προσθέτετε επιπλέον διαστήματα για τη γραμμή κατάστασης — το Scaffold το κάνει αυτόματα
• Σε περίπτωση απουσίας topBar ή bottomBar, τα αντίστοιχα διαστήματα στο innerPadding θα είναι μηδέν