1

estoy intentando crear una app con JetPack Compose (es la primera vez que lo hago) y estoy teniendo algún problema con la navegación. La aplicación tiene un bottomBar con 3 items que navega hacia la pantalla seleccionada.

Hasta aquí bien, el problema es cuando intento acceder al uno de los items de una LazyColumn que se encuentra en una de las pantallas. Me gustaría navegar hacia otra pantalla (Profile) donde se muestren los datos del item seleccionado pero no encuentro manera de hacerlo. Da igual como intente hacerlo, siempre me sale esto "@Composable invocations can only happen from the context of a @Composable function".

¿Alguien podría ayudarme explicándome como hacerlo mediante algún ejemplo? Lo que quiero es aprender cómo y por qué, no copiar sin más.

Gracias

Dejo el código por aquí.

Solución

MainActivity

class MainActivity : ComponentActivity() {

    @ExperimentalFoundationApi
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)


        setContent {
            val systemUiController = rememberSystemUiController()

            SideEffect {
                systemUiController.setStatusBarColor(color = PrimaryDark)
            }
            AppTheme() {


                MainScreen()

            }

        }
    }

    @ExperimentalFoundationApi
    @Composable
    fun MainScreen() {
        val navController = rememberNavController()
        val navigationItems = listOf(Obras, Talleres, Ajustes)
        Scaffold(bottomBar = {
            BottomNavigationBar(
                navController = navController,
                items = navigationItems
            )
        }) {

            NavigationHost(navController)
        }
    }
} 

NavigationHost.kt

@ExperimentalFoundationApi
@Composable
fun NavigationHost(navController: NavHostController) {


    NavHost(navController = navController, startDestination = Obras.route) {
        composable(Obras.route) {
            Pantalla1(navigateToProfile = { authorId ->
                navController.navigate("${Profile.route}/$authorId")
            })

        }
        composable(Talleres.route) {
            Pantalla2()
        }

        composable(Ajustes.route) {
            Pantalla3()
        }

        composable(
            Profile.route + "/{authorId}",
            arguments = listOf(navArgument("authorId") { type = NavType.StringType })
        ) { backStackEntry ->
            val authorId = backStackEntry.arguments!!.getString("authorId")!!
            Profile(authorId)
        }

    }
}

Pantalla1.kt

typealias AuthorId = String

@ExperimentalCoroutinesApi
@Composable
fun Pantalla1(navigateToProfile: (AuthorId) -> Unit) {


    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(
                paddingValues = PaddingValues(

                    bottom = 50.dp
                )
            ),
    ) {

        AutoresInfo(navigateToProfile)
    }

}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun AutoresInfo(navigateToProfile: (AuthorId) -> Unit) {
    var autoresList by remember {
        mutableStateOf<List<Autor>?>(null)
    }

    JetFirestore(path = { collection("autores") },
        queryOnCollection = { orderBy("nombre", Query.Direction.ASCENDING) },

        onRealtimeCollectionFetch = { value, exception ->
            autoresList = value.getListOfObjects()
        }) {
        autoresList?.let {
            val grouped = it.groupBy { it.nombre[0] }
            LazyColumn(

                modifier = Modifier.fillMaxSize()

            ) {


                grouped.forEach { (initial, autoresForInitial) ->
                    stickyHeader {
                        StickyHeaderAutores(initial = initial.toString())
                    }

                    items(autoresForInitial, key = { autor -> autor.nombre }) { autor ->
                        Surface(modifier = Modifier.clickable { navigateToProfile(autor.nombre) }) {
                            @OptIn(coil.annotation.ExperimentalCoilApi::class)
                            AutorCard(autor)
                        }


                    }
                }


            }
        } ?: Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            CircularProgressIndicator(
                color = Color.Red,
                modifier = Modifier

                    .size(50.dp)

            )
        }

    }


}

4
  • La pregunta necesita un poco más de explicación. Entiendo que quieres navegar a Profile pero no queda claro desde dónde ni con qué argumentos. Tampoco se ve ningún intento de navegación. Incluso si no funciona, debes mostrar el código de lo que has intentado para que podamos indicarte cual fue el error. También deberías mostrar como defines Profile Commented el 14 sept. 2021 a las 19:27
  • @SinneroftheSystem Ya lo he conseguido, actualizo con la solución por si le sirve a alguien.
    – Komito
    Commented el 15 sept. 2021 a las 9:40
  • Gracias por compartir tu solución pero deberías colocarla como respuesta, no en la pregunta. La sección de respuestas es abajo. Commented el 15 sept. 2021 a las 16:27
  • Vale, perdón, ya está hecho, gracias.
    – Komito
    Commented el 15 sept. 2021 a las 16:56

1 respuesta 1

0

Solución

MainActivity

class MainActivity : ComponentActivity() {

    @ExperimentalFoundationApi
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)


        setContent {
            val systemUiController = rememberSystemUiController()

            SideEffect {
                systemUiController.setStatusBarColor(color = PrimaryDark)
            }
            AppTheme() {


                MainScreen()

            }

        }
    }

    @ExperimentalFoundationApi
    @Composable
    fun MainScreen() {
        val navController = rememberNavController()
        val navigationItems = listOf(Obras, Talleres, Ajustes)
        Scaffold(bottomBar = {
            BottomNavigationBar(
                navController = navController,
                items = navigationItems
            )
        }) {

            NavigationHost(navController)
        }
    }
} 

NavigationHost.kt

@ExperimentalFoundationApi
@Composable
fun NavigationHost(navController: NavHostController) {


    NavHost(navController = navController, startDestination = Obras.route) {
        composable(Obras.route) {
            Pantalla1(navigateToProfile = { authorId ->
                navController.navigate("${Profile.route}/$authorId")
            })

        }
        composable(Talleres.route) {
            Pantalla2()
        }

        composable(Ajustes.route) {
            Pantalla3()
        }

        composable(
            Profile.route + "/{authorId}",
            arguments = listOf(navArgument("authorId") { type = NavType.StringType })
        ) { backStackEntry ->
            val authorId = backStackEntry.arguments!!.getString("authorId")!!
            Profile(authorId)
        }

    }
}

Pantalla1.kt

typealias AuthorId = String

@ExperimentalCoroutinesApi
@Composable
fun Pantalla1(navigateToProfile: (AuthorId) -> Unit) {


    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(
                paddingValues = PaddingValues(

                    bottom = 50.dp
                )
            ),
    ) {

        AutoresInfo(navigateToProfile)
    }

}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun AutoresInfo(navigateToProfile: (AuthorId) -> Unit) {
    var autoresList by remember {
        mutableStateOf<List<Autor>?>(null)
    }

    JetFirestore(path = { collection("autores") },
        queryOnCollection = { orderBy("nombre", Query.Direction.ASCENDING) },

        onRealtimeCollectionFetch = { value, exception ->
            autoresList = value.getListOfObjects()
        }) {
        autoresList?.let {
            val grouped = it.groupBy { it.nombre[0] }
            LazyColumn(

                modifier = Modifier.fillMaxSize()

            ) {


                grouped.forEach { (initial, autoresForInitial) ->
                    stickyHeader {
                        StickyHeaderAutores(initial = initial.toString())
                    }

                    items(autoresForInitial, key = { autor -> autor.nombre }) { autor ->
                        Surface(modifier = Modifier.clickable { navigateToProfile(autor.nombre) }) {
                            @OptIn(coil.annotation.ExperimentalCoilApi::class)
                            AutorCard(autor)
                        }


                    }
                }


            }
        } ?: Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            CircularProgressIndicator(
                color = Color.Red,
                modifier = Modifier

                    .size(50.dp)

            )
        }

    }


}

1
  • Tu respuesta podría mejorarse con información de apoyo adicional. Por favor, pulsa en editar para añadir más detalles, como citas o documentación, para que otros puedan confirmar que tu respuesta es correcta. Puedes encontrar más información sobre cómo escribir buenas respuestas en el centro de ayuda.
    – Comunidad Bot
    Commented el 15 sept. 2021 a las 16:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.