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

Question

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

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

我有些组件在 LazyColumn 中使用了 Row 或 Column。其他时候我尝试创建一个 itemsIndexed 列表来创建一系列 Rows 或 Cards 并且我得到一个错误 @Composable invocations can only happen from the context of a @Composable function.

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

因此，您可以调用可组合函数，例如列 inside 项目函数。

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

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

When Can I Use A Composable in the Scope of a LazyList or Column?

components

kotlin

android-jetpack-compose

lazycolumn