List Item

Bir listenin satırı: bir başlık, onu başlatan ve bitiren şeyle ve altında bir iki satırla; mesajların, ayarların ya da sonuçların bir listesindeki gibi.

import com.pantrixui.components.data.listitem.PantrixListItem

Satırlar. headline satırın adıdır; supportingText altında daha küçük ve sessiz bir iki satır, overline üstünde kısa bir satır, trailingText başlığın satırının sonunda, onun taban çizgisinde kısa bir yazıdır: bir saat, bir sayı, bir ayarın değeri. Açıklama supportingMaxLines satırda kesilir, varsayılanı iki.
Başı ve sonu. leading satırı başlatır (ikon, avatar, resim), trailing bitirir (rozet, etiket, anahtar). İkisi de satırın sessiz rengini alır. chevron satırın sonuna başka bir ekrana götürdüğünü söyleyen bir ok başı koyar; sağdan sola düzende döner ve okunmaz.
Basmak ve seçmek. onClick verilen satır tek bir hedeftir, en az platformun dokunma hedefi kadar yüksektir, basışı, imlecin altında hafif bir dolguyu ve odak halkasını kendi kenarlarının içinde gösterir. selected satırı ana rolün container rengiyle doldurur ve ekran okuyucuya seçili olduğunu söyler.
Tek düğüm. Ekran okuyucu satırı bir bütün olarak duyar: üst satır, başlık, sondaki yazı, açıklama. Sondaki bir anahtar ya da düğme kendi düğümü olarak kalır.
Çizgi. divider satırın altına çizgi çizer: Full boydan boya, Inset yazının başladığı yerden, iOS'un listelerindeki gibi.
Platform. Android'de Material 3'ün satırları (56, 72, 88dp), iOS'ta iOS'unkiler (44, 60, 76), masaüstünde ve web'de daha sık satırlar (36/52/68 ve 40/56/72). Başlık telefonda gövde yazısıyla, masaüstünde ve web'de etiket yazısıyla yazılır; headlineStyle, supportingTextStyle ve trailingTextStyle onları değiştirir.

Örnekler

Gelen kutusu

Bir gelen kutusu: kim yazdı, ne zaman, ne hakkında. Bir satıra basmak onu seçer; seçili satır dolar. Çizgiler avatarların sütununu bölmeden yazının başladığı yerden çizilir.

var open by remember { mutableStateOf("0") }
Column {
    INBOX.forEachIndexed { index, mail ->
        PantrixListItem(
            headline = mail.from,
            supportingText = mail.subject,
            trailingText = mail.time,
            leading = { PantrixAvatar(contentDescription = null, initials = mail.initials) },
            selected = open == "$index",
            onClick = { open = "$index" },
            divider = ListItemDivider.Inset,
            tagKey = "mail_$index"
        )
    }
}

private class InboxMessage(
    val from: String,
    val initials: String,
    val subject: String,
    val time: String
)

private val INBOX = listOf(
    InboxMessage("Ayşe Demir", "AD", "Pazartesi toplantısının gündemi", "12:40"),
    InboxMessage("Mert Kaya", "MK", "Tasarım dosyaları hazır", "11:05"),
    InboxMessage("Elif Şahin", "EŞ", "Fatura: Ekim", "Dün")
)

Ayarlar

Ayarlar: başka bir ekrana götüren satırların sonunda değerleri ve bir ok başı var. Bildirimlerin satırı basılmaz; sonundaki anahtar kendi başına bir denetimdir. Kapalı bir satır basılmaz ve soluk yazılır.

var notify by remember { mutableStateOf(true) }
Column {
    PantrixListItem(
        headline = "İndirmeler",
        trailingText = "Yalnızca Wi-Fi",
        leading = { PantrixIcon(PantrixIcons.Download, contentDescription = null) },
        chevron = true,
        onClick = {},
        divider = ListItemDivider.Full,
        tagKey = "downloads"
    )
    PantrixListItem(
        headline = "Bildirimler",
        supportingText = "Yeni bir mesaj gelince",
        leading = { PantrixIcon(PantrixIcons.Inbox, contentDescription = null) },
        trailing = {
            PantrixSwitchButton(
                checked = notify,
                onCheckedChange = { notify = it },
                contentDescription = "Bildirimler",
                tagKey = "notify"
            )
        },
        divider = ListItemDivider.Full,
        tagKey = "notifications"
    )
    PantrixListItem(
        headline = "Yedekleme",
        supportingText = "Planınızda yok",
        leading = { PantrixIcon(PantrixIcons.Upload, contentDescription = null) },
        chevron = true,
        onClick = {},
        enabled = false,
        tagKey = "backup"
    )
}

Üç satır

Üç satır, okunur ve basılmaz: üstte tarih, altta iki satıra kadar açıklama, sonda bir etiket. Üç satırlık satırda baştaki ve sondaki öğe satırın üstünde durur.

Column {
    PantrixListItem(
        headline = "Sipariş 1042",
        overline = "28 Ekim",
        supportingText = "İki kitap ve bir defter. Kargoya verildi, yarın teslim edilmesi bekleniyor.",
        trailing = { PantrixTag(text = "Yolda", tone = TagTone.Info) },
        divider = ListItemDivider.Full,
        tagKey = "order_1042"
    )
    PantrixListItem(
        headline = "Sipariş 1039",
        overline = "21 Ekim",
        supportingText = "Bir kulaklık.",
        trailing = { PantrixTag(text = "Teslim edildi", tone = TagTone.Success) },
        tagKey = "order_1039"
    )
}

Aramanın bulduğu

Bir arama sonucu: başlıkta aranan söz kalın yazılır (AnnotatedString alan aşırı yükleme), açıklama nerede bulunduğunu söyler.

val typed = "Area"
Column {
    listOf("Text Area", "Filled Text Area").forEachIndexed { index, title ->
        val at = title.indexOf(typed)
        PantrixListItem(
            headline = buildAnnotatedString {
                append(title.take(at))
                withStyle(SpanStyle(fontWeight = FontWeight.ExtraBold)) { append(typed) }
                append(title.drop(at + typed.length))
            },
            supportingText = "Bileşen · Form",
            leading = { PantrixIcon(PantrixIcons.Search, contentDescription = null) },
            onClick = {},
            tagKey = "found_$index"
        )
    }
}

Kendi stili ve renkleri

Kendi stili ve renkleri: daha sık satırlar (ListItemStyle), başlık temanın callout rolüyle, seçili satır bir başarı rengiyle (ListItemColors), açıklama footnote yazısıyla (supportingTextStyle), fiyat kod yazısıyla (trailingTextStyle).

val success = PantrixTheme.colors.success
var chosen by remember { mutableStateOf(0) }
Column {
    listOf("Haftalık" to "29 ₺", "Aylık" to "99 ₺", "Yıllık" to "990 ₺").forEachIndexed { index, (plan, price) ->
        PantrixListItem(
            headline = plan,
            supportingText = if (index == 2) "İki ay bizden" else null,
            trailingText = price,
            selected = chosen == index,
            onClick = { chosen = index },
            style = ListItemStyle(oneLineHeight = 40.dp, twoLineHeight = 52.dp, headlineRole = TypeRole.Callout),
            colors = ListItemColors(selectedContainer = success.container, selectedContent = success.onContainer),
            supportingTextStyle = PantrixTheme.typography.footnote,
            trailingTextStyle = PantrixTheme.typography.code,
            tagKey = "plan_$index"
        )
    }
}

API

headline

Bir listenin satırı: bir başlık, onu başlatan ve bitiren şeyle ve altında bir iki satırla; mesajların, ayarların ya da sonuçların bir listesindeki gibi.

Parametre	Tür	Varsayılan	Ne olduğu
`headline`	`String`		satırın ne olduğu, birkaç sözle: ekran okuyucu için adı.
`modifier`	`Modifier`	`Modifier`	satırın modifier'ı. Satır kendisine verilen genişlikte ve en az, stilinin taşıdığı satır sayısı için verdiği yükseklikte olur.
`supportingText`	`String?`	`null`	başlığın altında daha küçük ve sessiz bir yazıyla bir iki satır: satırın fazladan söylediği.
`overline`	`String?`	`null`	başlığın üstünde, temanın caption yazısıyla kısa bir satır: bir kategori, bir tarih.
`trailingText`	`String?`	`null`	başlığın satırının sonunda, onun taban çizgisinde, `trailingTextStyle` ile yazılan kısa bir yazı: bir saat, bir sayı, bir ayarın değeri.
`leading`	`(@Composable () -> Unit)?`	`null`	satırı başlatan: bir ikon, bir avatar, bir resim. Satırın sessiz rengini alır.
`trailing`	`(@Composable () -> Unit)?`	`null`	satırı bitiren: bir rozet, bir düğme, bir anahtar. Satırın sessiz rengini alır.
`chevron`	`Boolean`	`false`	başka bir ekrana götüren bir satır için, `trailing`'den sonra, satırın bir ok başıyla bitip bitmediği.
`onClick`	`(() -> Unit)?`	`null`	satıra basmanın ne yaptığı. Null onu okunan ama basılmayan bir satır yapar.
`selected`	`Boolean`	`false`	satırın seçili olan olup olmadığı, bir listenin yanında gösterilen mesaj gibi.
`enabled`	`Boolean`	`true`	satırın basılabilip basılamadığı. Basılamayan devre dışı renkle yazılır.
`divider`	`ListItemDivider`	`ListItemDivider.None`	satırın kendi altına çizdiği çizgi.
`supportingMaxLines`	`Int`	`2`	`supportingText`'in kesilmeden önce kaç satıra uzadığı.
`style`	`ListItemStyle?`	`null`	bu çağrının kendi stili: çevreleyen her stilin üstünde, yoğunluğun altında.
`colors`	`ListItemColors?`	`null`	bu satırın, temanınki olmayan kendi renkleri.
`tagKey`	`String?`	`null`	satırın otomasyon anahtarı: satır `ListItem_<tagKey>`'dir.
`headlineStyle`	`TextStyle?`	`null`	başlığın yazı stili: verilmezse stilin `headlineRole`'ü.
`supportingTextStyle`	`TextStyle?`	`null`	açıklamanın yazı stili: verilmezse stilin `supportingRole`'ü.
`trailingTextStyle`	`TextStyle?`	`null`	`trailingText`'in yazı stili: verilmezse `supportingTextStyle`; bir mesajın başlığının yanındaki saat, mesajın kendi küçük yazısıyla yazıldığı gibi.

headline

Başlığında sözlerden fazlası olan bir liste satırı: bir aramanın bulduğu yerde işaretlenmiş bir söz, kalın yazılmış bir parça.

Parametre	Tür	Varsayılan	Ne olduğu
`headline`	`AnnotatedString`		satırın ne olduğu, aralıklarıyla: ekran okuyucu için adı.
`modifier`	`Modifier`	`Modifier`	satırın modifier'ı. Satır kendisine verilen genişlikte ve en az, stilinin taşıdığı satır sayısı için verdiği yükseklikte olur.
`supportingText`	`String?`	`null`	başlığın altında daha küçük ve sessiz bir yazıyla bir iki satır: satırın fazladan söylediği.
`overline`	`String?`	`null`	başlığın üstünde, temanın caption yazısıyla kısa bir satır: bir kategori, bir tarih.
`trailingText`	`String?`	`null`	başlığın satırının sonunda, onun taban çizgisinde, `trailingTextStyle` ile yazılan kısa bir yazı: bir saat, bir sayı, bir ayarın değeri.
`leading`	`(@Composable () -> Unit)?`	`null`	satırı başlatan: bir ikon, bir avatar, bir resim. Satırın sessiz rengini alır.
`trailing`	`(@Composable () -> Unit)?`	`null`	satırı bitiren: bir rozet, bir düğme, bir anahtar. Satırın sessiz rengini alır.
`chevron`	`Boolean`	`false`	başka bir ekrana götüren bir satır için, `trailing`'den sonra, satırın bir ok başıyla bitip bitmediği. Satırın sessiz renginde çizilir, düzenin sağdan okunduğu yerde döner ve okunmaz.
`onClick`	`(() -> Unit)?`	`null`	satıra basmanın ne yaptığı. Null onu okunan ama basılmayan bir satır yapar.
`selected`	`Boolean`	`false`	satırın seçili olan olup olmadığı, bir listenin yanında gösterilen mesaj gibi.
`enabled`	`Boolean`	`true`	satırın basılabilip basılamadığı. Basılamayan basış almaz ve devre dışı renkle yazılır.
`divider`	`ListItemDivider`	`ListItemDivider.None`	satırın kendi altına çizdiği çizgi: hiç, satırı boydan boya geçen ya da yazısının başladığı yerden başlayan.
`supportingMaxLines`	`Int`	`2`	`supportingText`'in üç noktayla kesilmeden önce kaç satıra uzadığı.
`style`	`ListItemStyle?`	`null`	bu çağrının kendi stili: çevreleyen her stilin üstünde, yoğunluğun altında. Yalnızca verdiği alanlar, her platformda değişir.
`colors`	`ListItemColors?`	`null`	bu satırın kendi renkleri: verdikleri, geri kalanlar için temanınkilerle.
`tagKey`	`String?`	`null`	satırın otomasyon anahtarı: satır `ListItem_<tagKey>`'dir.
`headlineStyle`	`TextStyle?`	`null`	başlığın yazı stili: verilmezse stilin `headlineRole`'ü. İçindeki bir renk başlığın değildir; başlığın rengi satırınkidir.
`supportingTextStyle`	`TextStyle?`	`null`	açıklamanın yazı stili: verilmezse stilin `supportingRole`'ü.
`trailingTextStyle`	`TextStyle?`	`null`	`trailingText`'in yazı stili: verilmezse `supportingTextStyle`; bir mesajın başlığının yanındaki saat, mesajın kendi küçük yazısıyla yazıldığı gibi.

ListItemStyle

PantrixListItem'ın geometrisi ve yazısı: bir, iki ve üç satırlık bir satırın en az ne kadar yüksek olduğu, içindekilerin çevresindeki ve arasındaki boşluk, dolgusunun köşeleri ve yazdığı yazılar.

Parametre	Tür	Varsayılan	Ne olduğu
`oneLineHeight`	`Dp`	`Dp.Unspecified`	Yalnızca başlığından oluşan bir satırın en az yüksekliği.
`twoLineHeight`	`Dp`	`Dp.Unspecified`	Bir başlık ve bir satırdan daha oluşan bir satırın en az yüksekliği: bir üst satır ya da bir açıklama.
`threeLineHeight`	`Dp`	`Dp.Unspecified`	Bir başlık, bir üst satır ve bir açıklamadan oluşan bir satırın en az yüksekliği.
`horizontalPadding`	`Dp`	`Dp.Unspecified`	Satırın kenarlarıyla içindekiler arasındaki boşluk.
`verticalPadding`	`Dp`	`Dp.Unspecified`	Satır en az yüksekliğinden uzun olduğunda, içindekilerin üstündeki ve altındaki boşluk.
`gap`	`Dp`	`Dp.Unspecified`	Satırı başlatan, yazısı ve onu bitiren arasındaki boşluk.
`shape`	`ShapeSpec`	`ShapeSpec.Unspecified`	Satırın dolgusunun köşeleri: Android'de ve iOS'ta yok, masaüstünde ve web'de küçük.
`chevronSize`	`Dp`	`Dp.Unspecified`	Başka bir yere götüren bir satırın sonundaki ok başının genişliği ve yüksekliği.
`headlineRole`	`TypeRole?`	`null`	Başlığın yazısı: Android'de ve iOS'ta gövde, masaüstünde ve web'de etiket.
`supportingRole`	`TypeRole?`	`null`	Açıklamanın ve sondaki yazının yazısı: Android'de ve iOS'ta etiket, masaüstünde ve web'de dipnot (footnote).

ListItemColors

Bir PantrixListItem'ın, temanınki olmayan yerlerde boyandığı renkler: verilen bir renk kullanılır, bırakılan temanınki kalır.

Parametre	Tür	Varsayılan	Ne olduğu
`container`	`Color`	`Color.Unspecified`	Satırın kendi dolgusu: varsayılanı yok.
`content`	`Color`	`Color.Unspecified`	Başlık ve sondaki yazı: temanın zeminlerinde temanın birincil yazısı, bir dolgunun üstünde orada okunan renk.
`supportingContent`	`Color`	`Color.Unspecified`	Üst satır, açıklama ve ok başı: temanın zeminlerinde temanın ikincil yazısı, bir dolgunun üstünde `content`.
`selectedContainer`	`Color`	`Color.Unspecified`	Seçili bir satırın dolgusu: ana rolün `container`'ı.
`selectedContent`	`Color`	`Color.Unspecified`	Seçili bir satırın yazıldığı renk: temanın `selectedContainer` ile eşlediği.
`divider`	`Color`	`Color.Unspecified`	Çizgi çizen bir satırın altındaki çizgi: temanın zeminlerinde temanın ayırıcısı, bir dolgunun üstünde `content`'in bir payı.