Scaffold în Jetpack Compose — ce este, proprietăți și cum funcționează

Ce este Scaffold în Jetpack Compose

Scaffold — este o funcție composable care implementează cadrul ecranului conform specificației Material Design. Scaffold nu este un container în sensul obișnuit — este un manager de layout care coordonează amplasarea mai multor componente standard Material pe ecran.

Scaffold gestionează spațierile pentru TopAppBar, BottomBar și FloatingActionButton, precum și elementele de sistem — bara de stare și panoul de navigare. Aceasta garantează că conținutul nu se suprapune peste elementele de sistem și respectă ghidurile Material Design.

Potrivit Material Design Guidelines, 2025, Scaffold ar trebui să fie elementul rădăcină al fiecărui ecran al aplicației. Acesta înlocuiește CoordinatorLayout învechit din sistemul View și oferă o API mai simplă și mai declarativă pentru construirea layout-ului ecranului.

Semnătura de bază a Scaffold

Scaffold acceptă parametrii modifier, scaffoldState, topBar, bottomBar, floatingActionButton, drawerContent, snackbarHost și content. Parametrul content primește PaddingValues — spațierile pe care conținutul principal trebuie să le ia în considerare.

@Composable
fun BasicScaffold() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Acasă") }
            )
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, contentDescription = "Add")
            }
        }
    ) { innerPadding ->
        Column(
            modifier = Modifier.padding(innerPadding)
        ) {
            Text("Conținut principal")
        }
    }
}

Sloturile Scaffold: topBar, bottomBar și floatingActionButton

topBar — slot pentru amplasarea panoului superior al aplicației, de obicei TopAppBar sau LargeTopAppBar. Scaffold adaugă automat un spațiu în innerPadding pentru conținut, astfel încât acesta să nu se suprapună peste topBar. TopAppBar poate conține un titlu, o pictogramă de navigare și acțiuni.

bottomBar — slot pentru panoul de navigare inferior. Suportă BottomNavigation, BottomAppBar sau NavigationBar. Scaffold ia în considerare înălțimea bottomBar la calcularea innerPadding pentru conținut. Potrivit Material Design Guidelines, 2025, bottomBar ar trebui utilizat pe ecrane cu 3–5 puncte de navigare.

floatingActionButton — slot pentru butonul de acțiune plutitor. Scaffold poziționează automat FAB conform specificației Material Design — în colțul din dreapta jos cu un spațiu corect. floatingActionButtonPosition permite mutarea FAB în centrul marginii inferioare a ecranului.

Exemplu cu toate sloturile

În acest exemplu, Scaffold utilizează toate sloturile principale: TopAppBar cu titlu, BottomBar cu trei elemente de navigare și FloatingActionButton pentru acțiunea principală.

@Composable
fun FullScaffold() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Aplicație") },
                navigationIcon = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Default.Menu, "Menu")
                    }
                }
            )
        },
        bottomBar = {
            NavigationBar {
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Home, "Acasă") },
                    label = { Text("Home") },
                    selected = true,
                    onClick = {}
                )
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Search, "Căutare") },
                    label = { Text("Search") },
                    selected = false,
                    onClick = {}
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("Conținutul ecranului")
        }
    }
}

ScaffoldState: gestionarea Drawer și Snackbar

ScaffoldState — obiectul de stare al Scaffold care combină DrawerState și SnackbarHostState. DrawerState gestionează deschiderea și închiderea meniului lateral, iar SnackbarHostState — afișarea și ascunderea Snackbar. Starea este creată prin rememberScaffoldState() și transmisă parametrului scaffoldState.

DrawerState oferă metodele open și close pentru gestionarea programatică a Drawer. Starea Drawer poate fi deschisă, închisă sau parțial deschisă. drawerGesturesEnabled permite dezactivarea gestului de deschidere a Drawer prin glisare, păstrând doar deschiderea programatică prin buton.

SnackbarHostState gestionează Snackbar — notificări temporare în partea inferioară a ecranului. Metoda showSnackbar afișează Snackbar cu un mesaj și o acțiune opțională. Potrivit Material Design Guidelines, 2025, Snackbar ar trebui utilizat pentru mesaje scurte fără informații critic de importante.

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

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

Exemplu de construire a ecranului cu Scaffold

Un exemplu complet de ecran cu Scaffold include TopAppBar, BottomNavigation, FloatingActionButton și Snackbar pentru afișarea notificărilor la apăsarea FAB. ScaffoldState este transmis tuturor componentelor pentru coordonarea stării.

@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, "Acasă") },
                    label = { Text("Home") }, selected = true, onClick = {})
                NavigationBarItem(icon = { Icon(Icons.Default.Settings, "Setări") },
                    label = { Text("Settings") }, selected = false, onClick = {})
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {
                scope.launch {
                    state.snackbarHostState.showSnackbar("Gata")
                }
            }) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { padding ->
        Box(
            modifier = Modifier.padding(padding).fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text("Bun venit")
        }
    }
}

InnerPadding și layout adaptiv cu Scaffold

innerPadding — sunt PaddingValues pe care Scaffold le transmite blocului content. Acestea conțin spațierile necesare pentru ca conținutul să nu se suprapună peste statusBar, navigationBar, topBar și bottomBar. Utilizarea innerPadding este obligatorie pentru afișarea corectă pe diferite dispozitive.

Scaffold calculează automat innerPadding pe baza spațierilor de sistem și a înălțimii sloturilor instalate. Pe dispozitivele cu insulă de cameră sau decupaj în ecran, Scaffold ajustează spațierile pentru bara de stare. Pe dispozitivele mai vechi cu butoane fizice, spațiul inferior poate fi zero.

Potrivit Android Developers, 2024, innerPadding trebuie aplicat containerului rădăcină al conținutului prin Modifier.padding(innerPadding). Dacă conținutul utilizează un container derulabil, innerPadding se aplică prin Modifier.consumeWindowInsets pentru funcționarea corectă a tastaturii și gesturilor de sistem.

• Aplicați innerPadding containerului rădăcină al conținutului prin Modifier.padding(innerPadding)
• Pentru containere derulabile utilizați Modifier.consumeWindowInsets(innerPadding)
• Nu adăugați spații suplimentare pentru bara de stare — Scaffold face acest lucru automat
• În absența topBar sau bottomBar, spațierile corespunzătoare în innerPadding vor fi zero