Zaman seçiciler için iletişim kutuları

Saat seçiciler genellikle iletişim kutularında görünür. Nispeten genel ve geniş kapsamlı veya özel bir iletişim kutusuyla birlikte özel bir iletişim kutusu daha esnek olabiliyor.

Zaman seçicinin nasıl kullanılacağı da dahil olmak üzere genel iletişim kutuları hakkında daha fazla bilgi için Zaman seçiciler kılavuzuna bakın.

Temel örnek

Zaman seçiciniz için iletişim kutusu oluşturmanın en basit yolu AlertDialog uygulayan bir composable oluşturun. Aşağıdaki snippet bu yaklaşımın kullanıldığı göreceli olarak minimal bir diyalog örneği sağlar:

@Composable
fun DialWithDialogExample(
    onConfirm: (TimePickerState) -> Unit,
    onDismiss: () -> Unit,
) {
    val currentTime = Calendar.getInstance()

    val timePickerState = rememberTimePickerState(
        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
        initialMinute = currentTime.get(Calendar.MINUTE),
        is24Hour = true,
    )

    TimePickerDialog(
        onDismiss = { onDismiss() },
        onConfirm = { onConfirm(timePickerState) }
    ) {
        TimePicker(
            state = timePickerState,
        )
    }
}

@Composable
fun TimePickerDialog(
    onDismiss: () -> Unit,
    onConfirm: () -> Unit,
    content: @Composable () -> Unit
) {
    AlertDialog(
        onDismissRequest = onDismiss,
        dismissButton = {
            TextButton(onClick = { onDismiss() }) {
                Text("Dismiss")
            }
        },
        confirmButton = {
            TextButton(onClick = { onConfirm() }) {
                Text("OK")
            }
        },
        text = { content() }
    )
}
TimePickers.kt

Bu snippet'teki önemli noktalara dikkat edin:

1. DialWithDialogExample composable, iletişim kutusunu TimePicker ile sarmalıyor.
2. TimePickerDialog, şunlarla AlertDialog oluşturan özel bir composable: şu parametrelere sahip olursunuz:
   • onDismiss: Kullanıcı iletişim kutusunu kapattığında çağrılan bir işlev ( kapatma düğmesine veya geri gitmeye dokunun).
   • onConfirm: Kullanıcı "Tamam" düğmesini tıkladığında çağrılan bir işlev düğmesini tıklayın.
   • content: İletişim kutusunda zaman seçiciyi gösteren bir composable.
3. AlertDialog şunları içerir:
   • "Kapat" etiketli bir kapatma düğmesi.
   • "Tamam" etiketli bir onay düğmesi.
   • text parametresi olarak iletilen zaman seçici içeriği.
4. DialWithDialogExample, TimePickerState öğesini geçerli saati TimePicker ve onConfirm saatlerine geçirir işlevini kullanın.

Gelişmiş Örnek

Bu snippet, özelleştirilebilir bir zamanın gelişmiş uygulamasını gösterir Jetpack Compose'daki seçici iletişim kutusu.

@Composable
fun AdvancedTimePickerExample(
    onConfirm: (TimePickerState) -> Unit,
    onDismiss: () -> Unit,
) {

    val currentTime = Calendar.getInstance()

    val timePickerState = rememberTimePickerState(
        initialHour = currentTime.get(Calendar.HOUR_OF_DAY),
        initialMinute = currentTime.get(Calendar.MINUTE),
        is24Hour = true,
    )

    /** Determines whether the time picker is dial or input */
    var showDial by remember { mutableStateOf(true) }

    /** The icon used for the icon button that switches from dial to input */
    val toggleIcon = if (showDial) {
        Icons.Filled.EditCalendar
    } else {
        Icons.Filled.AccessTime
    }

    AdvancedTimePickerDialog(
        onDismiss = { onDismiss() },
        onConfirm = { onConfirm(timePickerState) },
        toggle = {
            IconButton(onClick = { showDial = !showDial }) {
                Icon(
                    imageVector = toggleIcon,
                    contentDescription = "Time picker type toggle",
                )
            }
        },
    ) {
        if (showDial) {
            TimePicker(
                state = timePickerState,
            )
        } else {
            TimeInput(
                state = timePickerState,
            )
        }
    }
}

@Composable
fun AdvancedTimePickerDialog(
    title: String = "Select Time",
    onDismiss: () -> Unit,
    onConfirm: () -> Unit,
    toggle: @Composable () -> Unit = {},
    content: @Composable () -> Unit,
) {
    Dialog(
        onDismissRequest = onDismiss,
        properties = DialogProperties(usePlatformDefaultWidth = false),
    ) {
        Surface(
            shape = MaterialTheme.shapes.extraLarge,
            tonalElevation = 6.dp,
            modifier =
            Modifier
                .width(IntrinsicSize.Min)
                .height(IntrinsicSize.Min)
                .background(
                    shape = MaterialTheme.shapes.extraLarge,
                    color = MaterialTheme.colorScheme.surface
                ),
        ) {
            Column(
                modifier = Modifier.padding(24.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(bottom = 20.dp),
                    text = title,
                    style = MaterialTheme.typography.labelMedium
                )
                content()
                Row(
                    modifier = Modifier
                        .height(40.dp)
                        .fillMaxWidth()
                ) {
                    toggle()
                    Spacer(modifier = Modifier.weight(1f))
                    TextButton(onClick = onDismiss) { Text("Cancel") }
                    TextButton(onClick = onConfirm) { Text("OK") }
                }
            }
        }
    }
}
TimePickers.kt

Bu snippet'teki önemli noktalara dikkat edin:

1. AdvancedTimePickerExample composable, özelleştirilebilir bir zaman oluşturur seçici iletişim kutusu.
2. AlertDialog composable'dan daha fazla esneklik için Dialog composable kullanır.
3. İletişim kutusu, özelleştirilebilir bir başlık ve geçiş yapmak için bir açma/kapatma düğmesi içerir giriş modları arasında geçiş yapın.
4. Surface, iletişim kutusuna şekil ve yükseklik uygular. Düzen: Genişlik ve yükseklik için IntrinsicSize.Min.
5. Column ve Row düzeni, iletişim kutusunun yapı bileşenlerini sağlar.
6. Örnekte, seçici modu showDial kullanılarak izlenir.
   • IconButton, modlar arasında geçiş yaparak simgeyi uygun şekilde günceller.
   • İletişim kutusu içeriği aşağıdakilere göre TimePicker ile TimeInput arasında değişir: showDial durumu.

Bu gelişmiş uygulama, son derece özelleştirilebilir ve yeniden kullanılabilir bir zaman sağlar. uygulamanızdaki farklı kullanım alanlarına uyarlanabilen seçici iletişim kutusu.

Bu uygulama aşağıdaki gibi görünür:

Ek kaynaklar

• Zaman seçiciler rehberi
• Materyal Tasarım - Zaman Seçiciler