jetpack compose中的可扩展卡

Question

如何实现可扩展卡延伸到下面的布局而不移动它。 例如，撰写的下方有卡片和列。点击卡片后，扩展卡必须隐藏扩展卡下方的列，而不是将其移动到底部。

Answer 1

创建自定义

MyDropDown

可组合

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyDropdown(list: List<String>) {
    var expanded by remember { mutableStateOf(false) }
    var selectedText by remember { mutableStateOf(list[0]) }

    Box(
        modifier = Modifier
            .fillMaxWidth()
    ) {
        ExposedDropdownMenuBox(
            expanded = expanded,
            onExpandedChange = {
                expanded = !expanded
            }
        ) {
            TextField(
                value = selectedText,
                onValueChange = {},
                readOnly = true,
                //trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) },
                // if you want icon
                modifier = Modifier.menuAnchor()
            )

            ExposedDropdownMenu(
                expanded = expanded,
                onDismissRequest = { expanded = false }
            ) {
                list.forEach { item ->
                    DropdownMenuItem(
                        text = { Text(text = item) },
                        onClick = {
                            //selectedText = item
                            // i think you don't want change selected
                            expanded = false
                        }
                    )
                }
            }
        }
    }
}

然后像这样使用

    setContent {
        MyTheme {
            val list = listOf<String>("A", "B", "C")
            Column(
                verticalArrangement = Arrangement.spacedBy(5.dp)
            ) {
                MyDropdown(list)
                MyDropdown(list)
                MyDropdown(list)
                MyDropdown(list)
            }
        }
    }