Pantrix UI

Page Size

Bir listenin bir sayfasında kaç satır gösterileceğini seçtirir: "Sayfa başına" sözleri ve yanında boyların select'i.

import com.pantrixui.components.data.pagination.PantrixPageSize

Örnekler

Bir tablonun ayağında: sayfa boyu ve sayfaya git

Bir tablonun ayağı: PantrixPageSize bir sayfada kaç sipariş gösterileceğini seçtirir, PantrixPagination sayfalar arasında gezdirir, PantrixPageJump numarası yazılan sayfaya götürür. Üçü bir FlowRow'dadır: yeri olan yerde yan yana durur, dar yerde sığmayan alt satıra iner; dik tutulan bir telefonda üçü alt alta durur. Bir Row sığmayanı alt satıra indirmez: sonda duranı kalan yere sıkıştırır. Üçünün yüksekliği aynı olmayabilir: itemVerticalAlignment onları ortalarından hizalar.

Üçü de ekranın durumunu okur ve birbirini bilmez. Sayfa boyunu değiştir: kırk sekiz sipariş üçer üçer on altı, onar onar beş sayfa eder; satırın numaraları ve alanın aldığı hane sayısı yeni sayfa sayısına uyar. Boy değişirken görünen ilk sipariş ekranda kalır: açılan sayfa, o siparişin yeni boyda düştüğü sayfadır. Dördüncü sayfada, 16–20 arası görünürken 10'u seç: ikinci sayfa, 11–20 arası gelir. Kırk sekiz sipariş için boylar küçük: hazır boyların (DefaultPageSizes) ilkinden, 10'dan önce 3 ve 5.

Alana bir numara yaz ve Enter'a bas: o sayfa açılır, alan boşalır ve odak alanda kalır. Son sayfadan büyük bir numara son sayfayı açar; alan rakamdan başkasını almaz. İstenen sayfa, neyle istenirse istensin, kartın "Son olay" satırına yazılır.

val report = LocalExampleEvents.current
var pageSize by rememberSaveable { mutableIntStateOf(ORDERS_PER_PAGE) }
var page by rememberSaveable { mutableIntStateOf(1) }
val pageCount = (ORDER_COUNT + pageSize - 1) / pageSize
val first = (page - 1) * pageSize + 1
val last = minOf(page * pageSize, ORDER_COUNT)
val open: (Int) -> Unit = { asked ->
    page = asked
    report("$asked. sayfa istendi")
}
OrderRows(first = first, last = last, rows = pageSize, tagKey = "row")
PantrixText(
    text = "$ORDER_COUNT siparişten $first–$last arası",
    color = PantrixTheme.colors.textSecondary,
    tagKey = "foot_shown"
)
FlowRow(
    horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.lg),
    verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm),
    itemVerticalAlignment = Alignment.CenterVertically
) {
    PantrixPageSize(
        pageSize = pageSize,
        onPageSizeChange = { size ->
            // Görünen ilk sipariş yeni boyda hangi sayfaya düşüyorsa o sayfa açılır: sipariş ekranda kalır.
            val kept = (first - 1) / size + 1
            pageSize = size
            page = kept
            report("Sayfada $size sipariş: $kept. sayfa açıldı")
        },
        pageSizes = listOf(3, 5) + DefaultPageSizes.first(),
        tagKey = "foot"
    )
    PantrixPagination(page = page, pageCount = pageCount, onPageChange = open, tagKey = "foot")
    PantrixPageJump(pageCount = pageCount, onPageChange = open, tagKey = "foot")
}

@Composable
private fun OrderRows(
    first: Int,
    last: Int,
    rows: Int,
    tagKey: String
) {
    PantrixSurface(modifier = Modifier.fillMaxWidth(), border = PantrixTheme.colors.divider) {
        Column {
            for (order in first until first + rows) {
                val listed = order <= last
                // Boş satırın çizgisi de yerini tutar, ama çizilmez.
                val line = if (listed) Color.Unspecified else Color.Transparent
                if (order > first) PantrixHorizontalDivider(color = line)
                Row(
                    modifier = Modifier.fillMaxWidth().padding(PantrixTheme.spacing.md),
                    horizontalArrangement = Arrangement.SpaceBetween
                ) {
                    if (listed) {
                        PantrixText(text = "Sipariş #${FIRST_ORDER + order}", tagKey = "${tagKey}_$order")
                        PantrixText(text = "${1 + order % 4} ürün", color = PantrixTheme.colors.textSecondary)
                    } else {
                        // Boş bir yazı da bir satır yüksekliğindedir; ekran okuyucuya söylenecek bir şeyi yoktur.
                        PantrixText(text = "", role = TextRole.Decorative)
                    }
                }
            }
        }
    }
}

private const val ORDER_COUNT = 48

private const val ORDERS_PER_PAGE = 5

private const val FIRST_ORDER = 4800

API

pageSize

Bir listenin bir sayfasında kaç satır gösterileceğini seçtirir: "Sayfa başına" sözleri ve yanında boyların select'i.

ParametreTürVarsayılanNe olduğu
pageSizeIntBir sayfanın şu an kaç satır gösterdiği.
onPageSizeChange(pageSize: Int) -> UnitSeçilen boyla çağrılır, o boy pageSize'dan başkaysa. Select onu, pageSize öyle söylediğinde gösterir.
modifierModifierModifierSatıra uygulanır.
pageSizesList<Int>DefaultPageSizesAralarından seçilecek boylar, listelendikleri sırayla: verilmezse DefaultPageSizes. İki kez verilen boy bir kez listelenir. En az bir boy vardır ve her biri en az bir satırdır: boş bir liste ya da birin altında bir sayı içeren liste reddedilir.
labelStringPantrixTheme.strings.perPageSelect'in önündeki sözler ve select'in ekran okuyucudaki adı: verilmezse temanın "Sayfa başına" sözleri.
enabledBooleantrueBir boyun seçilip seçilemediği: kullanılamayan satırın sözleri devre dışı yazı rengindedir ve select'i devre dışıdır; odak almaz ve bunu söyler.
tagKeyString?nullOtomasyon için dilden bağımsız bir anahtar. Satırın test etiketi PageSize_<tagKey>, sözlerininki PageSize_<tagKey>.Text_label olur. İçindeki select'in anahtarı <tagKey>_page_size'dır ve bir select gibi etiketlenir: Select_<tagKey>_page_size, listesi SelectList_<tagKey>_page_size, listedeki bir boy Select_<tagKey>_page_size.SelectOption_<size>. Bir etikete sığmayacak kadar uzun bir anahtar kesilir, _page_size bütün kalır. Bir seçim, boyuyla birlikte PageSize olarak bildirilir. Boyların listesinin açıldığı da satırın etiketiyle PageSize olarak bildirilir: satır tek bir bileşendir ve tek bir adla bildirir.

Erişilebilirlik