Scaffold a Jetpack Compose-ban — mi ez, tulajdonságai és hogyan működik

Mi az a Scaffold a Jetpack Compose-ban

Scaffold — egy composable függvény, amely a képernyőkeretet valósítja meg a Material Design specifikáció szerint. A Scaffold nem egy konténer a hagyományos értelemben — ez egy elrendezéskezelő, amely több szabványos Material komponens elhelyezését koordinálja a képernyőn.

A Scaffold kezeli a távolságokat a TopAppBar, BottomBar és FloatingActionButton számára, valamint a rendszerelemeket — az állapotsort és a navigációs panelt. Ez garantálja, hogy a tartalom nem fedi át a rendszerelemeket, és megfelel a Material Design útmutatóinak.

A Material Design Guidelines, 2025 szerint a Scaffoldnak minden alkalmazási képernyő gyökérelemének kell lennie. Ez helyettesíti az elavult CoordinatorLayout-ot a View rendszerből, és egyszerűbb és deklaratívabb API-t biztosít a képernyőelrendezés építéséhez.

A Scaffold alap aláírása

Scaffold elfogadja a modifier, scaffoldState, topBar, bottomBar, floatingActionButton, drawerContent, snackbarHost és content paramétereket. A content paraméter PaddingValues értékeket kap — a távolságokat, amelyeket a fő tartalomnak figyelembe kell vennie.

@Composable
fun BasicScaffold() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Kezdőlap") }
            )
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, contentDescription = "Add")
            }
        }
    ) { innerPadding ->
        Column(
            modifier = Modifier.padding(innerPadding)
        ) {
            Text("Fő tartalom")
        }
    }
}

Scaffold slotok: topBar, bottomBar és floatingActionButton

topBar — slot az alkalmazás felső paneljének elhelyezésére, általában TopAppBar vagy LargeTopAppBar. A Scaffold automatikusan hozzáad egy távolságot az innerPaddinghez a tartalom számára, hogy az ne fedje a topBar-t. A TopAppBar tartalmazhat címet, navigációs ikont és műveleteket.

bottomBar — slot az alsó navigációs panel számára. Támogatja a BottomNavigation, BottomAppBar és NavigationBar elemeket. A Scaffold figyelembe veszi a bottomBar magasságát az innerPadding kiszámításakor a tartalom számára. A Material Design Guidelines, 2025 szerint a bottomBar-t 3–5 navigációs ponttal rendelkező képernyőkön kell használni.

floatingActionButton — slot az lebegő művelet gomb számára. A Scaffold automatikusan pozícionálja a FAB-ot a Material Design specifikáció szerint — a jobb alsó sarokban megfelelő távolsággal. A floatingActionButtonPosition lehetővé teszi a FAB áthelyezését a képernyő alsó szélének közepére.

Példa az összes slot használatával

Ebben a példában a Scaffold az összes fő slotot használja: TopAppBar címmel, BottomBar három navigációs elemmel és FloatingActionButton a fő művelethez.

@Composable
fun FullScaffold() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Alkalmazás") },
                navigationIcon = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Default.Menu, "Menu")
                    }
                }
            )
        },
        bottomBar = {
            NavigationBar {
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Home, "Kezdőlap") },
                    label = { Text("Home") },
                    selected = true,
                    onClick = {}
                )
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Search, "Keresés") },
                    label = { Text("Search") },
                    selected = false,
                    onClick = {}
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("Képernyő tartalom")
        }
    }
}

ScaffoldState: a Drawer és Snackbar kezelése

ScaffoldState — a Scaffold állapotobjektuma, amely összekapcsolja a DrawerState és SnackbarHostState elemeket. A DrawerState az oldalsáv megnyitását és bezárását, a SnackbarHostState pedig a Snackbar megjelenítését és elrejtését kezeli. Az állapot a rememberScaffoldState() segítségével jön létre, és a scaffoldState paraméternek kerül átadásra.

DrawerState open és close metódusokat biztosít a Drawer programozott kezeléséhez. A Drawer állapota lehet nyitott, zárt vagy részben nyitott. A drawerGesturesEnabled lehetővé teszi a Drawer húzással történő megnyitásának letiltását, csak a gombos programozott megnyitást hagyva meg.

SnackbarHostState kezeli a Snackbar-t — ideiglenes értesítéseket a képernyő alsó részén. A showSnackbar metódus megjeleníti a Snackbar-t üzenettel és opcionális művelettel. A Material Design Guidelines, 2025 szerint a Snackbar-t rövid üzenetekhez kell használni kritikus fontosságú információ nélkül.

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

Példa képernyő építésére Scaffolddal

Egy teljes képernyőpélda a Scaffold használatával magában foglalja a TopAppBar, BottomNavigation, FloatingActionButton és Snackbar elemeket az értesítések megjelenítéséhez a FAB megnyomásakor. A ScaffoldState minden komponensnek átadásra kerül az állapot összehangolásához.

@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, "Kezdőlap") },
                    label = { Text("Home") }, selected = true, onClick = {})
                NavigationBarItem(icon = { Icon(Icons.Default.Settings, "Beállítások") },
                    label = { Text("Settings") }, selected = false, onClick = {})
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {
                scope.launch {
                    state.snackbarHostState.showSnackbar("Kész")
                }
            }) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { padding ->
        Box(
            modifier = Modifier.padding(padding).fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text("Üdvözöljük")
        }
    }
}

InnerPadding és adaptív layout Scaffolddal

innerPadding — PaddingValues értékek, amelyeket a Scaffold a content blokknak továbbít. Ezek tartalmazzák a szükséges távolságokat, hogy a tartalom ne fedje át a statusBar, navigationBar, topBar és bottomBar elemeket. Az innerPadding használata kötelező a különböző eszközökön történő helyes megjelenítéshez.

A Scaffold automatikusan kiszámítja az innerPadding értékét a rendszer távolságai és a telepített slotok magassága alapján. Kameraszigettel vagy kivágással rendelkező eszközökön a Scaffold igazítja az állapotsor távolságait. A fizikai gombokkal rendelkező régebbi eszközökön az alsó távolság nulla lehet.

A Android Developers, 2024 szerint az innerPadding-et a tartalom gyökérkonténerére kell alkalmazni a Modifier.padding(innerPadding) segítségével. Ha a tartalom görgethető konténert használ, az innerPadding a Modifier.consumeWindowInsets segítségével kerül alkalmazásra a billentyűzet és a rendszermozdulatok helyes működéséhez.

• Alkalmazza az innerPadding-et a tartalom gyökérkonténerére a Modifier.padding(innerPadding) segítségével
• Görgethető konténerekhez használja a Modifier.consumeWindowInsets(innerPadding) elemet
• Ne adjon hozzá további távolságokat az állapotsor számára — a Scaffold ezt automatikusan megteszi
• topBar vagy bottomBar hiányában a megfelelő távolságok az innerPadding-ben nullák lesznek