我正在尝试使用Jetpack Compose重写我的项目UI。有没有办法在Android中使用jetpack compose添加弹出菜单？就像这个
我试图使用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
}
}
结果是
截图
经过一些研究，我找到了一个解决方案，关键的组件是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 version dev10
