Pantrix UI

Page Jump

Uzun bir listenin bir sayfasına numarasıyla götürür: "Sayfaya git" sözleri ve yanında numaranın yazıldığı kısa bir alan.

import com.pantrixui.components.data.pagination.PantrixPageJump

Ö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

pageCount

Uzun bir listenin bir sayfasına numarasıyla götürür: "Sayfaya git" sözleri ve yanında numaranın yazıldığı kısa bir alan.

ParametreTürVarsayılanNe olduğu
pageCountIntKaç sayfa olduğu: bir numaranın sayılabileceği son sayfa ve alanın tuttuğu hane sayısı. Birin altındaki sayı bir sayılır, PantrixPagination'da olduğu gibi.
onPageChange(page: Int) -> Unitİstenen sayfayla çağrılır: numarasıyla, birden sayılarak.
modifierModifierModifierSatıra uygulanır.
labelStringPantrixTheme.strings.goToPageAlanın önündeki sözler ve alanın ekran okuyucudaki adı: verilmezse temanın "Sayfaya git" sözleri.
enabledBooleantrueBir numaranın yazılıp yazılamadığı: kullanılamayan satırın sözleri devre dışı yazı rengindedir ve alanı 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 PageJump_<tagKey>, sözlerininki PageJump_<tagKey>.Text_label olur. İçindeki alanın anahtarı <tagKey>_page_jump'tır ve bir metin alanı gibi etiketlenir: TextField_<tagKey>_page_jump. Bir etikete sığmayacak kadar uzun bir anahtar kesilir, _page_jump bütün kalır. İstenen sayfa, sayfasıyla birlikte PageJump olarak bildirilir; yazılan hiçbir zaman bildirilmez. Alanın odağı aldığı da satırın etiketiyle PageJump olarak bildirilir: satır tek bir bileşendir ve tek bir adla bildirir.

Erişilebilirlik