何时可以在 LazyList 或列的范围内使用可组合项？

Question

我使用 Jetpack Compose 构建了许多项目和组件。我已阅读 StackOverFlow 上的文档和其他教程、网站和帖子。

我不清楚何时允许在另一个可组合项中使用可组合项和可组合函数，特别是使用 LazyColumn。

我有一些组件，在 LazyColumn 内部使用 Row 或 Column。其他时候，我尝试创建一个 itemsIndexed 列表，该列表创建一系列 Row 或 Card ，但我收到一条错误 @可组合调用只能在 @Composable 函数的上下文中发生。

LazyColumn 不被视为 @Composable 函数吗？整个 LazyColumn 位于 @Composable 函数本身内。

我对上下文从可组合环境到不可组合环境的变化感到困惑。

谁能解释一下吗？我在困惑什么？

Answer 1

@Composable invocations can only happen from the context of a @Composable function

如上所述，您需要从用 @Composable 注解的函数调用可组合项，

如果您检查 LazyColumn 函数签名，

@Composable
fun LazyColumn(
    // rest of the params
    content: LazyListScope.() -> Unit
) {

}

您将看到内容不是可组合项。另一方面，items 函数使用 itemContent 作为可组合函数，

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])
}

因此您可以调用可组合函数，例如 Column inside item 函数。

items(myItems) { myItem: MyItem ->
    Column{

    }
}

Column、Row 或 Box 等函数的 XScope 函数标记为
@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
    )
}

因此，您可以在 Column、Row 或 Box 内调用另一个 Composable。