Jetpack组合嵌套LazyColumn

Question

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

即使我指定第二列或第一列的高度，里面的内容也可能不合适。

​

​

Answer 1

编辑：最好使用Pylyp，link to comment建议的选项。

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代表了特定情况下的一些抽象内容。