Os seletores de horário geralmente aparecem em caixas de diálogo. Você pode usar uma expressão relativamente genérica implementação mínima de uma caixa de diálogo, ou você pode implementar uma caixa de diálogo personalizada com mais flexibilidade.
Para mais informações sobre caixas de diálogo em geral, incluindo como usar o seletor de horário estado, consulte o Guia de seletores de horário.
Exemplo básico
A maneira mais direta de criar uma caixa de diálogo para seu seletor de horário é
criar um elemento combinável que implemente o AlertDialog
. O snippet a seguir
fornece um exemplo de um diálogo relativamente mínimo usando esta abordagem:
@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() } ) }
Observe os pontos principais neste snippet:
- O elemento combinável
DialWithDialogExample
uneTimePicker
em uma caixa de diálogo. TimePickerDialog
é um elemento combinável personalizado que cria umAlertDialog
com os seguintes parâmetros:onDismiss
: uma função chamada quando o usuário dispensa a caixa de diálogo (usando o o botão de dispensar ou o botão de navegação de volta).onConfirm
: uma função chamada quando o usuário clica em "OK". .content
: um elemento combinável que mostra o seletor de horário na caixa de diálogo.
- O
AlertDialog
inclui:- Um botão "Dispensar" rotulado "Dispensar".
- Um botão de confirmação rotulado como "OK".
- O conteúdo do seletor de horário transmitido como o parâmetro
text
.
DialWithDialogExample
inicializa oTimePickerState
com o horário atual e a passa paraTimePicker
eonConfirm
função.
![Um seletor de horário em uma AlertDialog que implementa um título, uma alternância de modo e botões de dispensar e confirmar.](https://developer.android.google.cn/static/develop/ui/compose/images/components/timepicker-basic.png?hl=pt-br)
Exemplo avançado
Este snippet demonstra uma implementação avançada de um horário personalizável Caixa de diálogo do seletor no Jetpack Compose.
@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") } } } } } }
Observe os pontos principais neste snippet:
- O elemento combinável
AdvancedTimePickerExample
cria um horário personalizável caixa de diálogo do seletor. - Ele usa um elemento combinável
Dialog
para ter mais flexibilidade que umAlertDialog
. - A caixa de diálogo inclui um título personalizável e um botão ativar/desativar para alternar entre os modos de discagem e entrada.
Surface
aplica forma e elevação à caixa de diálogo, comIntrinsicSize.Min
para largura e altura.- Os layouts
Column
eRow
fornecem os componentes da estrutura da caixa de diálogo. - O exemplo rastreia o modo do seletor usando
showDial
.- Uma
IconButton
alterna entre os modos, atualizando o ícone conforme necessário. - O conteúdo da caixa de diálogo alterna entre
TimePicker
eTimeInput
com base na o estadoshowDial
.
- Uma
Essa implementação avançada oferece um tempo altamente personalizável e reutilizável caixa de diálogo seletora que pode se adaptar a diferentes casos de uso no seu app.
Essa implementação aparece da seguinte maneira:
![Um seletor de horário em uma caixa de diálogo personalizada que implementa um título, uma alternância de modo e botões de dispensar e confirmar.](https://developer.android.google.cn/static/develop/ui/compose/images/components/timepicker-advanced.png?hl=pt-br)