Jetpack Compose 嵌套的 LazyColumn

Question

如何在 Jetpack Compose 中构建此 UI？ 假设我需要一个用于过滤器标题的惰性列，然后是用于实际过滤器的另一个嵌套惰性列，但由于 jetpack compose 不允许嵌套惰性列，构建它的替代方法是什么？

即使我为第二个或第一个惰性列指定高度，其中的内容也可能不适合。

Answer 1

编辑：最好使用 Pylyp Dukhov 建议的选项， 链接到评论。

Hacky 之一：您可以通过添加嵌套Column来破解。 看一下伪代码：

@Composable
fun Screen(
    items: List<Item>,
) {
    // Here we store each state of expandable item
    val expandStates = remember(items.size) {
        List(items.size) { mutableStateOf(false) }
    }

    LazyColumn {
        itemsIndexed(items, { _, it -> it.key }) { idx, item ->
            ExpandableItem(
                modifier = Modifier.fillMaxWidth(),
                item = item.expandable,
                isExpanded = expandStates[idx].value,
            )
        }
    }
}

@Composable
private fun ExpandableItem(
    item: Item,
    isExpanded: Boolean,
    modifier: Modifier = Modifier,
) {
    Column(modifier = modifier.animateContentSize()) {
        Row(
            modifier = Modifier.height(50.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(modifier = Modifier.weight(1f), text = item.title)
            val icon = if (isExpanded) R.drawable.ic_minus else R.drawable.ic_plus
            Icon(
                modifier = Modifier.padding(horizontal = 16.dp),
                painter = painterResource(icon),
                contentDescription = null
            )
        }
        if (isExpanded) Column {
            item.values.forEach { item ->
                ValueItem(
                    modifier = Modifier.fillMaxWidth(),
                    item = item,
                )
            }
        }
    }
}

@Composable
private fun ValueItem(
    item: Item,
    modifier: Modifier = Modifier,
) {
    Column(modifier = modifier) {
        Row(
            modifier = Modifier
                .height(50.dp)
                .padding(start = 16.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Text(
                modifier = Modifier.weight(1f),
                text = item.name,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis
            )
        }
    }
}

在上面的示例中， Item代表您特定案例的一些抽象内容。