A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Dando los toques finales al componente Card

13/26
Recursos

Aportes 3

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Me parece que el profesor complico demasiado el c贸digo de la clase CountryISO ademas de que le agrega una variable llamada iso que no tiene ninguna utilidad.

El c贸digo se puede simplificar a esto:

enum class CountryISO(
    val image: Int,
    val flag: Int,
    val surfaceColor: Color,
) {
    COL(R.drawable.co, R.drawable.flagco, PlatziBlue),
    BRA(R.drawable.br, R.drawable.flagbr, PlatziGreen),
    CRI(R.drawable.ri, R.drawable.flagri, PlatziGreen),
    NIC(R.drawable.ni, R.drawable.flagni, PlatziBlue)
} 

Si quieres que el tama帽o de tu componente sea cuadrado, es decir, que ambos lados sean iguales, basta con pasarle un valor a la funci贸n size.

Ejemplo:

modifier = Modifier.size(32.dp)

Aqu铆 les dejo la definici贸n de la funci贸n size:

@Stable
fun Modifier.size(size: Dp) = this.then(
    SizeModifier(
        minWidth = size,
        maxWidth = size,
        minHeight = size,
        maxHeight = size,
        enforceIncoming = true,
        inspectorInfo = debugInspectorInfo {
            name = "size"
            value = size
        }
    )
)

Si lo que buscas es que tu componente sea rectangular, es decir, que tenga lados con dimensiones diferentes, puedes utilizar la misma funci贸n con dos valores diferentes.

Ejemplo:

modifier = Modifier.size(32.dp, 28.dp)

Aqu铆 les dejo la definici贸n de la funci贸n size con dos argumentos:

@Stable
fun Modifier.size(width: Dp, height: Dp) = this.then(
   SizeModifier(
       minWidth = width,
       maxWidth = width,
       minHeight = height,
       maxHeight = height,
       enforceIncoming = true,
       inspectorInfo = debugInspectorInfo {
           name = "size"
           properties["width"] = width
           properties["height"] = height
       }
   )
)

Ahi va

package com.example.coffecodersmexico.ui.components

import android.graphics.Color
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.coffecodersmexico.R
import com.example.coffecodersmexico.ui.theme.CoffeCodersMexicoTheme
import com.example.coffecodersmexico.ui.theme.PlatziBlue
import com.example.coffecodersmexico.ui.theme.PlatziGreen
import java.util.*

enum class CountryIso(val iso: String){
    Col("Col"),
    Bra("Bra"),
    Cri("Cri"),
    Nic("Nic");

    fun getBackgroundImage(): Int {
        when(this){
            Col -> return R.drawable.co
            Bra -> return R.drawable.br
            Cri -> return R.drawable.ri
            Nic -> return R.drawable.ni
        }
    }

    fun getCountryFlag(): Int {
        when(this){
            Col -> return R.drawable.flagco
            Bra -> return R.drawable.flagbr
            Cri -> return R.drawable.flagri
            Nic -> return R.drawable.flagni
        }
    }

    fun getSurfaceColor(): androidx.compose.ui.graphics.Color {
        when(this){
            Col, Nic -> return PlatziBlue
            Bra, Cri -> return PlatziGreen

        }
    }

}


/*
* 1. Se creo un paquete dentro del paquete ui
* 2. Se nombro el paquete como components
* 3. Se creo el archivo en kotlin de ProductCard.kt*/

@Composable
fun ProductCard(name: String, summary: String, price: String, currency: String,
                country: CountryIso){
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.dp)
            .clickable { }
            .size(480.dp),
        elevation = 10.dp,//varias propiedades a la vez
        shape = MaterialTheme.shapes.small
            

    ){
        Image(painter = painterResource(country.getBackgroundImage()), contentDescription = null)
        /*La utilizacion del componente Surface*/
        Surface(
            modifier = Modifier.fillMaxWidth(),
            color = country.getSurfaceColor().copy(alpha = 0.02f)
        ) {

            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                modifier = Modifier.padding(16.dp)
            ) {
                Text(name, style = MaterialTheme.typography.h4
                )

                Text(summary, style = MaterialTheme.typography.body1)
                Column(
                    modifier = Modifier.fillMaxSize(),
                    verticalArrangement = Arrangement.Bottom
                ) {
                    //Componente Row
                    
                    Row() {
                        Image(painter = painterResource(id = country.getCountryFlag()),
                        contentDescription = null,
                        modifier = Modifier.size(32.dp, 32.dp))
                        Text("$ $price $currency ", modifier = Modifier.fillMaxWidth(),
                        textAlign = TextAlign.End,
                        style = MaterialTheme.typography.h4)

                    }


                }
            }

        }


    }
}

@Preview(
    showBackground = true
)
@Composable
fun ProductCardPreview(){
    CoffeCodersMexicoTheme {
        ProductCard("Cafe de Colombia",
        "Cafe de las Monta帽as",
        "35.0", "USD",
        CountryIso.Bra)
    }

}