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() } ) }
Bu snippet'teki önemli noktalara dikkat edin:
DialWithDialogExample
composable, iletişim kutusunuTimePicker
ile sarmalıyor.TimePickerDialog
, şunlarlaAlertDialog
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.
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.
DialWithDialogExample
,TimePickerState
öğesini geçerli saatiTimePicker
veonConfirm
saatlerine geçirir işlevini kullanın.
![Uyarı iletişim kutusunda başlık, mod açma/kapatma ve kapatma ve onaylama düğmelerini uygulayan zaman seçici.](https://developer.android.google.cn/static/develop/ui/compose/images/components/timepicker-basic.png?hl=tr)
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") } } } } } }
Bu snippet'teki önemli noktalara dikkat edin:
AdvancedTimePickerExample
composable, özelleştirilebilir bir zaman oluşturur seçici iletişim kutusu.AlertDialog
composable'dan daha fazla esneklik içinDialog
composable kullanır.- İ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.
Surface
, iletişim kutusuna şekil ve yükseklik uygular. Düzen: Genişlik ve yükseklik içinIntrinsicSize.Min
.Column
veRow
düzeni, iletişim kutusunun yapı bileşenlerini sağlar.- Ö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
ileTimeInput
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:
![Özel iletişim kutusunda başlık, mod açma/kapatma ve kapatma ve onaylama düğmelerini uygulayan bir zaman seçici.](https://developer.android.google.cn/static/develop/ui/compose/images/components/timepicker-advanced.png?hl=tr)