Olá!Estou com um pequeno problema ao tentar resolver o desafio. a imagem parece estar quase similar ao solicitado, porém estou com o problema já citado em aula onde o espaçamento do texto reconhece o local "original da image", mantendo um espaçamento muito grande do texto para o corpo do card.
poderiam tentar me dar uma luz para entender como solucionar esse tipo de problema?
Meu codigo atual está assim:
package com.app.portosmile
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.widthIn
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Alignment.Companion.BottomCenter
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.datasource.LoremIpsum
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.app.portosmile.ui.theme.Purple500
import com.app.portosmile.ui.theme.Teal200
class Desafios {
@Preview(showBackground = true)
@Composable
private fun desafioAlura() {
Surface(shape = RoundedCornerShape(15.dp),
shadowElevation = 4.dp) {
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.widthIn(150.dp, 350.dp)
.height(200.dp)
)
{
val imageSize = 100.dp
Box(
modifier = Modifier.width(imageSize)
.background(
brush = Brush.horizontalGradient(
colors = listOf(
Purple500,
Teal200
)
)
)
.fillMaxHeight()
)
Image(
painter = painterResource(R.drawable.ic_launcher_background),
contentDescription = null,
Modifier.size(imageSize)
.offset(x = -(imageSize / 2))
.clip(shape = CircleShape)
.border(
2.dp,
Brush.horizontalGradient(colors = listOf(Purple500, Teal200)),
CircleShape
)
.align(Alignment.CenterVertically)
)
Text(
text = LoremIpsum(50).values.first(),
fontSize = 18.sp,
fontWeight = FontWeight(700),
maxLines = 2,
overflow = TextOverflow.Ellipsis,
modifier = Modifier
)
}
}
}
}