How can implement extendable card which extend over layout underneath not move it. For example compose has card and column underneath. After click on card, extended card must hide column under extended card, not move it to bottom.
Create a custom MyDropDown
Composable
@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
}
)
}
}
}
}
}
and use like this
setContent {
MyTheme {
val list = listOf<String>("A", "B", "C")
Column(
verticalArrangement = Arrangement.spacedBy(5.dp)
) {
MyDropdown(list)
MyDropdown(list)
MyDropdown(list)
MyDropdown(list)
}
}
}