Jetpack Compose-da Scaffold — bu nima, xususiyatlari va qanday ishlaydi

Jetpack Compose-da Scaffold nima

Scaffold — Material Design spetsifikatsiyasiga muvofiq ekran ramkasini amalga oshiradigan composable funksiyadir. Scaffold odatdagi maʼnoda konteyner emas — bu ekranda bir nechta standart Material komponentlarining joylashishini muvofiqlashtiradigan layout menejeridir.

Scaffold TopAppBar, BottomBar va FloatingActionButton üçün boʼl joylarni, shuningdek tizim elementlarini — holat paneli va navigatsiya panelini boshqaradi. Bu mazmunning tizim elementlari ustiga tushmasligini va Material Design koʼrʼsatmalariga mos kelishini kafolatlaydi.

Material Design Guidelines, 2025 maʼlumotlariga koʼra, Scaffold dasturning har bir ekranining ildiz elementi boʼlishi kerak. U View tizimidan eskirgan CoordinatorLayout oʼrnini egallaydi va ekran layoutini qurish üçün soddaroq va deklarativ API taqdim etadi.

Scaffold-ning asosiy imzosi

Scaffold modifier, scaffoldState, topBar, bottomBar, floatingActionButton, drawerContent, snackbarHost va content parametrlarini qabul qiladi. Content parametri asosiy mazmun hisobga olishi kerak boʼlgan boʼl joylarni — PaddingValues oladi.

@Composable
fun BasicScaffold() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Bosh sahifa") }
            )
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, contentDescription = "Add")
            }
        }
    ) { innerPadding ->
        Column(
            modifier = Modifier.padding(innerPadding)
        ) {
            Text("Asosiy mazmun")
        }
    }
}

Scaffold slotlari: topBar, bottomBar va floatingActionButton

topBar — dasturning yuqori panelini joylashtirish üçün slot, odatda TopAppBar yoki LargeTopAppBar. Scaffold mazmunning topBar ustiga tushmasligi üçün innerPadding-ga avtomatik boʼl joy qoʼshadi. TopAppBar sarlavha, navigatsiya belgisi va harakatlarni oʼz ichiga olishi mumkin.

bottomBar — pastki navigatsiya paneli üçün slot. BottomNavigation, BottomAppBar yoki NavigationBar-ni qoʼllab-quvvatlaydi. Scaffold mazmun üçün innerPadding hisoblashda bottomBar balandligini hisobga oladi. Material Design Guidelines, 2025 ga koʼra, bottomBar 3–5 navigatsiya nuqtasi boʼlgan ekranlarda ishlatilishi kerak.

floatingActionButton — suzuvchi harakat tugmasi üçün slot. Scaffold FAB-ni Material Design spetsifikatsiyasiga muvofiq avtomatik joylashtiradi — toʻgʻri boʼl joy bilan pastki oʼng burchakda. floatingActionButtonPosition FAB-ni ekranning pastki chetining markaziga koʼcirishga imkon beradi.

Barcha slotlar bilan namuna

Ushbu namunada Scaffold barcha asosiy slotlardan foydalanadi: sarlavhali TopAppBar, üç navigatsiya elementli BottomBar va asosiy harakat üçün FloatingActionButton.

@Composable
fun FullScaffold() {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("Ilova") },
                navigationIcon = {
                    IconButton(onClick = {}) {
                        Icon(Icons.Default.Menu, "Menu")
                    }
                }
            )
        },
        bottomBar = {
            NavigationBar {
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Home, "Bosh sahifa") },
                    label = { Text("Home") },
                    selected = true,
                    onClick = {}
                )
                NavigationBarItem(
                    icon = { Icon(Icons.Default.Search, "Qidirish") },
                    label = { Text("Search") },
                    selected = false,
                    onClick = {}
                )
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {}) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { innerPadding ->
        Box(modifier = Modifier.padding(innerPadding)) {
            Text("Ekran mazmuni")
        }
    }
}

ScaffoldState: Drawer va Snackbarni boshqarish

ScaffoldState — DrawerState va SnackbarHostState-ni birlashtiradigan Scaffold holat obyekti. DrawerState yon menyuning ochilishi va yopilishini, SnackbarHostState esa Snackbar-ni koʼrsatish va yashirishni boshqaradi. Holat rememberScaffoldState() orqali yaratiladi va scaffoldState parametriga uzatiladi.

DrawerState Drawer-ni dasturiy boshqarish üçün open va close metodlarini taqdim etadi. Drawer holati ochiq, yopiq yoki qisman ochiq boʼlishi mumkin. drawerGesturesEnabled surish orqali Drawer ochish imo-ishorasini oʼchirishga imkon beradi, faqat tugma orqali dasturiy ochishni qoldiradi.

SnackbarHostState Snackbar-ni boshqaradi — ekranning pastki qismidagi vaqtinchalik bildirishnomalar. showSnackbar metodi xabar va ixtiyoriy harakat bilan Snackbar koʼrsatadi. Material Design Guidelines, 2025 ga koʼra, Snackbar muhim boʼlmagan qisqa xabarlar üçün ishlatilishi kerak.

@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("Mazmun")
        }
    }
}

Scaffold bilan ekran qurish namunasi

Scaffold bilan toʼliq ekran namunasi TopAppBar, BottomNavigation, FloatingActionButton va FAB bosilganda bildirishnomalarni koʼrsatish üçün Snackbar-ni oʼz ichiga oladi. ScaffoldState holatni muvofiqlashtirish üçün barcha komponentlarga uzatiladi.

@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, "Bosh sahifa") },
                    label = { Text("Home") }, selected = true, onClick = {})
                NavigationBarItem(icon = { Icon(Icons.Default.Settings, "Sozlamalar") },
                    label = { Text("Settings") }, selected = false, onClick = {})
            }
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {
                scope.launch {
                    state.snackbarHostState.showSnackbar("Tayyor")
                }
            }) {
                Icon(Icons.Default.Add, "Add")
            }
        }
    ) { padding ->
        Box(
            modifier = Modifier.padding(padding).fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text("Xush kelibsiz")
        }
    }
}

InnerPadding va Scaffold bilan adaptiv layout

innerPadding — Scaffold content blokiga uzatadigan PaddingValues. Ular mazmunning statusBar, navigationBar, topBar va bottomBar ustiga tushmasligi üçün zarur boʼlgan boʼl joylarni oʼz ichiga oladi. innerPadding-dan foydalanish turli qurilmalarda toʻgʻri koʼrsatish üçün majburiydir.

Scaffold innerPadding-ni tizim boʼl joylari va oʼznatilgan slotlar balandligi asosida avtomatik hisoblaydi. Kamera oroli yoki ekran kesmasi boʼlgan qurilmalarda Scaffold holat paneli üçün boʼl joylarni tuzatadi. Fizik tugmalari boʼlgan eski qurilmalarda pastki boʼl joy nolga teng boʼlishi mumkin.

Android Developers, 2024 maʼlumotlariga koʼra, innerPadding Modifier.padding(innerPadding) orqali mazmunning ildiz konteyneriga qoʼllanilishi kerak. Agar mazmun aylantiriladigan konteynerdan foydalansa, innerPadding klaviatura va tizim imo-ishoralarining toʻgʻri ishlashi üçün Modifier.consumeWindowInsets orqali qoʼllaniladi.

• innerPadding-ni mazmunning ildiz konteyneriga Modifier.padding(innerPadding) orqali qoʼllang
• Aylantiriladigan konteynerlar üçün Modifier.consumeWindowInsets(innerPadding) dan foydalaning
• Holat paneli üçün qoʼshimcha boʼl joylar qoʼshmang — Scaffold buni avtomatik qiladi
• topBar yoki bottomBar boʼlmaganda, innerPadding-dagi tegishli boʼl joylar nolga teng boʼladi