Jetpack Compose-da Scaffold — bu nədir, xüsusiyyətləri və necə işləyir

Jetpack Compose-da Scaffold nədir

Scaffold — Material Design spesifikasiyasına uyğun ekran çərçivəsini həyata keçirən composable funksiyadır. Scaffold adi mənada konteyner deyil — bu, ekranda bir neçə standart Material komponentinin yerləşdirilməsini koordinasiya edən layout meneceridir.

Scaffold TopAppBar, BottomBar və FloatingActionButton üçün boşluqları, həmçinin sistem elementlərini — status paneli və naviqasiya panelini idarə edir. Bu, məzmunun sistem elementlərinin üzərinə düşməməsini və Material Design təlimatlaryna uyğun olmasını təmin edir.

Material Design Guidelines, 2025 məlumatlarına görə, Scaffold tətbiqin hər bir ekranının kök elementi olmalıdır. O, View sistemindən köhnəlmiş CoordinatorLayout-ı əvəz edir və ekran layoutunun qurulması üçün daha sadə və deklarativ API təmin edir.

Scaffold-un əsas imzası

Scaffold modifier, scaffoldState, topBar, bottomBar, floatingActionButton, drawerContent, snackbarHost və content parametrlərini qəbul edir. Content parametri əsas məzmunun nəzərə almalı olduğu boşluqları — PaddingValues alır.

@Composable
fun BasicScaffold() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Ana səhifə") }
            )
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, contentDescription = "Add")
            }
        }
    ) { innerPadding ->
        Column(
            modifier = Modifier.padding(innerPadding)
        ) {
            Text("Əsas məzmun")
        }
    }
}

Scaffold slotları: topBar, bottomBar və floatingActionButton

topBar — tətbiqin yuxarı panelinin yerləşdirilməsi üçün slot, adətən TopAppBar və ya LargeTopAppBar. Scaffold məzmunun topBar-ın üzərinə düşməməsi üçün innerPadding-ə avtomatik boşluq əlavə edir. TopAppBar başlıq, naviqasiya ikonu və əməliyyatlar ehtiva edə bilər.

bottomBar — aşağı naviqasiya paneli üçün slot. BottomNavigation, BottomAppBar və ya NavigationBar dəstəkləyir. Scaffold məzmun üçün innerPadding hesablayarkən bottomBar hündürlüyünü nəzərə alır. Material Design Guidelines, 2025-ə görə, bottomBar 3–5 naviqasiya nöqtəsi olan ekranlarda istifadə edilməlidir.

floatingActionButton — üzən hərəkət düyməsi üçün slot. Scaffold FAB-ı Material Design spesifikasiyasına uyğun olaraq avtomatik yerləşdirir — sağ aşağı küncdə düzgün boşluqla. floatingActionButtonPosition FAB-ı ekranın aşağı kənarının mərkəzinə köçürməyə imkan verir.

Bütün slotlarla nümunə

Bu nümunədə Scaffold bütün əsas slotlardan istifadə edir: başlıqlı TopAppBar, üç naviqasiya elementi olan BottomBar və əsas əməliyyat üçün FloatingActionButton.

@Composable
fun FullScaffold() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Tətbiq") },
                navigationIcon = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Default.Menu, "Menu")
                    }
                }
            )
        },
        bottomBar = {
            NavigationBar {
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Home, "Ana səhifə") },
                    label = { Text("Home") },
                    selected = true,
                    onClick = {}
                )
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Search, "Axtar") },
                    label = { Text("Search") },
                    selected = false,
                    onClick = {}
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("Ekran məzmunu")
        }
    }
}

ScaffoldState: Drawer və Snackbar-ın idarə edilməsi

ScaffoldState — DrawerState və SnackbarHostState birləşdirən Scaffold vəziyyət obyektidir. DrawerState yan menyunun açılması və bağlanmasını, SnackbarHostState isə Snackbar-ın göstərilməsi və gizlədilməsini idarə edir. Vəziyyət rememberScaffoldState() vasitəsilə yaradılır və scaffoldState parametrinə ötürülür.

DrawerState Drawer-ın proqram idarə edilməsi üçün open və close metodlarını təmin edir. Drawer vəziyyəti açıq, bağlı və ya qismən açıq ola bilər. drawerGesturesEnabled sürüşdürmə ilə Drawer açma jestini söndürməyə imkan verir, yalnız düymə ilə proqram açılmasını saxlayır.

SnackbarHostState Snackbar-ı idarə edir — ekranın aşağı hissəsində müvəqqəti bildirişlər. showSnackbar metodu mesaj və isteğə bağlı əməliyyatla Snackbar göstərir. Material Design Guidelines, 2025-ə görə, Snackbar kritik vacib məlumat olmadan qısa mesajlar üçün istifadə edilməlidir.

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

    Scaffold(
        scaffoldState = scaffoldState,
        topBar = {
            TopAppBar(
                title = { Text("Menyu") },
                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("Məzmun")
        }
    }
}

Scaffold ilə ekran qurulması nümunəsi

Scaffold ilə tam ekran nümunəsi TopAppBar, BottomNavigation, FloatingActionButton və FAB-ı basdıqda bildirişləri göstərmək üçün Snackbar daxildir. ScaffoldState vəziyyətin koordinasiyası üçün bütün komponentlərə ötürülür.

@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 səhifə") },
                    label = { Text("Home") }, selected = true, onClick = {})
                NavigationBarItem(icon = { Icon(Icons.Default.Settings, "Parametrlər") },
                    label = { Text("Settings") }, selected = false, onClick = {})
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {
                scope.launch {
                    state.snackbarHostState.showSnackbar("Hazırdır")
                }
            }) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { padding ->
        Box(
            modifier = Modifier.padding(padding).fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text("Xoş gəldiniz")
        }
    }
}

InnerPadding və Scaffold ilə adaptiv layout

innerPadding — Scaffold-un content blokuna ötürən PaddingValues-dir. Onlar məzmunun statusBar, navigationBar, topBar və bottomBar üzərinə düşməməsi üçün lazım olan boşluqları ehtiva edir. innerPadding-dən istifadə müxtəlif cihazlarda düzgün görüntüləmə üçün məcburidir.

Scaffold innerPadding-i sistem boşluqları və quraşdırılmış slotların hündürlüyü əsasında avtomatik hesablayır. Kamera adası və ya ekran kəsikliyi olan cihazlarda Scaffold status paneli üçün boşluqları düzəldir. Fiziki düymələri olan köhnə cihazlarda aşağı boşluq sıfır ola bilər.

Android Developers, 2024 məlumatlarına görə, innerPadding Modifier.padding(innerPadding) vasitəsilə məzmunun kök konteynerinə tətbiq edilməlidir. Məzmun sürüşdürülə bilən konteyner istifadə edirsə, innerPadding klaviatura və sistem jestlərinin düzgün işləməsi üçün Modifier.consumeWindowInsets vasitəsilə tətbiq edilir.

• innerPadding-i məzmunun kök konteynerinə Modifier.padding(innerPadding) vasitəsilə tətbiq edin
• Sürüşdürülə bilən konteynerlər üçün Modifier.consumeWindowInsets(innerPadding) istifadə edin
• Status paneli üçün əlavə boşluqlar əlavə etməyin — Scaffold bunu avtomatik edir
• topBar və ya bottomBar olmadıqda innerPadding-də müvafiq boşluqlar sıfır olacaq