1Text(
2    text = "Hola mundo",
3    modifier = Modifier
4        .padding(16.dp)
5        .background(Color.LightGray)
6        .clickable { /* acción */ }
7)

1// El padding se aplica antes que el fondo.
2Modifier
3    .padding(16.dp)
4    .background(Color.Red)

1// El fondo se aplica antes del padding.
2Modifier
3    .background(Color.Red)
4    .padding(16.dp)

1fun Modifier.tarjetaRedonda(): Modifier = this
2    .padding(8.dp)
3    .clip(RoundedCornerShape(16.dp))
4    .background(Color.White)

1Box(modifier = Modifier.tarjetaRedonda())

 1@Composable
 2fun ModificadoresDemo() {
 3    var isHovered by remember { mutableStateOf(false) }
 4
 5    Column(
 6        modifier = Modifier
 7            .fillMaxSize()
 8            .padding(16.dp),
 9        verticalArrangement = Arrangement.spacedBy(20.dp)
10    ) {
11        Text("1. Orden: Padding antes de Background")
12        Box(
13            modifier = Modifier
14                .padding(16.dp)
15                .background(Color.Red)
16        ) {
17            Text(
18                "Texto con padding interno",
19                modifier = Modifier.padding(8.dp)
20            )
21        }
22
23        Text("2. Orden: Background antes de Padding")
24        Box(
25            modifier = Modifier
26                .background(Color.Green)
27                .padding(16.dp)
28        ) {
29            Text(
30                "Texto con fondo más grande",
31                modifier = Modifier.padding(8.dp)
32            )
33        }
34
35        Text("3. Modificador personalizado: tarjetaRedonda")
36        Box(
37            modifier = Modifier.tarjetaRedonda()
38        ) {
39            Text(
40                "Texto dentro de tarjeta",
41                modifier = Modifier.padding(16.dp)
42            )
43        }
44
45        val context = LocalContext.current
46        Text("4. Con `clickable` (logcat)")
47        Box(
48            modifier = Modifier
49                .tarjetaRedonda()
50                .clickable {
51                    Log.d("Compose", "Tarjeta clicada")
52                    Toast.makeText(context, "Tarjeta clicada", Toast.LENGTH_SHORT).show()
53                }
54        ) {
55            Text(
56                "Haz clic en esta tarjeta",
57                modifier = Modifier.padding(16.dp)
58            )
59        }
60    }
61}
62
63// Modificador personalizado
64fun Modifier.tarjetaRedonda(): Modifier = this
65    .padding(8.dp)
66    .clip(RoundedCornerShape(16.dp))
67    .background(Color.White)
68    .border(2.dp, Color.Gray, RoundedCornerShape(16.dp))

1@Preview(showBackground = true)
2@Composable
3fun VistaPreviaModificadores() {
4    ModificadoresDemo()
5}

 1Column(
 2    modifier = Modifier.fillMaxSize(),
 3    verticalArrangement = Arrangement.Center,
 4    horizontalAlignment = Alignment.CenterHorizontally
 5) {
 6    Text("Elemento 1")
 7    Text("Elemento 2")
 8    Button(onClick = { /* Acción */ }) {
 9        Text("Botón")
10    }
11}

1Modifier.layout { measurable, constraints ->
2    val placeable = measurable.measure(constraints)
3    layout(placeable.width, placeable.height) {
4        placeable.place(x = 0, y = 0)
5    }
6}

1val placeable = measurable.measure(constraints)

1placeable.place(x, y)

1Modifier.drawBehind { ... }

 1@Composable
 2fun IntrinsicSizeExample() {
 3    Row(
 4        modifier = Modifier
 5            .fillMaxWidth()
 6            .padding(16.dp),
 7        horizontalArrangement = Arrangement.SpaceEvenly
 8    ) {
 9        // 1. width(IntrinsicSize.Min)
10        Column(
11            modifier = Modifier
12                .width(IntrinsicSize.Min)
13                .background(Color(0xFFE1BEE7))
14                .padding(8.dp)
15        ) {
16            Text("Corto")
17            Text("Texto más largo")
18        }
19
20        // 2. width(IntrinsicSize.Max)
21        Column(
22            modifier = Modifier
23                .width(IntrinsicSize.Max)
24                .background(Color(0xFFBBDEFB))
25                .padding(8.dp)
26        ) {
27            Text("Corto")
28            Text("Texto más largo")
29        }
30
31        // 3. height(IntrinsicSize.Min)
32        Row(
33            modifier = Modifier
34                .height(IntrinsicSize.Min)
35                .background(Color(0xFFC8E6C9))
36                .padding(8.dp)
37        ) {
38            Text("Línea 1\nLínea 2")
39            HorizontalDivider(
40                color = Color.Black,
41                modifier = Modifier
42                    .fillMaxHeight()
43                    .width(2.dp)
44            )
45            Text("Texto más corto")
46        }
47
48        // 4. height(IntrinsicSize.Max)
49        Row(
50            modifier = Modifier
51                .height(IntrinsicSize.Max)
52                .background(Color(0xFFFFF9C4))
53                .padding(8.dp)
54        ) {
55            Text("Texto corto")
56            HorizontalDivider(
57                modifier = Modifier
58                    .fillMaxHeight()
59                    .width(2.dp),
60                thickness = DividerDefaults.Thickness, color = Color.Black
61            )
62            Text("Línea 1\nLínea 2\nLínea 3")
63        }
64    }
65}

 1@SuppressLint("UnusedBoxWithConstraintsScope")
 2@Composable
 3fun CajaResponsiva() {
 4    BoxWithConstraints(
 5        modifier = Modifier.fillMaxWidth(),
 6        contentAlignment = Alignment.Center
 7    ) {
 8        if (maxWidth < 300.dp)
 9            Text("Pantalla pequeña")
10        else Text("Pantalla grande")
11    }
12}

 1import androidx.compose.foundation.Canvas
 2...
 3
 4@Composable
 5fun EjemploCanvas() {
 6    Canvas(modifier = Modifier.size(200.dp)) {
 7        drawRect(
 8            color = Color.Blue,
 9            topLeft = Offset(20f, 20f),
10            size = Size(100f, 100f)
11        )
12    }
13}

 1@Composable
 2fun EjemploCanvasSencillo() {
 3    Canvas(modifier = Modifier.size(200.dp)) {
 4        // Fondo gris claro
 5        drawRect(Color.LightGray, size = size)
 6
 7        // Círculo rojo en el centro
 8        drawCircle(
 9            color = Color.Red,
10            radius = 50f,
11            center = center
12        )
13
14        // Línea diagonal azul
15        drawLine(
16            color = Color.Blue,
17            start = Offset(0f, 0f),
18            end = Offset(size.width, size.height),
19            strokeWidth = 4f
20        )
21    }
22}

1@Preview(showBackground = true)
2@Composable
3fun VistaPreviaCanvas() {
4    EjemploCanvasSencillo()
5}

 1@Composable
 2fun EjemploGraphicsLayer() {
 3    Box(
 4        modifier = Modifier
 5            .size(200.dp)
 6            .graphicsLayer(
 7                rotationZ = 45f,       // Rotación 45 grados
 8                scaleX = 1.5f,         // Escala 1.5x en X
 9                scaleY = 1.5f,         // Escala 1.5x en Y
10                alpha = 0.8f,          // Opacidad 80%
11                shadowElevation = 16f  // Sombra
12            )
13            .background(Color.Red),
14        contentAlignment = Alignment.Center
15    ) {
16        Text("Transformado", color = Color.White, fontSize = 16.sp)
17    }
18}
19
20@Preview(showBackground = true)
21@Composable
22fun VistaPreviaGraphicsLayer() {
23    EjemploGraphicsLayer()
24}

 1@Composable
 2fun EjemploAnimacionGraphicsLayer() {
 3    var rotar by remember { mutableStateOf(false) }
 4    val rotacionAnimada by animateFloatAsState(targetValue = if (rotar) 360f else 0f)
 5
 6    Box(
 7        modifier = Modifier
 8            .size(200.dp)
 9            .graphicsLayer(
10                rotationZ = rotacionAnimada,
11                scaleX = 1.2f,
12                scaleY = 1.2f
13            )
14            .background(Color.Blue)
15            .clickable { rotar = !rotar },
16        contentAlignment = Alignment.Center
17    ) {
18        Text("Haz clic", color = Color.White)
19    }
20}

1Scaffold(
2    topBar = { TopAppBar(...) },
3    bottomBar = { BottomAppBar(...) },
4    floatingActionButton = { FloatingActionButton { ... } },
5    content = { paddingValues ->
6        // Contenido principal con padding
7    }
8)

 1@OptIn(ExperimentalMaterial3Api::class)
 2@Composable
 3fun EjemploScaffoldBasico() {
 4    Scaffold(
 5        topBar = {
 6            TopAppBar(
 7                title = { Text("Mi App") },
 8                colors = topAppBarColors(
 9                    containerColor = MaterialTheme.colorScheme.primaryContainer,
10                    titleContentColor = MaterialTheme.colorScheme.primary,
11                )
12            )
13        },
14        content = { padding ->
15            Box(
16                modifier = Modifier
17                    .fillMaxSize()
18                    .padding(padding),
19                contentAlignment = Alignment.Center
20            ) {
21                Text("Contenido principal")
22            }
23        }
24    )
25}

 1@OptIn(ExperimentalMaterial3Api::class)
 2@Composable
 3fun EjemploScaffoldBasico() {
 4    Scaffold(
 5        topBar = {
 6            TopAppBar(
 7                title = { Text("Mi App") },
 8                colors = topAppBarColors(
 9                    containerColor = MaterialTheme.colorScheme.primaryContainer,
10                    titleContentColor = MaterialTheme.colorScheme.primary,
11                )
12            )
13        },
14        bottomBar = {
15            BottomAppBar {
16                Text("Barra inferior", modifier = Modifier.padding(16.dp))
17            }
18        },
19        floatingActionButton = {
20            FloatingActionButton(onClick = { /* Acción */ }) {
21                Icon(Icons.Default.Add, contentDescription = "Añadir")
22            }
23        },
24        floatingActionButtonPosition = FabPosition.End,
25    ) { innerPadding ->
26        Column(
27            modifier = Modifier.padding(innerPadding),
28            verticalArrangement = Arrangement.spacedBy(16.dp),
29        ) {
30            Text(
31                modifier = Modifier.padding(8.dp),
32                text = """
33                    This is an example of a scaffold. It uses the Scaffold composable's parameters to create a screen with a simple top app bar, bottom app bar, and floating action button.
34
35                    It also contains some basic inner content, such as this text.
36
37                    You have pressed the floating action button 3 times.
38                """.trimIndent(),
39            )
40        }
41    }
42}

1@Composable
2fun EjemploText() {
3    Text(
4        text = "Hola, Compose!",
5        style = MaterialTheme.typography.titleLarge,
6        color = Color(0xFF1E88E5),
7        modifier = Modifier.fillMaxWidth().padding(8.dp)
8    )
9}

 1@Composable
 2fun EjemploTextField() {
 3    var nombre by remember { mutableStateOf("") }
 4
 5    Column(modifier = Modifier.wrapContentHeight().padding(16.dp)) {
 6        TextField(
 7            modifier = Modifier.fillMaxWidth(),
 8            value = nombre,
 9            onValueChange = { nombre = it },
10            label = { Text("Nombre") },
11            placeholder = { Text("Escribe tu nombre") } // Equivalente a hint en XML
12        )
13        Spacer(Modifier.height(16.dp))
14        Text("Hola, $nombre")
15    }
16}

1import androidx.compose.ui.text.input.KeyboardType
2...TextField(
3    ...
4    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email)
5)

1import androidx.compose.ui.text.input.PasswordVisualTransformation
2...TextField(
3    ...
4    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
5    visualTransformation = PasswordVisualTransformation()
6)

 1import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 2...@Composable
 3fun EjemploTextFieldConTeclado() {
 4    val keyboardController = LocalSoftwareKeyboardController.current
 5    var texto by remember { mutableStateOf("") }
 6
 7    Column(modifier = Modifier.padding(16.dp)) {
 8        TextField(
 9            value = texto,
10            onValueChange = { texto = it },
11            label = { Text("Escribe algo") },
12            modifier = Modifier.fillMaxWidth()
13        )
14        Spacer(Modifier.height(8.dp))
15        Button(onClick = {
16            keyboardController?.hide() // Oculta el teclado
17        }) {
18            Text("Ocultar teclado")
19        }
20    }
21}

 1@Composable
 2fun EjemploCheckbox() {
 3    var marcado by remember { mutableStateOf(false) }
 4
 5    Row(
 6        verticalAlignment = Alignment.CenterVertically,
 7        modifier = Modifier.fillMaxWidth().padding(16.dp)
 8    ) {
 9        Checkbox(
10            checked = marcado,
11            onCheckedChange = { marcado = it }
12        )
13        Spacer(Modifier.width(8.dp))
14        Text(text = if (marcado) "Marcado" else "No marcado")
15    }
16}

 1@Composable
 2fun EjemploRadioButton() {
 3    val opciones = listOf("Opción A", "Opción B", "Opción C")
 4    var seleccion by remember { mutableStateOf(opciones[0]) }
 5
 6    Column(Modifier
 7        .selectableGroup()
 8        .padding(16.dp)) {
 9        opciones.forEach { texto ->
10            Row(
11                verticalAlignment = Alignment.CenterVertically,
12                modifier = Modifier
13                    .fillMaxWidth()
14                    .selectable(
15                        selected = (texto == seleccion),
16                        onClick = { seleccion = texto },
17                        role = Role.RadioButton
18                    )
19                    .padding(8.dp)
20            ) {
21                RadioButton(
22                    selected = (texto == seleccion),
23                    onClick = null
24                )
25                Spacer(Modifier.width(8.dp))
26                Text(text = texto)
27            }
28        }
29        Text("Seleccionado: $seleccion", modifier = Modifier.padding(top = 8.dp))
30    }
31}

 1@Composable
 2fun EjemploSwitch() {
 3    var activado by remember { mutableStateOf(false) }
 4
 5    Row(
 6        verticalAlignment = Alignment.CenterVertically,
 7        modifier = Modifier.fillMaxWidth().padding(16.dp)
 8    ) {
 9        Switch(
10            checked = activado,
11            onCheckedChange = { activado = it }
12        )
13        Spacer(Modifier.width(8.dp))
14        Text(text = if (activado) "Activado" else "Desactivado")
15    }
16}

 1@Composable
 2fun EjemploImage() {
 3    Image(
 4        painter = painterResource(id = R.drawable.ic_launcher_foreground),
 5        contentDescription = "Ejemplo de imagen",
 6        modifier = Modifier
 7            .size(150.dp)
 8            .clip(RoundedCornerShape(8.dp))
 9            .border(2.dp, Color.Gray, RoundedCornerShape(8.dp)),
10        contentScale = ContentScale.Crop
11    )
12}

1<uses-permission android:name="android.permission.INTERNET" />
2<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

1// Glide for image loading
2implementation("com.github.bumptech.glide:compose:1.0.0-alpha.1")

 1@OptIn(ExperimentalGlideComposeApi::class)
 2@Composable
 3fun ImagenConGlide(imageUrl: String) {
 4    GlideImage(
 5        model = imageUrl,
 6        contentDescription = "Imagen con Glide",
 7        modifier = Modifier
 8            .padding(16.dp)
 9            .size(200.dp)
10            .clip(RoundedCornerShape(12.dp)),
11        contentScale = ContentScale.Crop
12    )
13}

1ImagenConGlide(imageUrl = "https://via.placeholder.com/300")

1// Coil for image loading
2implementation("io.coil-kt.coil3:coil-compose:3.2.0")
3implementation("io.coil-kt.coil3:coil-network-okhttp:3.2.0")

 1@Composable
 2fun ImagenConAsyncImage(imageUrl: String) {
 3    AsyncImage(
 4        model = ImageRequest.Builder(LocalContext.current)
 5            .data(imageUrl)
 6            .crossfade(true)
 7            .build(),
 8        contentDescription = "Imagen con Coil",
 9        placeholder = painterResource(R.drawable.loading),
10        error = painterResource(R.drawable.error),
11        contentScale = ContentScale.Crop,
12        modifier = Modifier
13            .padding(16.dp)
14            .size(200.dp)
15            .clip(RoundedCornerShape(12.dp))
16            .border(2.dp, Color.Gray, RoundedCornerShape(12.dp))
17    )
18}

1ImagenConAsyncImage(imageUrl = "https://via.placeholder.com/300")

1Column(
2    modifier = Modifier
3        .fillMaxSize()
4        .verticalScroll(rememberScrollState())
5        .padding(innerPadding)
6) {
7    ...
8}

1Row(
2    modifier = Modifier
3        .fillMaxWidth()
4        .horizontalScroll(rememberScrollState())
5        .padding(16.dp)
6) {
7    ...
8}

1class MainActivity : ComponentActivity() {
2    companion object {
3        val itemsList = List(100) { "Item #$it" }
4    }
5    ...
6}

 1@Composable
 2fun ExampleLazyColum(itemsList: List<String>) {
 3    LazyColumn(
 4        modifier = Modifier.fillMaxSize(),
 5        verticalArrangement = Arrangement.spacedBy(8.dp) // Espacio entre los elementos.
 6    ) {
 7        items(itemsList) { item ->
 8            Text(text = item)
 9        }
10    }
11}

1val dias = listOf("Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo")

1fun ExampleLazyColum2(dias: List<String>) {
2    LazyColumn(verticalArrangement = Arrangement.spacedBy(8.dp)) {
3        itemsIndexed(dias) { index, dia ->
4            Text("[$index] Día: $dia")
5        }
6    }
7}

 1val frutas = listOf(
 2    "Manzana",
 3    "Pera",
 4    "Naranja",
 5    "Plátano",
 6    "Fresa",
 7    "Kiwi",
 8    "Mango",
 9    "Piña",
10    "Uva",
11    "Sandía"
12)

 1@Composable
 2fun ListaConSeleccion(frutas: List<String>) {
 3    var seleccionada by remember { mutableStateOf<String?>(null) }
 4
 5    LazyColumn {
 6        items(frutas) { fruta ->
 7            Text(
 8                text = fruta,
 9                modifier = Modifier
10                    .fillMaxWidth()
11                    .clickable { // Acción al hacer clic.
12                        seleccionada = fruta
13                        Log.d("Seleccionada", "Fruta seleccionada: $seleccionada")
14                    }
15                    .background(if (seleccionada == fruta) Color.LightGray else Color.Transparent)
16                    .padding(16.dp)
17            )
18        }
19    }
20}

1items(listaUsuarios, key = { it.id }) { usuario -> ... }

 1val usuarios = listOf(
 2    "Ana",
 3    "Luis",
 4    "Carlos",
 5    "Lucía",
 6    "María",
 7    "Javier",
 8    "Patricia",
 9    "Sofía",
10    "Pedro",
11    "Laura",
12    "David",
13    "Isabel"
14)

 1@Composable
 2fun ListaUsuarios(usuarios: List<String>) {
 3    val context = LocalContext.current
 4
 5    LazyColumn(
 6        contentPadding = PaddingValues(12.dp),
 7        verticalArrangement = Arrangement.spacedBy(8.dp)
 8    ) {
 9        items(usuarios, key = { it }) { nombre ->
10            Card(
11                modifier = Modifier
12                    .fillMaxWidth()
13                    .clickable {
14                        Toast.makeText(
15                            context,
16                            "Usuario seleccionado: $nombre",
17                            Toast.LENGTH_SHORT
18                        ).show()
19                    }
20                    .padding(4.dp)
21            ) {
22                Row {
23                    Image(
24                        painter = painterResource(id = R.drawable.ic_launcher_foreground),
25                        contentDescription = "Imagen de usuario",
26                        modifier = Modifier
27                            .wrapContentSize()
28                            .size(50.dp)
29                    )
30                    Text(
31                        text = nombre,
32                        modifier = Modifier.fillMaxSize().padding(16.dp),
33                        style = MaterialTheme.typography.bodyLarge
34                    )
35                }
36            }
37        }
38    }
39}

1LazyRow {
2    items(listOf("🍎", "🍊", "🍌", "🍇", "🍏", "🍋", "🥑", "🍉", "🍓")) { fruta ->
3        Text(fruta, fontSize = 48.sp, modifier = Modifier.padding(8.dp))
4    }
5}

 1@Composable
 2fun SnackbarConAccionEjemplo() {
 3    val snackbarHostState = remember { SnackbarHostState() }
 4    val scope = rememberCoroutineScope()
 5
 6    Scaffold(
 7        snackbarHost = { SnackbarHost(snackbarHostState) },
 8        floatingActionButton = {
 9            FloatingActionButton(onClick = {
10                scope.launch {
11                    val resultado = snackbarHostState.showSnackbar(
12                        message = "Se ha borrado un elemento",
13                        actionLabel = "Deshacer",
14                        duration = SnackbarDuration.Short
15                    )
16                    // Manejo del resultado del Snackbar.
17                    if (resultado == SnackbarResult.ActionPerformed) {
18                        Log.d("SNACKBAR", "El usuario pulsó Deshacer")
19                    }
20                }
21            }) {
22                Icon(Icons.Default.Delete, contentDescription = "Eliminar")
23            }
24        }
25    ) { innerPadding ->
26        Box(
27            modifier = Modifier
28                .padding(innerPadding)
29                .fillMaxSize(),
30            contentAlignment = Alignment.Center
31        ) {
32            Text("Haz clic en el FAB para mostrar el Snackbar.")
33        }
34    }
35}

1if (resultado == SnackbarResult.Dismissed) {
2    Log.d("SNACKBAR", "El usuario descartó el Snackbar")
3}

 1@Composable
 2fun ToastEjemplo() {
 3    val context = LocalContext.current
 4
 5    Button(onClick = {
 6        Toast.makeText(context, "Mensaje desde Toast", Toast.LENGTH_SHORT).show()
 7    }) {
 8        Text("Mostrar Toast")
 9    }
10}

 1@OptIn(ExperimentalMaterial3Api::class)
 2@Composable
 3fun EjemploSnackbarYToast() {
 4    val context = LocalContext.current
 5    val snackbarHostState = remember { SnackbarHostState() }
 6    val scope = rememberCoroutineScope()
 7
 8    Scaffold(
 9        snackbarHost = { SnackbarHost(snackbarHostState) },
10        topBar = {
11            TopAppBar(title = { Text("Notificaciones") })
12        },
13        content = { padding ->
14            Column(
15                modifier = Modifier
16                    .fillMaxSize()
17                    .padding(padding)
18                    .padding(16.dp),
19                verticalArrangement = Arrangement.spacedBy(16.dp) // Espacio entre los elementos.
20            ) {
21                Button(
22                    modifier = Modifier.fillMaxWidth(),
23                    onClick = {
24                        scope.launch {
25                            snackbarHostState.showSnackbar("Esto es un Snackbar")
26                        }
27                    }) {
28                    Text("Mostrar Snackbar")
29                }
30
31                Button(
32                    modifier = Modifier.fillMaxWidth(),
33                    onClick = {
34                        Toast.makeText(context, "Esto es un Toast", Toast.LENGTH_SHORT).show()
35                    }) {
36                    Text("Mostrar Toast")
37                }
38            }
39        }
40    )
41}

 1@Composable
 2fun MenuBasico() {
 3    var expanded by remember { mutableStateOf(false) }
 4    val context = LocalContext.current // Contexto para mostrar Toast.
 5
 6    Box(modifier = Modifier.wrapContentSize(Alignment.TopEnd)) {
 7        IconButton(onClick = { expanded = !expanded }) {
 8            Icon(Icons.Default.MoreVert, contentDescription = "Más opciones") // Icono 3 puntos.
 9        }
10        DropdownMenu(
11            expanded = expanded,
12            onDismissRequest = { expanded = false }
13        ) {
14            DropdownMenuItem(text = { Text("Opción 1") }, onClick = { /*...*/ })
15            DropdownMenuItem(text = { Text("Opción 2") }, onClick = {
16                Toast.makeText(context, "Opción 2 seleccionada", Toast.LENGTH_SHORT).show()
17                expanded = false // Cierra el menú al seleccionar una opción.
18            })
19        }
20    }
21}

 1@OptIn(ExperimentalMaterial3Api::class)
 2@Composable
 3fun TopAppBarConMenu() {
 4    var showMenu by remember { mutableStateOf(false) }
 5
 6    Scaffold(
 7        topBar = {
 8            TopAppBar(
 9                title = { Text("AppBar con Menú") },
10                actions = {
11                    IconButton(onClick = { /* acción principal */ }) {
12                        Icon(Icons.Default.Share, contentDescription = "Compartir")
13                    }
14                    IconButton(onClick = { showMenu = !showMenu }) {
15                        Icon(Icons.Default.MoreVert, contentDescription = "Más")
16                    }
17                    DropdownMenu(
18                        expanded = showMenu,
19                        onDismissRequest = { showMenu = false }
20                    ) {
21                        DropdownMenuItem(text = { Text("Guardar") }, onClick = { /* ... */ })
22                        DropdownMenuItem(text = { Text("Eliminar") }, onClick = { /* ... */ })
23                    }
24                }
25            )
26        }
27    ) { innerPadding ->
28        /* ... */
29    }
30}

 1@Composable
 2fun AppBarOverflowMenu(onSave: () -> Unit) { // Callback para guardar.
 3    var showMenu by remember { mutableStateOf(false) }
 4
 5    IconButton(onClick = { /* acción principal */ }) {
 6        Icon(Icons.Default.Share, contentDescription = "Compartir")
 7    }
 8    IconButton(onClick = { showMenu = !showMenu }) {
 9        Icon(Icons.Default.MoreVert, contentDescription = "Más opciones") // Icono 3 puntos.
10    }
11    DropdownMenu(
12        expanded = showMenu,
13        onDismissRequest = { showMenu = false }
14    ) {
15        DropdownMenuItem(text = { Text("Guardar") }, onClick = { /* ... */ })
16        DropdownMenuItem(text = { Text("Eliminar") }, onClick = {
17            showMenu = false // Cierra el menú al seleccionar una opción.
18            onSave() // Llama al callback para guardar.
19        })
20    }
21}

 1setContent {
 2    Example_t02_11Theme {
 3        Scaffold(
 4            topBar = {
 5                TopAppBar(
 6                    title = { Text("Menús") },
 7                    actions = {
 8                        AppBarOverflowMenu(onSave = showToast)
 9                    }
10                )
11            }
12        )
13        { innerPadding ->
14            /* ... */
15        }
16    }
17}

1class MainActivity : ComponentActivity() {
2    private val showToast: () -> Unit = {
3        Toast.makeText(this, "Guardado correctamente", Toast.LENGTH_SHORT).show()
4    }
5    ...
6}

 1@Composable
 2fun MenuLargo() {
 3    var expanded by remember { mutableStateOf(false) }
 4    val opciones = List(50) { "Opción ${it + 1}" }
 5    val context = LocalContext.current // Contexto para mostrar Toast.
 6
 7    Box(modifier = Modifier.wrapContentSize(Alignment.TopEnd)) {
 8        // Botón para mostrar el menú desplegable.
 9        IconButton(onClick = { expanded = !expanded }) {
10            Icon(Icons.Default.MoreVert, contentDescription = "Más opciones")
11        }
12        DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
13            opciones.forEach { opc ->
14                DropdownMenuItem(text = { Text(opc) }, onClick = {
15                    Toast.makeText(context, "$opc seleccionada", Toast.LENGTH_SHORT).show()
16                    expanded = false // Cierra el menú al seleccionar una opción.
17                })
18            }
19        }
20    }
21}

 1@Composable
 2fun MenuConDetalles() {
 3    var expanded by remember { mutableStateOf(false) }
 4
 5    Box(modifier = Modifier.wrapContentSize(Alignment.TopEnd)) {
 6        IconButton(onClick = { expanded = !expanded }) {
 7            Icon(Icons.Default.MoreVert, contentDescription = "Menú")
 8        }
 9        DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
10            DropdownMenuItem(text = { Text("Perfil") },
11                leadingIcon = { Icon(Icons.Default.Person, contentDescription = null) },
12                onClick = { /*...*/ })
13            HorizontalDivider(
14                modifier = Modifier.padding(horizontal = 8.dp), // Espacio horizontal (opcional).
15                thickness = 1.dp, // Espacio entre los elementos del menú (opcional).
16                color = Color.Red // Color del divisor (opcional).
17            )
18            DropdownMenuItem(text = { Text("Configuración") },
19                leadingIcon = { Icon(Icons.Default.Settings, contentDescription = null) },
20                onClick = { /*...*/ })
21        }
22    }
23}

 1@OptIn(ExperimentalMaterial3Api::class)
 2@Composable
 3fun MenuSpinner() {
 4    val opciones = listOf("Rojo", "Verde", "Azul", "Amarillo")
 5    var expanded by remember { mutableStateOf(false) }
 6    var seleccion by remember { mutableStateOf(opciones[0]) }
 7
 8    ExposedDropdownMenuBox(
 9        expanded = expanded,
10        onExpandedChange = { expanded = !expanded },
11        modifier = Modifier.fillMaxWidth()
12    ) {
13        TextField(
14            value = seleccion,
15            onValueChange = {},
16            readOnly = true,
17            label = { Text("Color favorito") },
18            trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded) },
19            modifier = Modifier
20                .fillMaxWidth()
21                .menuAnchor(MenuAnchorType.PrimaryEditable, true)
22        )
23        ExposedDropdownMenu(
24            expanded = expanded,
25            onDismissRequest = { expanded = false }
26        ) {
27            opciones.forEach { color ->
28                DropdownMenuItem(
29                    text = { Text(color) },
30                    onClick = {
31                        seleccion = color
32                        expanded = false
33                    }
34                )
35            }
36        }
37    }
38}

 1@OptIn(ExperimentalMaterial3Api::class)
 2@Composable
 3fun SpinnerAutocomplete() {
 4    val opciones = listOf("Alicante", "Barcelona", "Bilbao", "Madrid", "Valencia", "Zaragoza")
 5    var expanded by remember { mutableStateOf(false) }
 6    var text by remember { mutableStateOf("") }
 7    val filtradas = opciones.filter { it.contains(text, true) }
 8
 9    ExposedDropdownMenuBox(
10        expanded = expanded && filtradas.isNotEmpty(),
11        onExpandedChange = { expanded = !expanded }) {
12        OutlinedTextField(
13            value = text,
14            onValueChange = {
15                text = it
16                expanded = true
17            },
18            singleLine = true,
19            trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded) },
20            label = { Text("Ciudad") },
21            modifier = Modifier
22                .fillMaxWidth()
23                .menuAnchor(MenuAnchorType.PrimaryEditable, true) // Ancla el menú al campo de texto.
24        )
25        ExposedDropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
26            filtradas.forEach { ciudad ->
27                DropdownMenuItem(text = { Text(ciudad) }, onClick = {
28                    text = ciudad
29                    expanded = false
30                })
31            }
32        }
33    }
34}

1implementation("me.saket.cascade:cascade-compose:2.3.0")

 1@Composable
 2fun CascadeMenu() {
 3    var expanded by remember { mutableStateOf(false) }
 4    val context = LocalContext.current
 5
 6    Box(modifier = Modifier.wrapContentSize(Alignment.TopEnd)) {
 7        IconButton(onClick = { expanded = !expanded }) {
 8            Icon(Icons.Default.MoreVert, contentDescription = "Menú cascada")
 9        }
10
11        CascadeDropdownMenu(
12            expanded = expanded,
13            onDismissRequest = { expanded = false }
14        ) {
15            // Item principal con submenú
16            DropdownMenuItem(
17                text = { Text("Opciones Avanzadas ▸") },
18                children = {
19                    DropdownMenuItem(
20                        text = { Text("Sub‑opción 1") },
21                        onClick = {
22                            expanded = false
23                            Toast.makeText(context, "Sub‑opción 1", Toast.LENGTH_SHORT).show()
24                        }
25                    )
26                    DropdownMenuItem(
27                        text = { Text("Sub‑opción 2") },
28                        onClick = {
29                            expanded = false
30                            Toast.makeText(context, "Sub‑opción 2", Toast.LENGTH_SHORT).show()
31                        }
32                    )
33                }
34            )
35            // Otro item principal
36            DropdownMenuItem(
37                text = { Text("Acerca de") },
38                onClick = {
39                    expanded = false
40                    Toast.makeText(context, "Acerca de", Toast.LENGTH_SHORT).show()
41                }
42            )
43        }
44    }
45}

 1val openInfoDialog = remember { mutableStateOf(false) }
 2
 3/* ... */
 4
 5Button(onClick = { openInfoDialog.value = true }) {
 6    Text("Mostrar info")
 7}
 8
 9if (openInfoDialog.value) {
10    AlertDialog(
11        onDismissRequest = { openInfoDialog.value = false }, // Se cierra el diálogo al tocar fuera de él.
12        title = { Text("Información") },
13        text = { Text("Esta es una notificación informativa.") },
14        confirmButton = {
15            TextButton(onClick = { openInfoDialog.value = false }) {
16                Text(LocalContext.current.getString(android.R.string.ok))
17            }
18        }
19    )
20}

 1@Composable
 2fun AlertDialogExample(
 3    onDismissRequest: () -> Unit,
 4    onConfirmation: () -> Unit,
 5    dialogTitle: String,
 6    dialogText: String,
 7    icon: ImageVector = Icons.Default.Warning,
 8) {
 9    AlertDialog(
10        icon = { Icon(icon, contentDescription = "Example Icon") },
11        title = { Text(text = dialogTitle) },
12        text = { Text(text = dialogText) },
13        properties = DialogProperties(
14            dismissOnBackPress = false, // Se evita el cierre al presionar atrás.
15            dismissOnClickOutside = false // Se evita el cierre al tocar fuera del diálogo.
16        ),
17        onDismissRequest = { onDismissRequest() }, // Se llama a la función de cierre del diálogo si no está bloqueado el cierre.
18        confirmButton = {
19            TextButton(onClick = { onConfirmation() }) {
20                Text(LocalContext.current.getString(android.R.string.ok))
21            }
22        },
23        dismissButton = {
24            TextButton(onClick = { onDismissRequest() }) {
25                Text(LocalContext.current.getString(android.R.string.cancel))
26            }
27        }
28    )
29}

 1@ExperimentalMaterial3Api
 2@Composable
 3fun PantallaPrincipal() {
 4    val openAlertDialog = remember { mutableStateOf(false) }
 5
 6    Scaffold(
 7        topBar = {
 8            TopAppBar(
 9                title = { Text("Cuadros de diálogo") },
10                colors = topAppBarColors(
11                    containerColor = MaterialTheme.colorScheme.primaryContainer,
12                    titleContentColor = MaterialTheme.colorScheme.primary,
13                )
14            )
15        },
16        modifier = Modifier.fillMaxSize()
17    ) { innerPadding ->
18        Column(
19            modifier = Modifier
20                .fillMaxSize()
21                .padding(innerPadding),
22            horizontalAlignment = Alignment.CenterHorizontally,
23            verticalArrangement = Arrangement.Center
24        ) {
25            Button(onClick = { openAlertDialog.value = true }) {
26                Text("Mostrar diálogo")
27            }
28
29            if (openAlertDialog.value) {
30                AlertDialogExample(
31                    onDismissRequest = { openAlertDialog.value = false },
32                    onConfirmation = {
33                        openAlertDialog.value = false
34                        println("Confirmación recibida")
35                    },
36                    dialogTitle = "Título del Diálogo",
37                    dialogText = "Este es un ejemplo de cuadro de diálogo en Jetpack Compose.",
38                    icon = Icons.Default.Info
39                )
40            }
41        }
42    }
43}

 1@Composable
 2fun CustomDialog(onSave: (String) -> Unit) {
 3    val abierto: MutableState<Boolean> = remember { mutableStateOf(false) }
 4    var texto by remember { mutableStateOf("") }
 5
 6    Column(horizontalAlignment = Alignment.CenterHorizontally) {
 7        Button(onClick = { abierto.value = true }) {
 8            Text("Nuevo elemento")
 9        }
10
11        if (abierto.value) {
12            AlertDialog(
13                onDismissRequest = { abierto.value = false },
14                title = { Text("Crear elemento") },
15                text = {
16                    Column {
17                        OutlinedTextField(
18                            label = { Text("Introduce un nombre") },
19                            value = texto,
20                            onValueChange = { texto = it },
21                            singleLine = true
22                        )
23                    }
24                },
25                confirmButton = {
26                    TextButton(onClick = {
27                        if (texto.isNotBlank()) {
28                            onSave(texto)
29                            abierto.value = false
30                            texto = ""
31                        }
32                    }) {
33                        Text("Guardar")
34                    }
35                },
36                dismissButton = {
37                    TextButton(onClick = {
38                        abierto.value = false
39                        texto = ""
40                    }) {
41                        Text(LocalContext.current.getString(R.string.cancel))
42                    }
43                }
44            )
45        }
46    }
47}

1CustomDialog(
2    onSave = { newItem ->
3        println("Nuevo elemento guardado: $newItem")
4    }
5)

 1@Composable
 2fun CustomDialog(onSave: (String) -> Unit) {
 3    val abierto: MutableState<Boolean> = remember { mutableStateOf(false) }
 4    var texto by remember { mutableStateOf("") }
 5
 6    Column(horizontalAlignment = Alignment.CenterHorizontally) {
 7        Button(onClick = { abierto.value = true }) {
 8            Text("Nuevo elemento")
 9        }
10
11        if (abierto.value) {
12            Dialog(onDismissRequest = { abierto.value = false }) {
13                Column(
14                    modifier = Modifier.padding(16.dp),
15                    horizontalAlignment = Alignment.CenterHorizontally
16                ) {
17                    Card(
18                        modifier = Modifier.padding(16.dp),
19                        shape = RoundedCornerShape(16.dp),
20                    ) {
21                        Column(
22                            modifier = Modifier.wrapContentSize(),
23                            verticalArrangement = Arrangement.Center,
24                            horizontalAlignment = Alignment.CenterHorizontally,
25                        ) {
26                            Spacer(Modifier.height(16.dp))
27                            Text("Crear nuevo elemento")
28                            OutlinedTextField(
29                                label = { Text("Introduce un nombre") },
30                                value = texto,
31                                onValueChange = { texto = it },
32                                singleLine = true,
33                                modifier = Modifier.fillMaxWidth(0.9f) // Ajusta el ancho del campo de texto (%)
34                            )
35                            Row(
36                                modifier = Modifier.fillMaxWidth(),
37                                horizontalArrangement = Arrangement.Center,
38                            ) {
39                                TextButton(
40                                    onClick = { abierto.value = false },
41                                    modifier = Modifier.padding(8.dp),
42                                ) {
43                                    Text(LocalContext.current.getString(R.string.cancel))
44                                }
45                                TextButton(
46                                    onClick = {
47                                        if (texto.isNotBlank()) {
48                                            onSave(texto)
49                                            abierto.value = false
50                                            texto = ""
51                                        }
52                                    },
53                                    modifier = Modifier.padding(8.dp)
54                                ) {
55                                    Text("Guardar")
56                                }
57                            }
58                        }
59                    }
60                }
61            }
62        }
63    }
64}

 1@OptIn(ExperimentalMaterial3Api::class)
 2@Composable
 3fun DialogoSeleccionHora() {
 4    var mostrarDialogo by remember { mutableStateOf(false) }
 5    val timePickerState = rememberTimePickerState() // Hora actual del sistema.
 6    var horaSeleccionada by remember { mutableStateOf("") }
 7
 8    Column(horizontalAlignment = Alignment.CenterHorizontally) {
 9        Button(onClick = { mostrarDialogo = true }) {
10            Text("Seleccionar hora")
11        }
12
13        Spacer(Modifier.height(8.dp))
14        Text(text = "Hora seleccionada: $horaSeleccionada")
15
16        if (mostrarDialogo) {
17            AlertDialog(
18                onDismissRequest = { mostrarDialogo = false },
19                confirmButton = {
20                    TextButton(onClick = {
21                        val h = timePickerState.hour.toString().padStart(2, '0')
22                        val m = timePickerState.minute.toString().padStart(2, '0')
23                        horaSeleccionada = "$h:$m"
24                        mostrarDialogo = false
25                    }) { Text("Aceptar") }
26                },
27                dismissButton = {
28                    TextButton(onClick = { mostrarDialogo = false }) {
29                        Text("Cancelar")
30                    }
31                },
32                title = { Text("Selecciona la hora") },
33                text = { TimePicker(state = timePickerState) }
34            )
35        }
36    }
37}

 1@OptIn(ExperimentalMaterial3Api::class)
 2@Composable
 3fun DialogoSeleccionFecha() {
 4    var mostrarDialogo by remember { mutableStateOf(false) }
 5    val datePickerState = rememberDatePickerState() // Fecha actual del sistema.
 6    var fechaSeleccionada by remember { mutableStateOf("") }
 7
 8    Column(horizontalAlignment = Alignment.CenterHorizontally) {
 9        Button(onClick = { mostrarDialogo = true }) {
10            Text("Seleccionar fecha")
11        }
12
13        Spacer(Modifier.height(8.dp))
14        Text("Fecha seleccionada: $fechaSeleccionada")
15
16        if (mostrarDialogo) {
17            AlertDialog(
18                onDismissRequest = { mostrarDialogo = false },
19                confirmButton = {
20                    TextButton(onClick = {
21                        datePickerState.selectedDateMillis?.let { millis ->
22                            val formatter = DateTimeFormatter.ofPattern("dd/MM/yyyy")
23                            val fecha = Instant.ofEpochMilli(millis) // Convertir milisegundos a Instant.
24                                .atZone(ZoneId.systemDefault()) // Convertir a zona horaria local.
25                                .toLocalDate() // Obtener la fecha local.
26                            fechaSeleccionada = formatter.format(fecha)
27                        }
28                        mostrarDialogo = false
29                    }) { Text("Aceptar") }
30                },
31                dismissButton = {
32                    TextButton(onClick = { mostrarDialogo = false }) {
33                        Text("Cancelar")
34                    }
35                },
36                title = { Text("Selecciona la fecha") },
37                text = { DatePicker(state = datePickerState) }
38            )
39        }
40    }
41}