es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

TopAppBar no tiene sombra.

29 Jul, 2023 Programación

Tengo una TopAppBar dentro de mi Scaffold en mi composable, pero no está arrojando una sombra como se supone que debe hacerlo:

@Composable
fun MainScreen(navController: NavController) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(text = stringResource(id = R.string.appName)) },
            )
        }
    ) {
        Text("Contenido composable")
    }
}

Incluso si establezco manualmente una elevación, no arroja ninguna sombra:

    TopAppBar(
        title = { Text(text = stringResource(id = R.string.appName)) },
        elevation = 4.dp
    )

¿Qué se debe hacer para que el AppBar arroje una sombra?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que TopAppBar muestre una sombra, debe agregar un modificador Box y configurar su propiedad de elevación. Aquí tienes una versión actualizada del código:

    @Composable
fun MainScreen(navController: NavController) {
    Scaffold(
        topBar = {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(56.dp)
                    .background(MaterialTheme.colors.primary)
                    .elevation(4.dp)
            ) {
                Text(
                    modifier = Modifier.align(Alignment.Center),
                    text = stringResource(id = R.string.appName),
                    color = MaterialTheme.colors.onPrimary,
                    style = MaterialTheme.typography.h6
                )
            }
        }
    ) {
        Text("Contenido componible")
    }
}

    En esta versión, envolvemos TopAppBar con un Box que define su color de fondo, altura y elevación. También utilizamos el modificador fillMaxWidth para hacer que el Box ocupe todo el ancho disponible de la pantalla.

    Ten en cuenta que estamos utilizando el color primario definido en MaterialTheme para el fondo de TopAppBar y el color onPrimary para el texto. Esto es para asegurarnos de que la aplicación siga las pautas de Material Design.

    ¡Espero que esto ayude!

Comments are closed.