Ejemplo en Compose: uso de un botón

Ejemplo: Creación de una app con un texto y un botón

El texto muestra el valor de un contador y el botón lo incrementa en cada pulsación

Crear un nuevo proyecto llamado ContadorCompose

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ContadorComposeTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    // Aplicamos el padding interno proporcionado por Scaffold
                    CounterScreen(modifier = Modifier.padding(innerPadding))
                }
            }
        }
    }
}

Otra forma

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ContadorComposeTheme {
                // Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    // Aplicamos el padding interno proporcionado por Scaffold
                //    CounterScreen(modifier = Modifier.padding(innerPadding))
                Surface(modifier = Modifier.fillMaxSize()) {
                    CounterScreen( modifier = Modifier.fillMaxSize())
                }
            }
        }
    }
}

UI con estado

@Composable
fun CounterScreen(modifier: Modifier) {
    // 'remember' guarda el estado a través de las recomposiciones
    // 'mutableStateOf' hace que el estado sea observable por Compose
    // El estado se conserva entre recomposiciones
    var count by remember { mutableStateOf(0) }

    Column(
        // 'modifier' permite configurar el tamaño, padding, etc.
        modifier = Modifier.fillMaxSize(),
        // Alinea los elementos en el centro del espacio disponible
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // Muestra el valor actual del contador
        Text(text = "Contador: $count", modifier = Modifier.padding(20.dp))

        // Botón que al ser pulsado incrementa el contador
        Button(onClick = { count ++ }) {
            Text("Incrementar")
        }
    }
}

Explicación del código

• setContent: En lugar de usar un archivo XML para el diseño, setContent te permite definir tu interfaz de usuario con funciones Composable.

• @Composable: Esta anotación le dice al compilador de Compose que esta función se utiliza para generar la interfaz de usuario.

• remember y mutableStateOf: Son el núcleo del manejo de estado en Compose. mutableStateOf crea una variable de estado observable, y remember se asegura de que este estado se preserve a través de las «recomposiciones» (cuando la UI se redibuja).

• Recomposición: Cuando el valor de count cambia, Compose automáticamente vuelve a ejecutar las funciones @Composable que dependen de ese estado, actualizando solo las partes necesarias de la interfaz (en este caso, el Text).

• Column, Text, Button: Son funciones Composable predefinidas que corresponden a los widgets de UI tradicionales. Column organiza a sus hijos verticalmente.

• @Preview: Esta anotación te permite ver una vista previa de tus Composables directamente en Android Studio sin necesidad de ejecutar la aplicación en un emulador o dispositivo.

• Se usa Material 3 (material3) para Button, Text, MaterialTheme y Surface

Vista previa

@Preview(showBackground = true)
@Composable
fun CounterPreview() {
    ContadorComposeTheme {
        CounterScreen(
            modifier = Modifier.fillMaxSize()
        )
    }
}

@Preview(showBackground = true)
@Composable
fun CounterPreview() {
    ContadorComposeTheme {
        CounterScreen()
    }
}