JetpackCompose从入门到实战学习笔记11——在compose中使用DropdownMenu
1.简介：
DropdownMenu：
下拉列表菜单，菜单具有一个切换按钮，它是生成菜单的元素。例如一个图标，点击该图标可以触发菜单。 DropdownMenu的内容可以是DropdownMenuItems，也可以是自定义内容。
@Composable
fun DropdownMenu(
expanded: Boolean?,
onDismissRequest: (() -> Unit)?,
modifier: Modifier? = Modifier,
offset: DpOffset? = DpOffset(0.dp, 0.dp),
properties: PopupProperties? = PopupProperties(focusable = true),
content: (@Composable @ExtensionFunctionType ColumnScope.() -> Unit)?
): Unit
2.各个属性参数的含义:
| 参数 | 描述 | 类型 |
|---|---|---|
| expanded | 是否展开 | boolean |
| onDismissRequest | 在菜单关闭时调用 | Unit |
| offset | 设置偏移量 | float |
| properties | 可以设置 focusable、dismissOnBackPress、dismissOnClickOutside、securePolicy | boolean |
3.简单使用：
package com.example.dropdowncomposedemo
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.dropdowncomposedemo.ui.theme.DropDownComposeDemoTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
DropDownComposeDemoTheme {
LazyColumn(modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.spacedBy(16.dp),
contentPadding = PaddingValues(16.dp)//添加内容间距
){
items(
listOf(
"Philipp",
"Martin",
"Carl",
"John",
"Jake",
"Melanie",
"Tony",
"Tom",
"JoJo",
"Mary",
"Jack",
"Henry",
"James",
"MiMi",
"Hank",
)
){ name ->
PersonItem(personName = name.toString(), dropDownItems = listOf(
DropDownItem("点赞"),
DropDownItem("评论"),
DropDownItem("收藏"),
), onItemClick = {
Toast.makeText(applicationContext,it.text,Toast.LENGTH_LONG).show()
})
}
}
}
}
}
}
4.PersonItem类：
/**
*@author: njb
*@date: 2023/3/30 23:02
*@desc:
*/
data class DropDownItem(
val text: String
)
@Composable
fun PersonItem(
personName: String,
dropDownItems: List<DropDownItem>,
modifier: Modifier = Modifier,
onItemClick: (DropDownItem) -> Unit
) {
var isContextMenuVisible by rememberSaveable {
mutableStateOf(false)
}
var pressOffset by remember {
mutableStateOf(0.dp)
}
var itemHeight by remember {
mutableStateOf(0.dp)
}
val density = LocalDensity.current
val interactionSource = remember {
MutableInteractionSource()
}
Card(
elevation = 4.dp,
modifier = modifier
.onSizeChanged {
itemHeight = with(density) { it.height.toDp() }
}
) {
Box(modifier = Modifier
.fillMaxWidth()
.indication(interactionSource, LocalIndication.current)
.pointerInput(true) {
detectTapGestures(
onLongPress = {
isContextMenuVisible = true
},
onPress = {
isContextMenuVisible = true
val press = PressInteraction.Press(it)
interactionSource.emit(press)
tryAwaitRelease()
interactionSource.emit(PressInteraction.Release(press))
}
)
}
.padding(16.dp)
) {
Text(text = personName)
}
DropdownMenu(
expanded = isContextMenuVisible,
offset = DpOffset(x= 10.dp,y = 10.dp),
onDismissRequest = { isContextMenuVisible = false }) {
dropDownItems.forEach { item ->
run {
DropdownMenuItem(
onClick = {
onItemClick(item)
isContextMenuVisible = false
}
)
{
Text(text = item.text)
}
}
}
}
}
}
