Всплывающее меню создания Jetpack

Question

Я пытаюсь переписать пользовательский интерфейс своего проекта с помощью Jetpack compose. Есть идеи добавить всплывающее меню с помощью Jetpack Compose в android? как этот

Я пытался реализовать его с помощью макета Stack (), но результаты не на должном уровне.

@Composable
fun LiveDataComponentList(productList: List<Product>) {
    AdapterList(data = productList) { product ->
        Stack() {
            Clickable(onClick = { PopupState.toggleOwner(product) }) {
                Card(...) {...}

            if (PopupState.owner == product) {
                Surface(color = Color.Gray,modifier = Modifier.gravity(Alignment.TopEnd) + Modifier.padding(12.dp)) {
                    Column() {
                        Text("menu 1")
                        Text("menu 2")
                        Text("menu 3")
                        Text("menu 4")
                        Text("menu 5")
                    }
                }
            }
        }
    }
}

и PopupState -

@Model
object PopupState
{
    var owner:Product?=null
    fun toggleOwner(item:Product)
    {
        if(owner==item)
            owner=null
        else
            owner=item
    }
}

результат

скриншот

Answer 1

После некоторых исследований я нашел решение этой проблемы, ключевым компонентом является DropdownPopup

@Composable
fun LiveDataComponentList(productList: List<Product>) {
    AdapterList(data = productList) { product ->


        Clickable(onClick = { PopupState.toggleOwner(product) }) {
            Card(...) {...}
        }
        if (PopupState.owner == product) {
            DropdownPopup(dropDownAlignment = DropDownAlignment.End)
            {

                Surface(
                    shape = RoundedCornerShape(4.dp),
                    elevation = 16.dp,
                    color = Color.White,
                    modifier = Modifier.gravity(Alignment.End)+ Modifier.padding(end = 10.dp)
                )
                {
                    Column(modifier = Modifier.padding(10.dp)) {

                        MenuItem(text ="Edit", onClick = {})
                        MenuItem(text = "Delete", onClick = {})
                        MenuItem(text = "Details", onClick = {})


                    }
                }
            }
        }


    }
}

@Composable
fun MenuItem(text: String, onClick: () -> Unit) {
    Clickable(onClick = onClick, modifier = Modifier.padding(6.dp)) {
        Text(text = text, style = MaterialTheme.typography.subtitle1)

    }
}

Это решение отлично работает с версией compose dev10