Tree View

Dalları açılıp kapanan bir hiyerarşi: klasörler ve dosyalar, kategoriler, bir belgenin başlıkları.

import com.pantrixui.components.data.treeview.PantrixTreeView

Düğümler. Bir TreeNode'un key'i her dilde aynıdır ve bir ağaçta iki düğüm aynı anahtarı taşımaz. Satırda önce icon, sonra label, sonunda kısa bir yazı (trailing: bir sayı, bir dosyanın boyu) durur.
Seçim. TreeSelection.None satıra basınca dalı açar ya da kapatır. Single basılan satırı seçer; Checkbox satırın onay kutusunu işaretler. Seçim varken satırın başındaki ok kendi basışıyla dalı açıp kapatır. Bir dalın onay kutusu altındaki işaretlenebilen her şeyi işaretler, hepsi işaretliyse temizler; altındakilerin yalnızca bir kısmı işaretli olan dal bir çizgi gösterir. onSelectionChange işaretli bütün düğümleri verir.
Devre dışı. enabled = false olan düğüm seçilemez ve işaretlenemez, soluk yazılır; dalı yine açılıp kapanır.
Açınca yükleme. hasChildren = true ve çocukları henüz boş olan düğümün oku çizilir; açılınca ekran çocuklarını yükler. Anahtarı loading'deyken okun yerinde dönen bir gösterge durur.
Süzme. filter boşluktan fazlasını tutarken ağaç adında onu taşıyan satırları ve onların durduğu dalları gösterir; bulunan harfler işaretlenir, büyük küçük harf temanın diline göre karşılaştırılır (Türkçede İ ile i, I ile ı). Bu dallar süzme boyunca açıktır, okuyucu yine kapatabilir. Aranan şeyi taşıyan düğümün altındakilerin hepsi görünür. Hiçbir şey bulunmazsa ağaç satır göstermez; ne söyleneceği ekranın işidir.
Kılavuz çizgileri. guides açık her dalın okundan altındakilerin boyunca soluk bir çizgi indirir.
Boyut. Ağaç verilen genişlik kadar geniş, açık satırları kadar uzundur ve kaydırmaz: kaydıran bir sayfada durur. Açık her satır kompoze edilir; binlerce açık satırı olan bir ağaç kendi listesini ister. Bir dalın çocukları temanın hareketiyle gelip gider.
Platform. Satır platformun liste satırıdır: Android'de 48dp, iOS'ta 44pt, masaüstünde ve web'de 32dp; platformun dokunma hedefinden alçak olmaz, dokunmayla kullanılan bir masaüstünde ya da web sayfasında parmağınkini alır. Her seviye Android'de 24dp, iOS'ta 20pt, masaüstünde ve web'de 16dp içeri girer.
Renk. TreeViewColors dolguyu, yazıyı, seçili satırı, kılavuz çizgilerini ve bulunan harflerin zeminini verir. Dolgusu olmayan ağaç arkasındakinin üstünde durur ve bir dolgunun üstünde o dolgunun verdiği renkle yazılır.
Otomasyon. tagKey ile ağaç TreeView_<tagKey>, bir satırı TreeView_<tagKey>.Node_<key>, oku TreeView_<tagKey>.Twisty_<key> olur. Basışlar düğümün anahtarıyla expand, collapse, select, check ve uncheck olarak bildirilir.

Örnekler

Klasörler ve dosyalar

Bir projenin klasörleri ve dosyaları, biri seçili. Satıra basmak onu seçer; klasörün önündeki ok onu açar ya da kapatır. Her dosyanın boyu satırın sonunda yazar. Açık klasörler ve seçilen dosya ekranın durumudur ve rememberSaveable ile tutulur.

var open by rememberSaveable { mutableStateOf(setOf("app", "app/src")) }
var chosen by rememberSaveable { mutableStateOf(setOf("app/src/App.kt")) }
PantrixTreeView(
    nodes = PROJECT_FILES,
    expanded = open,
    onExpandedChange = { open = it },
    selection = TreeSelection.Single,
    selected = chosen,
    onSelectionChange = { chosen = it },
    tagKey = "files"
)
PantrixText(
    text = "Seçilen: ${chosen.firstOrNull() ?: "yok"}",
    style = PantrixTheme.typography.footnote,
    color = PantrixTheme.colors.textSecondary
)

private val PROJECT_FILES = listOf(
    TreeNode(
        key = "app",
        label = "app",
        icon = PantrixIcons.Folder,
        children = listOf(
            TreeNode(
                key = "app/src",
                label = "src",
                icon = PantrixIcons.Folder,
                children = listOf(
                    TreeNode(key = "app/src/App.kt", label = "App.kt", trailing = "4 KB"),
                    TreeNode(key = "app/src/Theme.kt", label = "Theme.kt", trailing = "2 KB"),
                    TreeNode(key = "app/src/Screens.kt", label = "Screens.kt", trailing = "9 KB")
                )
            ),
            TreeNode(
                key = "app/test",
                label = "test",
                icon = PantrixIcons.Folder,
                children = listOf(TreeNode(key = "app/test/AppTest.kt", label = "AppTest.kt", trailing = "3 KB"))
            ),
            TreeNode(key = "app/build.gradle.kts", label = "build.gradle.kts", trailing = "1 KB")
        )
    ),
    TreeNode(
        key = "docs",
        label = "docs",
        icon = PantrixIcons.Folder,
        children = listOf(
            TreeNode(key = "docs/README.md", label = "README.md", trailing = "6 KB"),
            TreeNode(key = "docs/CHANGELOG.md", label = "CHANGELOG.md", trailing = "12 KB")
        )
    ),
    TreeNode(key = "settings.gradle.kts", label = "settings.gradle.kts", trailing = "1 KB")
)

Onay kutularıyla izinler

Onay kutularıyla izinler. Bir dalı işaretlemek altındaki her izni işaretler; altındakilerin bir kısmı işaretli olan dal bir çizgi gösterir. "Kullanıcıları sil" devre dışıdır: işaretlenemez, dalı onu değiştirmez, ve onun yüzünden Kullanıcılar dalı hiçbir zaman tam işaretli olmaz.

var open by rememberSaveable { mutableStateOf(setOf("users", "billing")) }
var granted by rememberSaveable { mutableStateOf(setOf("billing.view")) }
PantrixTreeView(
    nodes = PERMISSIONS,
    expanded = open,
    onExpandedChange = { open = it },
    selection = TreeSelection.Checkbox,
    selected = granted,
    onSelectionChange = { granted = it },
    tagKey = "permissions"
)
PantrixText(
    text = "İşaretli: ${granted.size}",
    style = PantrixTheme.typography.footnote,
    color = PantrixTheme.colors.textSecondary
)

private val PERMISSIONS = listOf(
    TreeNode(
        key = "users",
        label = "Kullanıcılar",
        children = listOf(
            TreeNode(key = "users.view", label = "Kullanıcıları görüntüle"),
            TreeNode(key = "users.edit", label = "Kullanıcıları düzenle"),
            TreeNode(key = "users.delete", label = "Kullanıcıları sil", enabled = false)
        )
    ),
    TreeNode(
        key = "billing",
        label = "Faturalar",
        children = listOf(
            TreeNode(key = "billing.view", label = "Faturaları görüntüle"),
            TreeNode(key = "billing.pay", label = "Fatura öde"),
            TreeNode(key = "billing.refund", label = "İade et")
        )
    ),
    TreeNode(
        key = "settings",
        label = "Ayarlar",
        children = listOf(
            TreeNode(key = "settings.general", label = "Genel"),
            TreeNode(key = "settings.security", label = "Güvenlik")
        )
    )
)

Süzme ve kılavuz çizgileri

filter alana yazılanı adlarda arar: bulunan satırlar ve durdukları dallar görünür, bulunan harfler işaretlenir. Büyük küçük harf temanın diline göre karşılaştırılır: Türkçede "ı" yazınca "Işıklandırma" bulunur. Kılavuz çizgileri (guides) açık dalların altındakileri birbirine bağlar.

val query = rememberTextFieldState()
var open by rememberSaveable { mutableStateOf(setOf("home")) }
PantrixTextField(
    state = query,
    modifier = Modifier.fillMaxWidth(),
    placeholder = "Kategorilerde ara",
    showClearButton = true,
    contentDescription = "Kategorilerde ara",
    tagKey = "category_search"
)
PantrixTreeView(
    nodes = CATEGORIES,
    expanded = open,
    onExpandedChange = { open = it },
    filter = query.text.toString(),
    guides = true,
    tagKey = "categories"
)

private val CATEGORIES = listOf(
    TreeNode(
        key = "home",
        label = "Ev ve yaşam",
        children = listOf(
            TreeNode(key = "home.kitchen", label = "Mutfak", trailing = "128"),
            TreeNode(key = "home.light", label = "Işıklandırma", trailing = "64"),
            TreeNode(key = "home.bath", label = "Banyo", trailing = "41")
        )
    ),
    TreeNode(
        key = "tech",
        label = "Elektronik",
        children = listOf(
            TreeNode(key = "tech.phone", label = "Telefon", trailing = "212"),
            TreeNode(
                key = "tech.computer",
                label = "Bilgisayar",
                children = listOf(
                    TreeNode(key = "tech.computer.laptop", label = "Dizüstü", trailing = "96"),
                    TreeNode(key = "tech.computer.desktop", label = "Masaüstü", trailing = "38"),
                    TreeNode(key = "tech.computer.tablet", label = "Tablet", trailing = "57")
                )
            )
        )
    ),
    TreeNode(
        key = "wear",
        label = "Giyim",
        children = listOf(
            TreeNode(key = "wear.women", label = "Kadın", trailing = "340"),
            TreeNode(key = "wear.men", label = "Erkek", trailing = "295"),
            TreeNode(key = "wear.inner", label = "İç giyim", trailing = "87")
        )
    )
)

Açınca yüklenen dallar

Açınca yüklenen dallar. Klasörlerin çocukları baştan bilinmez (hasChildren = true, children boş); bir klasör açılınca ekran onu loading'e koyar ve çocuklarını yükler, bu sırada okun yerinde dönen bir gösterge durur. Burada yükleme yarım saniye bekleyerek taklit edilir.

var open by rememberSaveable { mutableStateOf(emptySet<String>()) }
var loaded by rememberSaveable { mutableStateOf(emptyMap<String, Int>()) }
var loading by rememberSaveable { mutableStateOf(emptySet<String>()) }
LaunchedEffect(loading) {
    if (loading.isNotEmpty()) {
        delay(500)
        loaded = loaded + loading.associateWith { 3 }
        loading = emptySet()
    }
}
PantrixTreeView(
    nodes = listOf("documents" to "Belgeler", "pictures" to "Resimler", "music" to "Müzik").map { (key, label) ->
        lazyFolder(key, label, loaded)
    },
    expanded = open,
    onExpandedChange = { next ->
        loading = loading + (next - open).filter { it !in loaded }
        open = next
    },
    loading = loading,
    tagKey = "lazy"
)

private fun lazyFolder(
    key: String,
    label: String,
    loaded: Map<String, Int>
): TreeNode = TreeNode(
    key = key,
    label = label,
    icon = PantrixIcons.Folder,
    hasChildren = true,
    children = (1..(loaded[key] ?: 0)).map { TreeNode(key = "$key/$it", label = "$label $it") }
)

Bir belgenin başlıkları

Seçimi olmayan bir ağaç, bir belgenin başlıkları: satıra basmak bölümü açar ya da kapatır. Klavyeyle ağaca Tab ile gelinir; oklar satırlarda gezer, bir harf o harfle başlayan başlığa gider, * yanındaki bütün bölümleri açar.

var open by rememberSaveable { mutableStateOf(setOf("setup")) }
PantrixTreeView(
    nodes = OUTLINE,
    expanded = open,
    onExpandedChange = { open = it },
    guides = true,
    tagKey = "outline"
)

private val OUTLINE = listOf(
    TreeNode(key = "intro", label = "Giriş"),
    TreeNode(
        key = "setup",
        label = "Kurulum",
        children = listOf(
            TreeNode(key = "setup.gradle", label = "Gradle"),
            TreeNode(key = "setup.theme", label = "Tema")
        )
    ),
    TreeNode(
        key = "parts",
        label = "Bileşenler",
        children = listOf(
            TreeNode(key = "parts.buttons", label = "Düğmeler"),
            TreeNode(
                key = "parts.data",
                label = "Veri",
                children = listOf(
                    TreeNode(key = "parts.data.table", label = "Tablo"),
                    TreeNode(key = "parts.data.tree", label = "Ağaç")
                )
            )
        )
    ),
    TreeNode(key = "faq", label = "Sık sorulanlar")
)

Bir dolgunun üstünde, kendi ölçüleriyle

Bir dolgunun üstünde ve kendi ölçüleriyle: ağacın dolgusu yoktur, birincil rolün yumuşak dolgusunun üstünde o dolgunun verdiği renkle yazılır. TreeViewStyle satırları alçaltır ve girintiyi büyütür.

var open by rememberSaveable { mutableStateOf(setOf("setup", "parts")) }
PantrixSurface(color = PantrixTheme.colors.primary.container) {
    PantrixTreeView(
        nodes = OUTLINE,
        expanded = open,
        onExpandedChange = { open = it },
        guides = true,
        style = TreeViewStyle(rowHeight = 36.dp, indent = 28.dp),
        tagKey = "on_a_fill"
    )
}

private val OUTLINE = listOf(
    TreeNode(key = "intro", label = "Giriş"),
    TreeNode(
        key = "setup",
        label = "Kurulum",
        children = listOf(
            TreeNode(key = "setup.gradle", label = "Gradle"),
            TreeNode(key = "setup.theme", label = "Tema")
        )
    ),
    TreeNode(
        key = "parts",
        label = "Bileşenler",
        children = listOf(
            TreeNode(key = "parts.buttons", label = "Düğmeler"),
            TreeNode(
                key = "parts.data",
                label = "Veri",
                children = listOf(
                    TreeNode(key = "parts.data.table", label = "Tablo"),
                    TreeNode(key = "parts.data.tree", label = "Ağaç")
                )
            )
        )
    ),
    TreeNode(key = "faq", label = "Sık sorulanlar")
)

Kendi renkleriyle

Kendi renkleriyle: TreeViewColors ağacın zeminini, yazısını, seçili satırı, girinti çizgilerini ve aramada bulunan yazıyı boyar. Burada seçili satır markanın değil bilginin rengindedir.

var open by rememberSaveable { mutableStateOf(setOf("app")) }
var chosen by rememberSaveable { mutableStateOf(setOf("app/build.gradle.kts")) }
PantrixTreeView(
    nodes = PROJECT_FILES,
    expanded = open,
    onExpandedChange = { open = it },
    selection = TreeSelection.Single,
    selected = chosen,
    onSelectionChange = { chosen = it },
    colors = TreeViewColors(
        selectedContainer = PantrixTheme.colors.info.container,
        selectedContent = PantrixTheme.colors.info.onContainer,
        guide = PantrixTheme.colors.info.color
    ),
    tagKey = "info_files"
)

private val PROJECT_FILES = listOf(
    TreeNode(
        key = "app",
        label = "app",
        icon = PantrixIcons.Folder,
        children = listOf(
            TreeNode(
                key = "app/src",
                label = "src",
                icon = PantrixIcons.Folder,
                children = listOf(
                    TreeNode(key = "app/src/App.kt", label = "App.kt", trailing = "4 KB"),
                    TreeNode(key = "app/src/Theme.kt", label = "Theme.kt", trailing = "2 KB"),
                    TreeNode(key = "app/src/Screens.kt", label = "Screens.kt", trailing = "9 KB")
                )
            ),
            TreeNode(
                key = "app/test",
                label = "test",
                icon = PantrixIcons.Folder,
                children = listOf(TreeNode(key = "app/test/AppTest.kt", label = "AppTest.kt", trailing = "3 KB"))
            ),
            TreeNode(key = "app/build.gradle.kts", label = "build.gradle.kts", trailing = "1 KB")
        )
    ),
    TreeNode(
        key = "docs",
        label = "docs",
        icon = PantrixIcons.Folder,
        children = listOf(
            TreeNode(key = "docs/README.md", label = "README.md", trailing = "6 KB"),
            TreeNode(key = "docs/CHANGELOG.md", label = "CHANGELOG.md", trailing = "12 KB")
        )
    ),
    TreeNode(key = "settings.gradle.kts", label = "settings.gradle.kts", trailing = "1 KB")
)

API

nodes

Dalları açılıp kapanan bir hiyerarşi: klasörler ve dosyalar, kategoriler, bir belgenin başlıkları.

Parametre	Tür	Varsayılan	Ne olduğu
`nodes`	`List<TreeNode>`		ağacın en üstündeki düğümler, gösterildikleri sırayla. Ağaçta iki düğüm aynı anahtarı taşımaz.
`expanded`	`Set<String>`		açık dalların anahtarları.
`onExpandedChange`	`(Set<String>) -> Unit`		bir dal açıldıktan ya da kapandıktan sonra açık olması gereken anahtarlarla çağrılır. Ağaç kendiliğinden bir şey değiştirmez.
`modifier`	`Modifier`	`Modifier`	ağacın modifier'ı. Ağaç kendisine verilen yer kadar geniş, açık satırları kadar uzundur.
`selection`	`TreeSelection`	`TreeSelection.None`	satırların nasıl seçildiği: hiç, bir seferde bir tane ya da onay kutularıyla.
`selected`	`Set<String>`	`emptySet()`	seçili satırların, ya da işaretli olanların anahtarları.
`onSelectionChange`	`((Set<String>) -> Unit)?`	`null`	bir basıştan sonra seçili, ya da işaretli olması gereken anahtarlarla çağrılır. `null` satırları `selected`'ın tuttuğu gibi bırakır ve bir satıra basmak dalını açar ya da kapatır.
`loading`	`Set<String>`	`emptySet()`	çocukları yüklenen dalların anahtarları: oklarının yerinde dönen bir gösterge durur.
`filter`	`String`	`""`	satırların gösterilmesi için adlarının tutması gereken, ya da hepsi için hiçbir şey.
`guides`	`Boolean`	`false`	açık her dalın okundan tuttuklarının boyunca soluk bir çizginin inip inmediği.
`style`	`TreeViewStyle?`	`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`	`TreeViewColors?`	`null`	bu ağacın kendi renkleri, temanınkiler olmadıkları yerde: burada verilenler, gerisi için temanınkiler.
`tagKey`	`String?`	`null`	ağacın otomasyon anahtarı: ağaç `TreeView_<tagKey>`, içindeki bir satır `TreeView_<tagKey>.Node_<key>` ve oku `TreeView_<tagKey>.Twisty_<key>` olur. Bir basışın ne yaptığı düğümün anahtarıyla bir `TreeView` olayı olarak bildirilir: `expand`, `collapse`, `select`, `check` ve `uncheck`.

TreeViewStyle

PantrixTreeView'un geometrisi: bir satırın ne kadar yüksek olduğu, her seviyenin ne kadar içeri girdiği ve okun ne kadar büyük olduğu.

Parametre	Tür	Varsayılan	Ne olduğu
`shape`	`ShapeSpec`	`ShapeSpec.Unspecified`	Seçili bir satırın dolgusunun köşeleri: markanın şekil ölçeğinden bir adım ya da sabit bir şekil.
`rowHeight`	`Dp`	`Dp.Unspecified`	Bir satırın en az yüksekliği. Daha büyük bir yazı onu uzatır.
`indent`	`Dp`	`Dp.Unspecified`	Bir seviyenin altında durduğu seviyeden ne kadar içeri girdiği.
`iconSize`	`Dp`	`Dp.Unspecified`	Okun, bir düğümün kendi ikonunun ve yüklenen bir dalın dönen göstergesinin genişliği ve yüksekliği.
`gap`	`Dp`	`Dp.Unspecified`	Ok, onay kutusu, ikon, ad ve satırın sonundaki yazı arasında.
`horizontalPadding`	`Dp`	`Dp.Unspecified`	Bir satırın kenarlarıyla tuttuğu şeyler arasındaki yer.
`guideWidth`	`Dp`	`Dp.Unspecified`	Ağaç onları çiziyorsa açık bir daldan aşağı inen çizgilerin kalınlığı.

TreeViewColors

Temanın renklerini almayan bir ağaç için PantrixTreeView'un neyle boyandığı: verilen renk kullanılır, verilmeyen temanınki kalır.

Parametre	Tür	Varsayılan	Ne olduğu
`container`	`Color`	`Color.Unspecified`	Satırların arkasındaki dolgu. Yok: ağaç arkasındakinin üstünde durur.
`content`	`Color`	`Color.Unspecified`	Bir satırın adı ve ikonu. Temanın `textPrimary`'si, ya da ağacın olmayan bir dolgunun üstünde o dolgunun üstündekilere verdiği renk. Ok ve satırın sonundaki yazı temanın kendi zeminlerinde temanın `textSecondary`'si, başka yerde ve bu renk verildiğinde bu renktir.
`selectedContainer`	`Color`	`Color.Unspecified`	Seçili satırın arkasındaki dolgu. Birincil rolün `container`'ı.
`selectedContent`	`Color`	`Color.Unspecified`	Seçili satırın adı, ikonu ve oku: `selectedContainer`'ın üstünde okunan renk. Birincil rolün `onContainer`'ı.
`guide`	`Color`	`Color.Unspecified`	Açık bir daldan aşağı inen çizgiler. Temanın kendi zeminlerinde temanın `divider`'ı. Bir dolgunun üstünde, o çizginin okunmayacağı yerde, `content`'in bir payı.
`match`	`Color`	`Color.Unspecified`	Süzmenin bulduğu harflerin arkasına konan. Temanın uyarı rolü yumuşatılmış, temanın onunla eşlediğiyle yazılır; bir dolgunun üstünde orada yazılanın bir payı, rengini koruyan harflerin altında. Seçilemeyen bir satır bunun bir payını, satırın soluk rengini koruyan harflerin altına koyar.

Erişilebilirlik

Klavye. Ağaç Tab için tek duraktır. Aşağı ve yukarı ok satırdan satıra, Home ve End ilk ve son satıra gider. Satır yönünde ok dalı açar, açık dalda ilk çocuğa gider; öteki ok açık dalı kapatır, başka bir satırda üstündeki dala gider. Bir harf o harfle başlayan sonraki satıra gider, * yanındaki bütün dalları açar. Enter ve Space satıra basar.
Ekran okuyucu. Bir satır adını, sonundaki yazıyı, kapalı bir dalın kaç çocuğu olduğunu ve kaçıncı seviyede durduğunu temanın sözleriyle söyler; basışın ne yapacağı (seçmek, işaretlemek, açmak ya da kapatmak) sunulur, bir dal açık olup olmadığını söyler.