[Dúvida] Problemas em layout | Jetpack Compose: criando um app android

Solucionado (ver solução)

Solucionado
(ver solução)

1
resposta

por Eduardo Martins Lemos

| 30.3k xp | 1 posts

Estou fazendo a implementação do item horizontal, conforme atividade requisitou, porém estou tendo dificuldades em aplicar algumas propriedades.

Item de produto organizado horizontalmente

Sendo esse o objetivo, tenho isso até o momento:

@Preview(showBackground = true)
@Composable
fun HorizontalItemPreview() {
    Surface(
        shape = RoundedCornerShape(8.dp),
        elevation = 8.dp,
        modifier = Modifier.padding(8.dp)
    ) {
        Row(
            Modifier
                .widthIn(250.dp, 300.dp)
                .height(100.dp)
        ) {
            Box(
                Modifier
                    .height(100.dp)
                    .width(50.dp)
                    .background(
                        Brush.verticalGradient(
                            listOf(
                                Purple700,
                                Purple200
                            )
                        )
                    )
            ) {
                Image(
                    painter = painterResource(id = R.drawable.ic_launcher_background),
                    contentDescription = null,
                    modifier = Modifier
                        .size(100.dp)
                        .clip(shape = CircleShape)
                        .offset(x = 25.dp)
                        .align(CenterEnd)
                )
            }
            Box {
                Text(text = "esse é o texto")
            }

        }
    }

}

E tenho esse resultado aqui. Insira aqui a descrição dessa imagem para ajudar na acessibilidade

O que estou fazendo de errado no momento de definir o shape circular do box?

1 resposta

solução!

por Matheus Brandino

| 4803.7k xp | 10196 posts

Alura Scuba Team Mobile Software Engineer

03/04/2023

Fala Eduardo, de boa ?

@Preview(showBackground = true)
@Composable
fun ChallengeComposable() {
    Surface(
        Modifier.padding(8.dp),
        shape = RoundedCornerShape(8.dp),
        elevation = 4.dp
    ) {
        Row(
            Modifier
                .height(height = 200.dp)
                .fillMaxWidth()
        ) {
            val imageSize = 100.dp
            Box(
                Modifier
                    .fillMaxHeight()
                    .width(imageSize)
                    .background(
                        brush = Brush.verticalGradient(
                            listOf(
                                Purple700, Purple200
                            )
                        )
                    )
            ) {
                Image(
                    painter = painterResource(id = R.drawable.ic_launcher_background),
                    contentDescription = null,
                    Modifier
                        .size(imageSize)
                        .align(Alignment.Center)
                        .offset(x = imageSize / 2)
                        .clip(CircleShape)
                        .border(
                            BorderStroke(
                                2.dp, brush = Brush.verticalGradient(
                                    listOf(
                                        Purple200, Purple700
                                    )
                                )
                            ), CircleShape
                        )
                )
            }
            Spacer(Modifier.width(imageSize / 2))
            Box(
                Modifier
                    .padding(16.dp)
                    .fillMaxHeight()
                    .padding(16.dp)
                    .align(CenterVertically),
            ) {
                Column {
                    Text(
                        text = LoremIpsum(50).values.first(),
                        overflow = TextOverflow.Ellipsis,
                        lineHeight = 20.sp
                    )
                }
            }
        }
    }
}

Esse codigo deixa similar ao do instrutor