How to move DropdownMenu to preferable location in Jepack Compose

Viewed 213

Is it possible to center DropdownMenu in my example? or show it wherever I click or tap?

I tried alignment and arrangements and none of them work. I prefer showing the DropdownMenu wherever I tab but I couldn't find a way to do it.

Desktop Compose

fun main() = Window {
    var helloText by remember { mutableStateOf("") }

    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Item("Darian", "Russ") {
            helloText = it
        }
        Item("Maynerd", "Andre") {
            helloText = it
        }
        Item("Sandra", "Victoria") {
            helloText = it
        }
        Spacer(modifier = Modifier.height(2.dp))
        Text(text = helloText)
    }
}

@Composable
fun Item(text: String, text2: String, onMenuTab: (String) -> Unit) {
    var expanded by remember { mutableStateOf(false) }
    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        val modifier = Modifier.clickable {
            expanded = true
        }
        DropdownMenu(
            expanded = expanded,
            onDismissRequest = {
                expanded = false
            }
        ) {
            DropdownMenuItem(onClick = {
                onMenuTab("hello $text $text2")
                expanded = false
            }, modifier = Modifier.align(Alignment.CenterHorizontally)) {
                Text("Hello")
            }
            DropdownMenuItem(onClick = { /* Handle settings! */ }) {
                Text("Settings")
            }
            Divider()
            DropdownMenuItem(onClick = { /* Handle send feedback! */ }) {
                Text("Send Feedback")
            }
        }
        Text(text = text, modifier = modifier)
        Text(text = text2, modifier = modifier)
        Divider(modifier = Modifier.height(2.dp))
        Spacer(modifier = Modifier.height(2.dp))
    }
}
0 Answers
Related