Scaffold

Bir ekranın düzeni: içeriğin çevresinde bir üst bar, bir alt bar ve bir yan bar, içeriğin üstünde uygulamanın snackbar'ları.

import com.pantrixui.components.container.scaffold.PantrixScaffold

• Üç bar. topBar, bottomBar ve sideBar. Yan bar scaffold'un tam yüksekliğinde, başlangıç kenarında durur, sağdan sola düzende sağda; üst ve alt bar kalan genişliğe yayılır.
• İçeriğin payı. İçerik bar'ların altına kadar uzanır. content'e verilen padding her kenarda bar'ın boyu ya da bar'ı olmayan kenarın pencere payıdır, hangisi büyükse. Bir listeye contentPadding olarak verilir: liste bar'ların altından kayar.
• Pencere payları. Her yuvaya, dokunduğu pencere kenarlarının payı insets olarak verilir: bar dolgusunu sistem çubuğunun arkasına uzatır, içeriğini güvenli alanda tutar. Üstteki bir kapsayıcının tükettiği pay yeniden verilmez.
• Uyarlanabilir gezinme. navigation alan ikinci PantrixScaffold, gezinmeyi kendi genişliğine göre taşır: 600dp'den darken alt kenarda, o genişlikten itibaren başlangıç kenarında. Eşik ScaffoldStyle ile değişir.
• Masadaki katlanır cihaz. Yarı açık ve katı yatay duran bir cihazda gezinme, genişlik ne olursa olsun altta kalır.
• Sistemin dikey bar'ı. iPhone Duo'nun dış ekranında sistem, sağ kenar boyunca dik duran bar'lar için bir sütun ayırır; tepesinde durum çubuğu durur. O sütuna uzanan scaffold gezinmeyi sütunun dibine koyar (ScaffoldNavigationPlacement.VerticalBar): orada dik duran bir PantrixNavigationBar çizilir. İçindeki bir PantrixTopBar da geri düğmesini ve eylemlerini sütunun tepesine, durum çubuğunun altına verir; başlığı yerinde kalır. Bunu yalnızca dik duran ve menteşesi olmayan bir pencerede yapar: iç ekranda ve yatayda sütunda durum çubuğu yalnız kalır, gezinme ve düğmeler her zamanki yerindedir. İç içe iki scaffold'dan sütunu dıştaki tutar.
• Snackbar'lar. snackbars verilen scaffold onları içeriğin üstünde, bar'ların arasında gösterir ve içindeki her şeye LocalPantrixSnackbars ile verir.
• Renk. containerColor her şeyin arkasına, sistem çubuklarının da arkasına çizilir. Temanın zeminlerinde scaffold içerik rengi vermez; bir rolün dolgusunda o dolguyla eşleşen rengi verir.
• Sıra. Klavye ve ekran okuyucu yan bar'dan üst bar'a, dikey bar'daki düğmelere, içeriğe, alt bar'a ve snackbar'lara doğru gezer. Bar'lar ve snackbar'lar içeriğin üstüne çizilir.

Örnekler

Üst bar ve içeriğin payı

Bir üst bar ve altında kayan bir liste. topBar bir insets alır ve bar'a verir. İçerik scaffold'un tamamını doldurur, bar'ın altını da: content'e gelen padding listeye contentPadding olarak verildi, böylece ilk satır bar'ın altında başlar ve liste kaydıkça bar'ın altından geçer. Liste başından ayrılınca bar alt kenarına bir çizgi çeker (scrolled).

Scaffold sayfanın içinde olduğu için yüksekliği verildi ve windowInsets sıfırlandı; bir ekranda ikisi de yazılmaz.

val list = rememberLazyListState()
PantrixScaffold(
    modifier = Modifier.height(320.dp).border(1.dp, PantrixTheme.colors.divider),
    topBar = { insets ->
        PantrixTopBar(
            title = "Gelen Kutusu",
            scrolled = list.canScrollBackward,
            insets = insets,
            tagKey = "scaffold_inbox"
        )
    },
    windowInsets = WindowInsets(0)
) { padding ->
    LazyColumn(modifier = Modifier.fillMaxSize(), state = list, contentPadding = padding) {
        items(20) { index ->
            PantrixText(text = "Konuşma ${index + 1}", modifier = Modifier.padding(PantrixTheme.spacing.lg))
        }
    }
}

Alt bar

bottomBar içeriğin altında, kalan genişliğe yayılır: burada üç hedefli bir PantrixNavigationBar. Hangi hedefte olunduğu ekranın durumudur; bar yalnızca basılanı bildirir.

İçerik iki bar'dan da padding ile kaçınır: üst pay üst bar'ın, alt pay alt bar'ın yüksekliğidir. Ortadaki satır scaffold'un verdiği değerleri yazar.

var destination by rememberSaveable { mutableStateOf("inbox") }
PantrixScaffold(
    modifier = Modifier.height(320.dp).border(1.dp, PantrixTheme.colors.divider),
    topBar = { insets -> PantrixTopBar(title = "Posta", insets = insets) },
    bottomBar = { insets ->
        PantrixNavigationBar(
            items = DESTINATIONS,
            selected = destination,
            onSelect = { destination = it },
            insets = insets,
            tagKey = "scaffold_bottom"
        )
    },
    windowInsets = WindowInsets(0)
) { padding ->
    Column(
        modifier = Modifier.fillMaxSize().padding(padding),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // Bar'ın boyu bir ekranda tam bir dp sayısı olmayabilir: en yakın tam sayısı yazılır.
        val top = padding.calculateTopPadding().value.roundToInt()
        val bottom = padding.calculateBottomPadding().value.roundToInt()
        PantrixText(text = "Açık hedef: ${DESTINATIONS.first { it.key == destination }.label}")
        PantrixText(text = "Üst pay ${top}dp, alt pay ${bottom}dp", color = PantrixTheme.colors.textSecondary)
    }
}

private val DESTINATIONS = listOf(
    NavigationItem(key = "inbox", label = "Mesajlar", icon = PantrixIcons.Inbox),
    NavigationItem(key = "starred", label = "Yıldızlı", icon = PantrixIcons.Star),
    NavigationItem(key = "people", label = "Kişiler", icon = PantrixIcons.Person)
)

Bar'ın altından kayan listede odak

İçerik bar'ların altından kayarken klavyeyle odaklanan öğe bar'ın arkasında kalmaz. Compose odağı alan öğeyi listenin kenarına getirir, ve liste bar'ların altına uzandığı için o kenar bar'ın arkasıdır. Burada her öğe, listenin sonlarında ne kadar boşluk bıraktığını söyler (Modifier.scrollPadding): odağı alan öğe o boşluğun içine, iki bar'ın arasına getirilir.

Boşluk scaffold'un verdiği pay ile bir odak halkasının yeridir (PantrixTheme.platform.focusRingReach). Bir sütunda halka yerini kendisi ister; lazy bir listede isteyemez, liste o yeri contentPadding'ine katar ve aynı değeri öğelerine söyler.

Bir klavyeyle Tab'a basarak aşağı, Shift ile Tab'a basarak yukarı gez: her düğme halkasıyla birlikte iki bar'ın arasında görünür.

var destination by rememberSaveable { mutableStateOf("inbox") }
val ring = PantrixTheme.platform.focusRingReach
PantrixScaffold(
    modifier = Modifier.height(320.dp).border(1.dp, PantrixTheme.colors.divider),
    topBar = { insets -> PantrixTopBar(title = "Etiketler", insets = insets) },
    bottomBar = { insets ->
        PantrixNavigationBar(
            items = DESTINATIONS,
            selected = destination,
            onSelect = { destination = it },
            insets = insets,
            tagKey = "scaffold_focus"
        )
    },
    windowInsets = WindowInsets(0)
) { padding ->
    // Bar'ların payı ve, üstünde ve altında, bir halkanın yeri: listenin boşluğu, öğelerinin söylediği.
    val room = padding + PaddingValues(vertical = ring)
    LazyColumn(
        modifier = Modifier.fillMaxSize(),
        contentPadding = room,
        verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        items(12) { index ->
            PantrixButton(
                text = "Etiket ${index + 1}",
                onClick = {},
                modifier = Modifier.scrollPadding(room),
                variant = ButtonVariant.Outline,
                tagKey = "scaffold_label_${index + 1}"
            )
        }
    }
}

private val DESTINATIONS = listOf(
    NavigationItem(key = "inbox", label = "Mesajlar", icon = PantrixIcons.Inbox),
    NavigationItem(key = "starred", label = "Yıldızlı", icon = PantrixIcons.Star),
    NavigationItem(key = "people", label = "Kişiler", icon = PantrixIcons.Person)
)

Yan bar

sideBar scaffold'un tam yüksekliğinde, başlangıç kenarında durur: burada bir PantrixNavigationRail. Üst bar onun yanında kalan genişliğe yayılır, üstüne uzanmaz. Sağdan sola düzende yan bar sağdadır.

Klavye ve ekran okuyucu önce yan bar'a, sonra üst bar'a, sonra içeriğe gelir.

var destination by rememberSaveable { mutableStateOf("inbox") }
PantrixScaffold(
    modifier = Modifier.height(320.dp).border(1.dp, PantrixTheme.colors.divider),
    topBar = { insets -> PantrixTopBar(title = "Posta", insets = insets) },
    sideBar = { insets ->
        PantrixNavigationRail(
            items = DESTINATIONS,
            selected = destination,
            onSelect = { destination = it },
            insets = insets,
            tagKey = "scaffold_side"
        )
    },
    windowInsets = WindowInsets(0)
) { padding ->
    Box(modifier = Modifier.fillMaxSize().padding(padding), contentAlignment = Alignment.Center) {
        PantrixText(text = "Açık hedef: ${DESTINATIONS.first { it.key == destination }.label}")
    }
}

private val DESTINATIONS = listOf(
    NavigationItem(key = "inbox", label = "Mesajlar", icon = PantrixIcons.Inbox),
    NavigationItem(key = "starred", label = "Yıldızlı", icon = PantrixIcons.Star),
    NavigationItem(key = "people", label = "Kişiler", icon = PantrixIcons.Person)
)

Genişlikle yer değiştiren gezinme

navigation alan PantrixScaffold gezinmenin yerini kendisi seçer ve gezinmeye söyler (placement): 600dp'den darken alt kenarda, o genişlikten itibaren başlangıç kenarında. Gezinme aynı hedefleri altta bir navigation bar, başlangıç kenarında bir ray olarak çizer.

Genişlik pencerenin değil scaffold'un kendi genişliğidir: bir kutudaki scaffold kutunun genişliğine bakar. Kutu 600dp'den darsa gezinme altta, değilse başlangıç kenarındadır. "Dar"ı seç: kutu 360dp olur ve gezinme alta iner. Dar bir pencerede kutu iki seçimde de 600dp'ye ulaşmaz ve gezinme altta kalır.

Gezinme yer değiştirirken içerik aynı kompozisyonda kalır: sayaca bas, sonra genişliği değiştir; sayı yerindedir.

var wide by rememberSaveable { mutableStateOf(true) }
var destination by rememberSaveable { mutableStateOf("inbox") }
PantrixSegmentButton(
    options = listOf(
        SegmentOption(value = false, label = "Dar", tagKey = "narrow"),
        SegmentOption(value = true, label = "Geniş", tagKey = "wide")
    ),
    selected = wide,
    onSelect = { wide = it },
    fullWidth = false,
    tagKey = "scaffold_width"
)
val width = if (wide) Modifier.fillMaxWidth() else Modifier.width(360.dp)
PantrixScaffold(
    navigation = { placement, insets ->
        ScaffoldDestinations(placement, insets, selected = destination, tagKey = "scaffold_adaptive") {
            destination = it
        }
    },
    modifier = width.height(320.dp).border(1.dp, PantrixTheme.colors.divider),
    topBar = { insets -> PantrixTopBar(title = "Posta", insets = insets) },
    windowInsets = WindowInsets(0)
) { padding ->
    Box(modifier = Modifier.fillMaxSize().padding(padding), contentAlignment = Alignment.Center) {
        var count by remember { mutableIntStateOf(0) }
        PantrixButton(
            text = "Sayaç: $count",
            onClick = { count += 1 },
            variant = ButtonVariant.Soft,
            tagKey = "scaffold_count"
        )
    }
}

@Composable
private fun ScaffoldDestinations(
    placement: ScaffoldNavigationPlacement,
    insets: PaddingValues,
    selected: String,
    tagKey: String,
    onSelect: (String) -> Unit
) {
    when (placement) {
        ScaffoldNavigationPlacement.Bottom -> {
            PantrixNavigationBar(
                items = DESTINATIONS,
                selected = selected,
                onSelect = onSelect,
                insets = insets,
                tagKey = tagKey
            )
        }

        ScaffoldNavigationPlacement.Start -> {
            PantrixNavigationRail(
                items = DESTINATIONS,
                selected = selected,
                onSelect = onSelect,
                insets = insets,
                tagKey = tagKey
            )
        }

        ScaffoldNavigationPlacement.VerticalBar -> {
            PantrixNavigationBar(
                items = DESTINATIONS,
                selected = selected,
                onSelect = onSelect,
                orientation = NavigationBarOrientation.Vertical,
                tagKey = tagKey
            )
        }
    }
}

private val DESTINATIONS = listOf(
    NavigationItem(key = "inbox", label = "Mesajlar", icon = PantrixIcons.Inbox),
    NavigationItem(key = "starred", label = "Yıldızlı", icon = PantrixIcons.Star),
    NavigationItem(key = "people", label = "Kişiler", icon = PantrixIcons.Person)
)

Gezinmenin taşındığı genişlik

Gezinmenin başlangıç kenarına geçtiği genişlik scaffold'un stilindedir: ScaffoldStyle.sideNavigationMinWidth, her platformda 600dp. Bu scaffold'a style ile 280dp verildi: kutu 280dp ya da daha genişse gezinme başlangıç kenarındadır, 600dp'den dar bir pencerede de.

var destination by rememberSaveable { mutableStateOf("inbox") }
PantrixScaffold(
    navigation = { placement, insets ->
        ScaffoldDestinations(placement, insets, selected = destination, tagKey = "scaffold_threshold") {
            destination = it
        }
    },
    modifier = Modifier.height(320.dp).border(1.dp, PantrixTheme.colors.divider),
    windowInsets = WindowInsets(0),
    style = ScaffoldStyle(sideNavigationMinWidth = 280.dp)
) { padding ->
    Box(modifier = Modifier.fillMaxSize().padding(padding), contentAlignment = Alignment.Center) {
        PantrixText(text = "Açık hedef: ${DESTINATIONS.first { it.key == destination }.label}")
    }
}

@Composable
private fun ScaffoldDestinations(
    placement: ScaffoldNavigationPlacement,
    insets: PaddingValues,
    selected: String,
    tagKey: String,
    onSelect: (String) -> Unit
) {
    when (placement) {
        ScaffoldNavigationPlacement.Bottom -> {
            PantrixNavigationBar(
                items = DESTINATIONS,
                selected = selected,
                onSelect = onSelect,
                insets = insets,
                tagKey = tagKey
            )
        }

        ScaffoldNavigationPlacement.Start -> {
            PantrixNavigationRail(
                items = DESTINATIONS,
                selected = selected,
                onSelect = onSelect,
                insets = insets,
                tagKey = tagKey
            )
        }

        ScaffoldNavigationPlacement.VerticalBar -> {
            PantrixNavigationBar(
                items = DESTINATIONS,
                selected = selected,
                onSelect = onSelect,
                orientation = NavigationBarOrientation.Vertical,
                tagKey = tagKey
            )
        }
    }
}

private val DESTINATIONS = listOf(
    NavigationItem(key = "inbox", label = "Mesajlar", icon = PantrixIcons.Inbox),
    NavigationItem(key = "starred", label = "Yıldızlı", icon = PantrixIcons.Star),
    NavigationItem(key = "people", label = "Kişiler", icon = PantrixIcons.Person)
)

Sistemin dikey bar'ında

iPhone Duo'nun dış ekranında, iOS 27.1'den itibaren, sistem sağ kenar boyunca dik duran bar'lar için bir sütun ayırır: tepesinde durum çubuğu, altında uygulamanın bar'ları. "Kapak"ı seç: soluk şerit durum çubuğunun yeridir. Scaffold o sütuna uzandığı için gezinmeyi sütunun dibine koyar ve ona ScaffoldNavigationPlacement.VerticalBar der; burada dik duran bir PantrixNavigationBar çizilir. İçerikteki PantrixTopBar geri düğmesini ve iki eylemini sütunun tepesine, durum çubuğunun altına verir, başlığı yerinde kalır. Uygulamanın kendi kabuğu da Duo'nun dış ekranında böyle durur.

Dik bar'da hedefler yalnızca ikonlarıyladır, UIKit'in o sütundaki sekmeleri gibi: bir ikonun üstünde bekle ya da uzun bas, adı bir tooltip'te görünür. "Etiketler"i aç: adları ikonların altında da yazar (showLabels). Öteki pencerelerde sütun yoktur: gezinme genişliğe göre altta ya da başlangıç kenarındadır, düğmeler üst bar'dadır. Duo'nun iç ekranında ve yatayda sistem sütunu yine ayırır, ama scaffold onu durum çubuğuna bırakır ve bu hâl kalır.

Scaffold'un yüksekliği dış ekranınki kadardır, 678dp; sütundaki yer pencereye göre ölçülür ve scaffold pencerenin tepesinden başlar.

var labels by rememberSaveable { mutableStateOf(false) }
var destination by rememberSaveable { mutableStateOf("inbox") }
PantrixScaffold(
    navigation = { placement, insets ->
        when (placement) {
            ScaffoldNavigationPlacement.Bottom -> PantrixNavigationBar(
                items = DESTINATIONS,
                selected = destination,
                onSelect = { destination = it },
                insets = insets,
                tagKey = "scaffold_upright"
            )

            ScaffoldNavigationPlacement.VerticalBar -> PantrixNavigationBar(
                items = DESTINATIONS,
                selected = destination,
                onSelect = { destination = it },
                orientation = NavigationBarOrientation.Vertical,
                showLabels = labels,
                tagKey = "scaffold_upright"
            )

            ScaffoldNavigationPlacement.Start -> PantrixNavigationRail(
                items = DESTINATIONS,
                selected = destination,
                onSelect = { destination = it },
                insets = insets,
                tagKey = "scaffold_upright"
            )
        }
    },
    modifier = Modifier.fillMaxWidth().height(678.dp),
    windowInsets = WindowInsets(0)
) { padding ->
    Column(modifier = Modifier.fillMaxSize()) {
        // Bar scaffold'un tüm genişliğindedir, UIKit'in üst bar'ı gibi; içerik sütundan payıyla kaçınır.
        PantrixTopBar(
            title = DESTINATIONS.first { it.key == destination }.label,
            navigationIcon = { PantrixBackButton(onClick = {}, tagKey = "scaffold_upright_back") },
            actions = {
                PantrixIconButton(
                    imageVector = PantrixIcons.Search,
                    contentDescription = "Ara",
                    onClick = {},
                    tagKey = "scaffold_upright_search"
                )
                PantrixIconButton(
                    imageVector = PantrixIcons.MoreHorizontal,
                    contentDescription = "Daha fazla",
                    onClick = {},
                    tagKey = "scaffold_upright_more"
                )
            },
            tagKey = "scaffold_upright"
        )
        PantrixSwitchButton(
            checked = labels,
            onCheckedChange = { labels = it },
            modifier = Modifier.padding(padding).padding(PantrixTheme.spacing.lg),
            label = "Etiketler",
            tagKey = "scaffold_upright_labels"
        )
    }
}

private val DESTINATIONS = listOf(
    NavigationItem(key = "inbox", label = "Mesajlar", icon = PantrixIcons.Inbox),
    NavigationItem(key = "starred", label = "Yıldızlı", icon = PantrixIcons.Star),
    NavigationItem(key = "people", label = "Kişiler", icon = PantrixIcons.Person)
)

Snackbar'lar

snackbars verilen scaffold onları içeriğin üstünde ve içeriğe verdiği payın içinde gösterir: bar'ların arasında. Aynı durumu içindeki her şeye LocalPantrixSnackbars ile verir; bir ekran snackbar göstermek için durumu parametreyle almaz. Buradaki düğme scaffold'un içinde ayrı bir composable'dır ve durumu oradan okur.

"Arşivle"ye bas: snackbar uygulamanın penceresinde değil, bu kutudaki scaffold'un içinde belirir. Yeri platforma göredir: Android'de altta ortada, iOS'ta üstte, masaüstünde ve web'de alt bitiş köşesinde. snackbars verilmeyen scaffold çevresindeki düzenin LocalPantrixSnackbars'ını korur: öteki örneklerdeki kutular uygulamanınkini görür.

val snackbars = rememberPantrixSnackbarState()
PantrixScaffold(
    modifier = Modifier.height(320.dp).border(1.dp, PantrixTheme.colors.divider),
    topBar = { insets -> PantrixTopBar(title = "Gelen Kutusu", insets = insets) },
    bottomBar = { insets ->
        PantrixNavigationBar(
            items = DESTINATIONS,
            selected = "inbox",
            onSelect = {},
            insets = insets,
            tagKey = "scaffold_snackbars"
        )
    },
    snackbars = snackbars,
    windowInsets = WindowInsets(0)
) { padding ->
    Box(modifier = Modifier.fillMaxSize().padding(padding), contentAlignment = Alignment.Center) {
        ScaffoldArchiveButton()
    }
}

@Composable
private fun ScaffoldArchiveButton() {
    val snackbars = LocalPantrixSnackbars.current
    val scope = rememberCoroutineScope()
    PantrixButton(
        text = "Arşivle",
        onClick = { scope.launch { snackbars?.show(message = "Konuşma arşivlendi", tagKey = "scaffold_archived") } },
        tagKey = "scaffold_archive"
    )
}

private val DESTINATIONS = listOf(
    NavigationItem(key = "inbox", label = "Mesajlar", icon = PantrixIcons.Inbox),
    NavigationItem(key = "starred", label = "Yıldızlı", icon = PantrixIcons.Star),
    NavigationItem(key = "people", label = "Kişiler", icon = PantrixIcons.Person)
)

Pencerenin payları

Bir pencerede windowInsets yazılmaz: scaffold sistem çubuklarının ve ekran çentiğinin payını kendisi okur. Bu kutunun sistem çubuğu olmadığı için iki pay elle verildi: üstte 28dp, altta 20dp; yerlerinde birer yazı duruyor.

Her bar, dokunduğu kenarın payını insets olarak alır. Üst bar ve alt bar onu kendi içine boşluk olarak koyar: dolguları payın arkasına uzanır, başlık ve hedefler payın dışında kalır. İçeriğin payı da buna göre büyür: ortadaki satırdaki değerler bar'ın yüksekliği ile pencere payının toplamıdır.

val caption = PantrixTheme.typography.caption
val quiet = PantrixTheme.colors.textSecondary
Box(modifier = Modifier.height(320.dp).border(1.dp, PantrixTheme.colors.divider)) {
    PantrixScaffold(
        topBar = { insets -> PantrixTopBar(title = "Ayarlar", insets = insets) },
        bottomBar = { insets ->
            PantrixNavigationBar(
                items = DESTINATIONS,
                selected = "inbox",
                onSelect = {},
                insets = insets,
                tagKey = "scaffold_insets"
            )
        },
        windowInsets = WindowInsets(top = 28.dp, bottom = 20.dp)
    ) { padding ->
        Box(modifier = Modifier.fillMaxSize().padding(padding), contentAlignment = Alignment.Center) {
            val top = padding.calculateTopPadding().value.roundToInt()
            val bottom = padding.calculateBottomPadding().value.roundToInt()
            PantrixText(text = "Üst pay ${top}dp, alt pay ${bottom}dp")
        }
    }
    PantrixText(
        text = "durum çubuğunun yeri",
        modifier = Modifier.align(Alignment.TopCenter).padding(top = 6.dp),
        style = caption,
        color = quiet
    )
    PantrixText(
        text = "sistem çubuğunun yeri",
        modifier = Modifier.align(Alignment.BottomCenter).padding(bottom = 2.dp),
        style = caption,
        color = quiet
    )
}

private val DESTINATIONS = listOf(
    NavigationItem(key = "inbox", label = "Mesajlar", icon = PantrixIcons.Inbox),
    NavigationItem(key = "starred", label = "Yıldızlı", icon = PantrixIcons.Star),
    NavigationItem(key = "people", label = "Kişiler", icon = PantrixIcons.Person)
)

Zemin ve içerik rengi

containerColor scaffold'un zeminidir; varsayılanı temanın background'udur. Temanın zeminlerinde scaffold içerik rengi vermez: her bileşen kendi varsayılanıyla çizilir. Üstteki scaffold bir rolün dolgusuyla boyandı ve içindeki yazıya o dolguyla eşleşen rengi kendisi verdi.

Alttakinin rengi temada yok, uygulamanın kendi moru: üstünde ne okunacağını tema bilemez, contentColor ile verilir.

val own = ownColors()
PantrixScaffold(
    modifier = Modifier.height(96.dp),
    containerColor = PantrixTheme.colors.primary.container,
    windowInsets = WindowInsets(0)
) { padding ->
    Box(modifier = Modifier.fillMaxSize().padding(padding), contentAlignment = Alignment.Center) {
        PantrixText(text = "Bir rolün dolgusu: içerik rengini scaffold verdi")
    }
}
PantrixScaffold(
    modifier = Modifier.height(96.dp),
    containerColor = own.color,
    contentColor = own.onColor,
    windowInsets = WindowInsets(0)
) { padding ->
    Box(modifier = Modifier.fillMaxSize().padding(padding), contentAlignment = Alignment.Center) {
        PantrixText(text = "Temada olmayan renk: contentColor verildi")
    }
}

API

modifier

Bir ekranın düzeni: içeriğin çevresinde bir üst bar, bir alt bar ve bir yan bar, içeriğin üstünde uygulamanın snackbar'ları.

navigation

Gezinmesi genişliğiyle birlikte yer değiştiren bir ekranın düzeni: scaffold, varsayılanı 600dp olan ScaffoldStyle.sideNavigationMinWidth'ten darken gezinme alt kenardadır, o genişlikten itibaren başlangıç kenarında.

ScaffoldStyle

PantrixScaffold'un kendi verdiği tek karar: uyarlanabilir gezinmesinin alt kenardan başlangıç kenarına geçmesi için ne kadar geniş olması gerektiği.

Erişilebilirlik

• Klavye. windowInsets sistem çubukları ve ekran çentiğidir, klavye içinde değildir: metin alanı olan ekran içeriğine Modifier.consumeWindowInsets(padding).imePadding() ekler.
• Odak. Bar'ın altından kayan içerikte odağı alan öğe kaydırma alanının kenarına getirilir, ve o kenar bar'ın arkasıdır. İçerik, sonlarında bıraktığı boşluğu Modifier.scrollPadding ile söyler: odak bar'ların arasında kalır.