Scaffold v Jetpack Compose — co to je, vlastnosti a jak funguje

Co je Scaffold v Jetpack Compose

Scaffold — je funkce composable, která implementuje kostru obrazovky podle specifikace Material Design. Scaffold není kontejner v běžném smyslu — je to správce rozvržení, který koordinuje umístění několika standardních komponent Material na obrazovce.

Scaffold řídí mezery pro TopAppBar, BottomBar a FloatingActionButton, stejně jako systémové prvky — stavový řádek a navigační panel. To zaručuje, že obsah nepřekrývá systémové prvky a je v souladu s pokyny Material Design.

Podle Material Design Guidelines, 2025 by měl být Scaffold kořenovým prvkem každé obrazovky aplikace. Nahrazuje zastaralý CoordinatorLayout ze systému View a poskytuje jednodušší a deklarativnější API pro stavbu rozvržení obrazovky.

Základní signatura Scaffold

Scaffold přijímá parametry modifier, scaffoldState, topBar, bottomBar, floatingActionButton, drawerContent, snackbarHost a content. Parametr content obdrží PaddingValues — mezery, které musí hlavní obsah zohlednit.

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

Sloty Scaffold: topBar, bottomBar a floatingActionButton

topBar — slot pro umístění horního panelu aplikace, obvykle TopAppBar nebo LargeTopAppBar. Scaffold automaticky přidá mezeru do innerPadding pro obsah, aby nepřekrýval topBar. TopAppBar může obsahovat název, navigační ikonu a akce.

bottomBar — slot pro dolní navigační panel. Podporuje BottomNavigation, BottomAppBar nebo NavigationBar. Scaffold bere v úvahu výšku bottomBar při výpočtu innerPadding pro obsah. Podle Material Design Guidelines, 2025 by se bottomBar měl používat na obrazovkách se 3–5 navigačními body.

floatingActionButton — slot pro plovoucí tlačítko akce. Scaffold automaticky umístí FAB podle specifikace Material Design — v pravém dolním rohu se správnou mezerou. floatingActionButtonPosition umožňuje přesunout FAB do středu spodního okraje obrazovky.

Příklad se všemi sloty

V tomto příkladu Scaffold používá všechny hlavní sloty: TopAppBar s názvem, BottomBar se třemi navigačními prvky a FloatingActionButton pro hlavní akci.

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

ScaffoldState: správa Drawer a Snackbar

ScaffoldState — objekt stavu Scaffold, který spojuje DrawerState a SnackbarHostState. DrawerState řídí otevírání a zavírání postranní nabídky a SnackbarHostState zobrazování a skrývání Snackbar. Stav se vytváří pomocí rememberScaffoldState() a předává se parametru scaffoldState.

DrawerState poskytuje metody open a close pro programové řízení Drawer. Stav Drawer může být otevřený, zavřený nebo částečně otevřený. drawerGesturesEnabled umožňuje zakázat gesto otevírání Drawer tažením, ponechat pouze programové otevírání tlačítkem.

SnackbarHostState řídí Snackbar — dočasná oznámení ve spodní části obrazovky. Metoda showSnackbar zobrazí Snackbar se zprávou a volitelnou akcí. Podle Material Design Guidelines, 2025 by se Snackbar měl používat pro krátké zprávy bez kriticky důležitých informací.

@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("Položka 1")
                Text("Položka 2")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("Obsah")
        }
    }
}

Příklad stavby obrazovky se Scaffold

Úplný příklad obrazovky se Scaffold zahrnuje TopAppBar, BottomNavigation, FloatingActionButton a Snackbar pro zobrazení oznámení při stisku FAB. ScaffoldState je předán všem komponentám pro koordinaci stavu.

@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, "Domů") },
                    label = { Text("Home") }, selected = true, onClick = {})
                NavigationBarItem(icon = { Icon(Icons.Default.Settings, "Nastavení") },
                    label = { Text("Settings") }, selected = false, onClick = {})
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {
                scope.launch {
                    state.snackbarHostState.showSnackbar("Hotovo")
                }
            }) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { padding ->
        Box(
            modifier = Modifier.padding(padding).fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text("Vítejte")
        }
    }
}

InnerPadding a adaptivní layout se Scaffold

innerPadding — jsou PaddingValues, které Scaffold předává do content bloku. Obsahují mezery nezbytné k tomu, aby obsah nepřekrýval statusBar, navigationBar, topBar a bottomBar. Použití innerPadding je povinné pro správné zobrazení na různých zařízeních.

Scaffold automaticky vypočítává innerPadding na základě systémových mezer a výšky nainstalovaných slotů. Na zařízeních s kamerovým ostrovem nebo výřezem v obrazovce Scaffold upravuje mezery pro stavový řádek. Na starších zařízeních s fyzickými tlačítky může být spodní mezera nulová.

Podle Android Developers, 2024 by měl být innerPadding aplikován na kořenový kontejner obsahu pomocí Modifier.padding(innerPadding). Pokud obsah používá posouvání kontejner, innerPadding se aplikuje pomocí Modifier.consumeWindowInsets pro správnou funkci klávesnice a systémových gest.

• Aplikujte innerPadding na kořenový kontejner obsahu pomocí Modifier.padding(innerPadding)
• Pro posouvací kontejnery použijte Modifier.consumeWindowInsets(innerPadding)
• Nepřidávejte další mezery pro stavový řádek — Scaffold to dělá automaticky
• Při absenci topBar nebo bottomBar budou odpovídající mezery v innerPadding nulové