🚀 Text y TextField en Jetpack Compose

🎥 Video Tutorial

Mira este video paso a paso para aprender a crear el componente Text

🏗️ ¿Qué es Scaffold?

Scaffold es un contenedor que organiza los componentes principales de una pantalla de forma estructurada.

@Preview
@Composable
fun ShowContent() {
    Scaffold(
        content = { paddingValues ->
            Formulario(paddingValues)
        }
    )
}

PaddingValues: Se utiliza para evitar que el contenido se superponga con el topBar o bottomBar. El sistema lo genera automáticamente para respetar los espacios de estos componentes.

📝 Componente Text

El componente Text es fundamental para mostrar información en la interfaz. Solo recibe un parámetro obligatorio: text (String).

Ejemplo - Propiedades del Texto:

@Composable
fun CreateText() {
    Text(
        text = "Mensaje Personalizado",
        fontFamily = FontFamily.Monospace,
        fontWeight = FontWeight.Bold,
        fontSize = 24.sp,
        color = Color.Blue
    )
}

Ejemplo - Modifier (Contenedor):

@Composable
fun CreateText() {
    Text(
        text = "Hola Mundo",
        modifier = Modifier
            .background(Color.Blue)
            .fillMaxWidth()
            .padding(16.dp),
        color = Color.White
    )
}

✏️ Componente TextField

El TextField permite la entrada de datos del usuario. Tiene dos parámetros obligatorios:

@Composable
fun CreateTextField(
    value: String,
    onValueChange: (String) -> Unit
) {
    TextField(
        value = value,
        onValueChange = onValueChange,
        label = { Text("Ingrese su nombre") },
        placeholder = { Text("Escribe aquí...") },
        modifier = Modifier.fillMaxWidth(),
        singleLine = true
    )
}

Explicación: Esta función es reutilizable porque recibe los parámetros y los pasa directamente al TextField. La lambda onValueChange tiene la misma firma que requiere TextField, por eso podemos pasarla por referencia.

🔘 Componente Button

El componente Button ejecuta una acción cuando el usuario hace clic.

@Composable
fun CreateButton(
    onClick: () -> Unit
) {
    Button(
        onClick = onClick,
        modifier = Modifier.fillMaxWidth()
    ) {
        Text("Enviar Saludo")
    }
}

🎯 Ejemplo Completo: Mensaje Personalizado

Ahora vamos a integrar todos los componentes para crear una aplicación que muestre un saludo personalizado.

@Composable
fun Formulario(paddingValues: PaddingValues) {
    // Estado que guarda el nombre del usuario
    var name by rememberSaveable { mutableStateOf("") }
    val context = LocalContext.current

    Column(
        modifier = Modifier
            .padding(paddingValues)
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        // Título
        CreateText()
        
        Spacer(modifier = Modifier.height(20.dp))
        
        // Campo de texto
        CreateTextField(
            value = name,
            onValueChange = { name = it }
        )
        
        Spacer(modifier = Modifier.height(20.dp))
        
        // Botón que muestra el mensaje
        CreateButton {
            Toast.makeText(
                context,
                "¡Hola $name! 👋",
                Toast.LENGTH_SHORT
            ).show()
        }
    }
}

✅ Resumen