danydevco

@Composable
fun TarjetaDePerfil() {
    Card(
        modifier = Modifier
            .fillMaxWidth() // La tarjeta ocupará todo el ancho disponible
            .padding(16.dp), // Con un margen exterior de 16 dp
        elevation = CardDefaults.cardElevation(defaultElevation = 8.dp),  // Le damos una sombra más pronunciada
        shape = MaterialTheme.shapes.medium // Usamos la forma de esquina mediana del tema
    ) {

danydevco

import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material.Card
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Composable

danydevco

@Composable
fun AvatarCircular() {
    Image(
        painter = painterResource(id = R.drawable.avatar),
        contentDescription = "Avatar de usuario",
        modifier = Modifier
            .size(120.dp) // Le damos un tamaño fijo de 120x120 dp
            .clip(CircleShape) // Cortamos la imagen en forma de círculo
            .border(4.dp, Color.Gray, CircleShape) // Le añadimos un borde gris
    )

danydevco

import androidx.compose.ui.res.painterResource // No olvides este import!

@Composable
fun ImagenDePerfil() {
    Column(
        modifier = Modifier.padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Image(
            painter = painterResource(id = R.drawable.avatar), // 1. Cargamos la imagen

danydevco

@Composable
fun PantallaDeTerminos() {
    // 1. Creamos la memoria para el Checkbox. Empieza desmarcado (false).
    var terminosAceptados by rememberSaveable { mutableStateOf(false) }

    Column(
        modifier = Modifier.padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        // --- El Checkbox ---

danydevco

@Composable
fun CampoDeNombre() {
    // 1. Creamos la "memoria" para el texto. Empieza vacía ("").
    // Usamos rememberSaveable para que el texto no se borre si el teléfono gira.
    var nombre by rememberSaveable { mutableStateOf("") }

    Column(modifier = Modifier.padding(16.dp)) {
        // 2. Creamos el TextField y lo conectamos a su memoria.
        TextField(
            value = nombre, // El TextField siempre muestra lo que hay en "nombre"

danydevco

@Composable
fun MiContador() {

    // --- PARTE 1: La "Memoria" (El Estado) ---
    var contador by remember { mutableStateOf(0) }

    // --- PARTE 2: La "Acción" (La Interfaz de Usuario) ---
    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,

danydevco

@Composable
fun MiPrimeraPantalla() {
    Scaffold(
        // 1. EL HUECO DE LA BARRA SUPERIOR
        topBar = {
            TopAppBar(
                backgroundColor = Color(0xFF6200EE), // Un color morado
                title = {
                    Text("Mi App Genial", color = Color.White)
                }

danydevco

Column {
    Text("Texto Superior")
    // Crea un espacio vertical de 16 dp
    Spacer(modifier = Modifier.height(16.dp))
    Text("Texto Inferior")
}

danydevco

Row(
    modifier = Modifier
        .fillMaxWidth()
        .height(100.dp)
        .background(Color.Yellow),
    horizontalArrangement = Arrangement.SpaceAround, // Espacio alrededor de los ítems
    verticalAlignment = Alignment.CenterVertically // Centra los ítems verticalmente
) {
    Icon(
        imageVector = Icons.Default.AccountCircle,