He creado varios proyectos y componentes con Jetpack Compose. He leído los documentos y otros tutoriales, sitios y publicaciones en StackOverFlow.
No tengo claro cuándo se me permite usar componibles y funciones componibles dentro de otro componible, particularmente con un LazyColumn .
Tengo componentes donde uso una Row o una Column dentro de una LazyColumn . Otras veces trato de crear una lista itemsIndexed de elementos que crea una serie de Row o Card y aparece el error de que @Composable invocations can only happen from the context of a @Composable function .
¿ LazyColumn no se considera una función @Composable? Toda LazyColumn está dentro de una función @Composable en sí misma.
Estoy confundido acerca de dónde cambia el contexto de un entorno componible a un entorno no componible.
¿Alguien puede explicar? ¿Qué estoy confundiendo?
@Composable invocations can only happen from the context of a @Composable function Como dice esto, debe llamar a Composable desde una función que está anotada con @Composable
Si marca la firma de la función LazyColumn
@Composable fun LazyColumn( // rest of the params content: LazyListScope.() -> Unit ) { } Verás que el contenido no es Componible. Por otro lado, la función de items usa itemContent como Composable
inline fun <T> LazyListScope.items( items: List<T>, noinline key: ((item: T) -> Any)? = null, noinline contentType: (item: T) -> Any? = { null }, crossinline itemContent: @Composable LazyItemScope.(item: T) -> Unit ) = items( count = items.size, key = if (key != null) { index: Int -> key(items[index]) } else null, contentType = { index: Int -> contentType(items[index]) } ) { itemContent(items[it]) } Debido a esto, puede llamar a funciones componibles como la función Columna inside del elemento.
items(myItems) { myItem: MyItem -> Column{ } } Funciones como Column , Row o Box tienen sus funciones XScope marcadas con @Composable
@Composable inline fun Column( modifier: Modifier = Modifier, verticalArrangement: Arrangement.Vertical = Arrangement.Top, horizontalAlignment: Alignment.Horizontal = Alignment.Start, content: @Composable ColumnScope.() -> Unit ) { val measurePolicy = columnMeasurePolicy(verticalArrangement, horizontalAlignment) Layout( content = { ColumnScopeInstance.content() }, measurePolicy = measurePolicy, modifier = modifier ) } Y por eso puedes llamar a otro Composable dentro de una Column , Row o Box .