Time Picker

Sütunlardan seçilen bir saat: saatler, dakikalar ve 12 saatlik bir saatte günün yarısı; her biri beş satır gösteren, kalanına kayan bir sütun, seçili değer ortasında dolgulu.

import com.pantrixui.components.date.timepicker.PantrixTimePicker

Seçim. Bir değere basmak bütün bir saati verir, öteki sütun olduğu gibi kalır. Henüz seçim yoksa bir saat ilk izinli dakikasıyla, bir dakika ilk izinli saatle gelir. Seçili değer sütunun ortasına kayar.
Seçilemeyen saatler. minTime ve maxTime dışındaki dakikalar ve hiçbir dakikası arada kalmayan saatler soluk çizilir ve basılamaz. maxTime minTime'dan önceyse seçilebilen saatler gece yarısını geçer.
Dakika adımı. minuteStep dakikaların arasını verir: 15 ile 00, 15, 30 ve 45.
12 ya da 24 saat. is24Hour seçicinin şeklini verir: true iki sütunla 22:00, false günün yarısının sütunuyla 10:00 PM (AM/PM, ÖÖ/ÖS, ص/م). Varsayılan her dilde 24 saattir. Ekranda aynı düzenle yazmak için strings.time(saat, dakika, is24Hour = …).
Platform. Bir satır telefonda platformun en küçük dokunma hedefi kadardır (Android'de 48dp, iOS'ta 44pt), masaüstünde ve web'de 36dp.
Saat türü. Saatler PantrixTime'dır; bir gün ve bir saat PantrixDate.at ile cihazın saatinde bir an olur. kotlinx-datetime'a ya da java.time'a çevirmek için docs/guide/date-time/DATE_TIME_GUIDE.md.

Örnekler

Popover'da çeyrek saatlik randevu

Bir düğme seçilen saati gösterir ve seçiciyi altında bir popover'da açar. Dakikalar çeyrek saat arayla; popover saat ve dakika seçilirken açık kalır, dışına basınca kapanır.

var at by remember { mutableStateOf<PantrixTime?>(null) }
var open by remember { mutableStateOf(false) }
val strings = PantrixTheme.strings
PantrixPopover(
    visible = open,
    onDismissRequest = { open = false },
    anchor = {
        PantrixButton(
            text = at?.let { strings.clock(it.hour, it.minute) } ?: "Randevu saati seçin",
            onClick = { open = !open },
            variant = ButtonVariant.Outline,
            leadingIcon = { PantrixIcon(PantrixIcons.Clock, contentDescription = null) },
            tagKey = "at"
        )
    },
    alignment = PopoverAlignment.Start,
    tagKey = "at"
) {
    PantrixTimePicker(
        selected = at,
        onSelect = { at = it },
        minuteStep = QUARTER,
        tagKey = "at"
    )
}

private const val QUARTER = 15

Sayfada çalışma saatleri

Sayfada duran bir seçiciden çalışma saatleri içinde bir saat: 09:00 ile 17:30 arası, yarım saat arayla. Dışarıda kalan saatler soluk; seçilen saat altında yazılır.

var call by remember { mutableStateOf<PantrixTime?>(PantrixTime(OPENS, 0)) }
val strings = PantrixTheme.strings
Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixTimePicker(
        selected = call,
        onSelect = { call = it },
        minTime = PantrixTime(OPENS, 0),
        maxTime = PantrixTime(LAST_CALL, HALF_HOUR),
        minuteStep = HALF_HOUR,
        tagKey = "call"
    )
    PantrixText(
        text = call?.let { "Arama saati: ${strings.clock(it.hour, it.minute)}" } ?: "Bir arama saati seçin",
        style = PantrixTheme.typography.body
    )
}

private const val HALF_HOUR = 30

private const val OPENS = 9

private const val LAST_CALL = 17

Dialog'da gün ve saat birlikte

Bir dialog'da bir toplantının günü ve saati. Saat, yer olduğunda takvimin sağında durur; ikisine yetmeyen bir pencerede, bir telefonda olduğu gibi, takvimin altına iner (FlowRow). Takvimdeki ve saatteki seçim bir taslaktır: Tamam ikisini PantrixDate.at ile cihazın saatinde bir ana çevirir; o an UTC olarak da yazılır.

var meeting by remember { mutableStateOf<Instant?>(null) }
var day by remember { mutableStateOf<PantrixDate?>(null) }
var time by remember { mutableStateOf<PantrixTime?>(null) }
var open by remember { mutableStateOf(false) }
val today = rememberToday()
val strings = PantrixTheme.strings
val report = LocalExampleEvents.current
Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixButton(
        text = "Toplantı zamanı seçin",
        onClick = { open = true },
        variant = ButtonVariant.Outline,
        tagKey = "meeting"
    )
    meeting?.let { moment ->
        val shown = PantrixDate.of(moment)
        val clock = PantrixTime.of(moment)
        PantrixText(
            text = "Toplantı: ${strings.date(shown.day, shown.month, shown.year)} " +
                strings.clock(clock.hour, clock.minute),
            style = PantrixTheme.typography.body
        )
        PantrixText(text = "UTC: $moment", style = PantrixTheme.typography.footnote)
    }
}
PantrixDialog(
    visible = open,
    onDismissRequest = { open = false },
    title = "Toplantı zamanı",
    actions = {
        PantrixButton(text = "Vazgeç", onClick = { open = false }, variant = ButtonVariant.Text, tagKey = "cancel")
        PantrixButton(
            text = "Tamam",
            onClick = {
                val chosenDay = day
                val chosenTime = time
                if (chosenDay != null && chosenTime != null) meeting = chosenDay.at(chosenTime)
                open = false
                report("Toplantı zamanı seçildi")
            },
            enabled = day != null && time != null,
            tagKey = "accept"
        )
    },
    tagKey = "meeting"
) {
    FlowRow(
        horizontalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.md, Alignment.CenterHorizontally),
        verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)
    ) {
        PantrixDatePicker(selected = day, onSelect = { day = it }, minDate = today, tagKey = "meeting")
        PantrixTimePicker(
            selected = time,
            onSelect = { time = it },
            minuteStep = FIVE_MINUTES,
            tagKey = "meeting"
        )
    }
}

private const val FIVE_MINUTES = 5

12 ya da 24 saat

Bir hatırlatmanın saati, seçilen saat düzeniyle. is24Hour seçicinin şeklini verir: true iki sütun (00'dan 23'e, 22:00), false saatler 12'den 11'e ve günün yarısının sütunu (10:00 PM). Saat yine 24 saatlik bir PantrixTime'dır; yalnızca gösterimi değişir.

var reminder by remember { mutableStateOf<PantrixTime?>(PantrixTime(REMINDER_HOUR, 0)) }
var is24Hour by remember { mutableStateOf(true) }
val strings = PantrixTheme.strings
Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixSegmentButton(
        options = listOf(
            SegmentOption(true, "24 saat", tagKey = "twenty_four"),
            SegmentOption(false, "12 saat", tagKey = "twelve")
        ),
        selected = is24Hour,
        onSelect = { is24Hour = it },
        fullWidth = false,
        tagKey = "cycle"
    )
    PantrixTimePicker(
        selected = reminder,
        onSelect = { reminder = it },
        is24Hour = is24Hour,
        tagKey = "reminder"
    )
    PantrixText(
        text = reminder?.let { "Hatırlatma: ${strings.time(it.hour, it.minute, is24Hour = is24Hour)} ($it)" }
            ?: "Bir hatırlatma saati seçin",
        style = PantrixTheme.typography.body
    )
}

private const val REMINDER_HOUR = 22

Gece yarısını geçen saatler

Bir gece vardiyasının başlangıcı: 22:00 ile 06:00 arası, yarım saat arayla. maxTime minTime'dan önce olduğu için seçilebilen saatler gece yarısını geçer: 22 ve 23, sonra 00'dan 06'ya; aradaki saatler soluk. Gece yarısından sonraki bir saat ertesi güne düşer, altta öyle yazılır.

val opens = PantrixTime(NIGHT_STARTS, 0)
var start by remember { mutableStateOf<PantrixTime?>(opens) }
val strings = PantrixTheme.strings
Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixTimePicker(
        selected = start,
        onSelect = { start = it },
        minTime = opens,
        maxTime = PantrixTime(NIGHT_ENDS, 0),
        minuteStep = HALF_HOUR,
        tagKey = "night"
    )
    PantrixText(
        text = start?.let {
            val clock = strings.clock(it.hour, it.minute)
            if (it < opens) "Vardiya başlangıcı: $clock, ertesi gün" else "Vardiya başlangıcı: $clock"
        } ?: "Vardiyanın başlangıcını seçin",
        style = PantrixTheme.typography.body
    )
}

private const val HALF_HOUR = 30

private const val NIGHT_STARTS = 22

private const val NIGHT_ENDS = 6

Kendi renkleri ve devre dışı

Seçicinin kendi renkleri ve ölçüsü, bir anahtarla devre dışı. Seçili saatin dolgusu ve sütunların adları bilgi renginde; verilmeyen her renk temanındır. Seçicinin kenar boşluğu yok (padding = 0.dp): kartın kendi boşluğunda durur. Anahtar kapalıyken seçici soluktur ve basılamaz, seçili saat yerinde kalır.

var alarm by remember { mutableStateOf<PantrixTime?>(PantrixTime(ALARM_HOUR, HALF_HOUR)) }
var enabled by remember { mutableStateOf(true) }
val colors = PantrixTheme.colors
Column(verticalArrangement = Arrangement.spacedBy(PantrixTheme.spacing.sm)) {
    PantrixSwitchButton(
        checked = enabled,
        onCheckedChange = { enabled = it },
        label = "Seçilebilir",
        tagKey = "alarm_enabled"
    )
    PantrixTimePicker(
        selected = alarm,
        onSelect = { alarm = it },
        enabled = enabled,
        style = TimePickerStyle(padding = 0.dp),
        colors = TimePickerColors(selectedContainer = colors.info.color, heading = colors.info.color),
        tagKey = "alarm"
    )
}

private const val HALF_HOUR = 30

private const val ALARM_HOUR = 7

API

selected

Sütunlardan seçilen bir saat: saatler, dakikalar ve 12 saatlik bir saatte günün yarısı; her biri beş satır gösteren, kalanına kayan bir sütun, seçili değer ortasında dolgulu.

Parametre	Tür	Varsayılan	Ne olduğu
`selected`	`PantrixTime?`		seçili saat; seçim yokken null. Saniyeleri, bir basışın ondan yaptığı her saatte korunur.
`onSelect`	`(PantrixTime) -> Unit`		bir basışın ya da tuşun seçtiği saati alır: seçicinin aldığı bir saat.
`modifier`	`Modifier`	`Modifier`	seçicinin modifier'ı. Seçici sütunları kadar geniştir; daha geniş bir yer verilince ortasında durur.
`minTime`	`PantrixTime?`	`null`	seçilebilen ilk saat; o kadar erken bir sınır yoksa null. Saati ve dakikası dikkate alınır.
`maxTime`	`PantrixTime?`	`null`	seçilebilen son saat; o kadar geç bir sınır yoksa null. `minTime`'dan önceyse seçilebilen saatler gece yarısını geçer, `minTime`'dan ertesi günün `maxTime`'ına kadar: bir gecenin saatleri.
`minuteStep`	`Int`	`1`	sütunundaki dakikaların arası, 1 ile 60: 15 saat başını, çeyrek geçeyi, buçuğu ve çeyrek kalayı sunar. Aralarına düşen seçili bir dakika yine de gösterilir.
`is24Hour`	`Boolean`	`true`	saatlerin 24 ile sayılıp sayılmadığı, dolayısıyla seçicinin şekli: `22:00`'ı seçen iki sütun; ya da 12 ile, günün yarısının üçüncü sütunuyla `10:00 PM`. Varsayılan her dilde 24 saattir. Her iki durumda da seçilen saat 24 saatlik bir `PantrixTime`'dır; bir ekran onu aynı düzenle `PantrixStrings.time(hour, minute, is24Hour = …)` ile yazar.
`enabled`	`Boolean`	`true`	bir saat seçilip seçilemeyeceği. Seçim almayan bir seçici soluk çizilir.
`style`	`TimePickerStyle?`	`null`	bu çağrının kendi stili: kapsayan her stilin üstünde, yoğunluğun altında. Yalnızca verdiği alanlar, her platformda değişir.
`colors`	`TimePickerColors?`	`null`	bu seçicinin kendi renkleri: verdikleri, kalanı için temanınkiler.
`tagKey`	`String?`	`null`	seçicinin otomasyon anahtarı: `TimePicker_<tagKey>` olur, değerleri `TimePicker_<tagKey>.Hour_14`, `.Minute_30` ve `.Period_pm`.

TimePickerStyle

PantrixTimePicker'ın geometrisi: bir sütundaki bir değerin yeri, seçili bir değerin çizildiği hap, bir sütunun genişliği ve sütunların çevresindeki boşluk.

Parametre	Tür	Varsayılan	Ne olduğu
`cellSize`	`Dp`	`Dp.Unspecified`	Bir değerin yerinin yüksekliği: bir satır.
`markHeight`	`Dp`	`Dp.Unspecified`	Seçili değerin ve işaretçinin altındaki değerin çizildiği, yerinin ortasındaki hapın yüksekliği. Sütunun çoğu kadar geniştir.
`columnWidth`	`Dp`	`Dp.Unspecified`	Bir değer sütununun genişliği.
`padding`	`Dp`	`Dp.Unspecified`	Seçicinin kenarı ile sütunları arasındaki boşluk.
`gap`	`Dp`	`Dp.Unspecified`	Sütunların adları ile değerleri arasındaki ara.

TimePickerColors

Bir PantrixTimePicker'ın temanın renkleri yerine boyandığı renkler: verilen renk kullanılır, verilmeyen temanın kalır.

Parametre	Tür	Varsayılan	Ne olduğu
`content`	`Color`	`Color.Unspecified`	Değerlerin sayıları ve saatler ile dakikalar arasındaki işaret. Temanın `textPrimary`'si.
`heading`	`Color`	`Color.Unspecified`	Sütunların üstlerindeki adları. Temanın `textSecondary`'si.
`selectedContainer`	`Color`	`Color.Unspecified`	Seçili bir değerin hapı. Birincil rolün `color`'ı.
`selectedContent`	`Color`	`Color.Unspecified`	Üstündeki sayı. Birincil rolün `onColor`'ı ya da `selectedContainer` olarak verilen bir rol dolgusunun üstündekine verdiği renk.
`hover`	`Color`	`Color.Unspecified`	İşaretçinin altındaki hap: bir basışın hangi değeri seçeceği. `content`'in bir payı.
`disabled`	`Color`	`Color.Unspecified`	Seçilemeyen değerler ve seçim almayan bir seçicinin her şeyi. Temanın `textDisabled`'ı.

Erişilebilirlik

Klavye. Her sütun bir Tab durağıdır. Oklar bir değer, Page Up ve Page Down altı saat ya da on beş dakika, Home ve End ilk ve son değeri seçer; rakam yazmak o değere atlar ("1" sonra "4" saat 14). ← ve → sütunlar arasında gezer.
Ekran okuyucu. Her sütun adıyla, her değer bir düğme olarak okunur; seçilen saat kibarca duyurulur.