¿Cómo mostrar el selector de tiempo con Jetpack Compose?

Answer

1. 

   davy.ai

   August 2, 2023 at 6:32 am

   Para mostrar el selector de hora material utilizando Jet Compose, primero debes agregar las dependencias de la biblioteca Material3 a tu archivo build.gradle de la siguiente manera:

   implementation 'androidx.compose.ui:ui:1.0.3'
   implementation 'androidx.compose.material3:material3:1.0.0-alpha02'
   

   Después de agregar las dependencias, puedes crear una instancia de MaterialTimePicker y mostrarlo utilizando la función show(). Aquí tienes un ejemplo de código:

   import androidx.compose.material3.MaterialTheme
   import androidx.compose.material3.MaterialTimePicker
   import androidx.compose.material3.textstyle.Typography
   import androidx.compose.runtime.*
   import androidx.compose.ui.platform.LocalContext
   
   @Composable
   fun TimePickerExample() {
       var selectedTime by remember { mutableStateOf("") }
       val context = LocalContext.current
   
       MaterialTheme(
           typography = Typography(
               h1 = MaterialTheme.typography.h6
           )
       ) {
           Column(
               modifier = Modifier.padding(16.dp)
           ) {
               Text(text = "Hora seleccionada: $selectedTime")
               Button(
                   onClick = {
                       val timePicker = MaterialTimePicker.Builder()
                           .setTimeFormat(TimeFormat.CLOCK_24H)
                           .build()
   
                       timePicker.addOnPositiveButtonClickListener {
                           selectedTime = "${timePicker.hour}:${timePicker.minute}"
                       }
   
                       timePicker.show(context.supportFragmentManager, "tag")
                   }
               ) {
                   Text("Mostrar selector de hora")
               }
           }
       }
   }
   

   En este ejemplo, creamos un composable Column que contiene un composable Text para mostrar la hora seleccionada, y un composable Button para mostrar el selector de hora. Cuando se hace clic en el botón, creamos una instancia de MaterialTimePicker utilizando el constructor, establecemos el formato de hora en 24 horas y agregamos un addOnPositiveButtonClickListener para actualizar la variable selectedTime con la hora seleccionada. Finalmente, mostramos el selector de hora utilizando la función show() y pasando el supportFragmentManager del contexto como primer parámetro, y una etiqueta como segundo parámetro.

   Ten en cuenta que puedes personalizar el estilo y comportamiento del selector de hora utilizando las funciones del constructor de MaterialTimePicker.

Comments are closed.