Compose系列文章,请点原文阅读。原文,是时候学习Compose了!
0、介绍
一个下拉菜单。菜单具有一个切换按钮,它是生成菜单的元素。例如一个图标,点击该图标可以触发菜单。 DropdownMenu的内容可以是DropdownMenuItems,也可以是自定义内容。
1、属性一览
【目前基于alpha09版本】函数如下:
@Composable fun DropdownMenu(
toggle: () -> Unit,
expanded: Boolean,
onDismissRequest: () -> Unit,
toggleModifier: Modifier = Modifier,
dropdownOffset: Position = Position(0.dp, 0.dp),
dropdownModifier: Modifier = Modifier,
dropdownContent: ColumnScope.() -> Unit
): Unit
属性参数含义:
参数 | 含义 |
---|---|
toggle: () -> Unit | 生成菜单的元素 |
expanded: Boolean | 菜单当前是打开还是关闭状态 |
onDismissRequest: () -> Unit | 在菜单被关闭时调用 |
toggleModifier: Modifier = Modifier | 应用于菜单开关按钮的修饰符 |
dropdownOffset: Position = Position(0.dp, 0.dp) | 要添加到菜单的偏移量,默认0.dp |
dropdownModifier: Modifier = Modifier | 应用于菜单内容的修饰符 |
菜单的内容是一个个的菜单项,来看下菜单项的函数:
@Composable fun DropdownMenuItem(
onClick: () -> Unit,
modifier: Modifier = Modifier,
enabled: Boolean = true,
interactionState: InteractionState = remember { InteractionState() },
content: () -> Unit
): Unit
属性参数含义:
参数 | 含义 |
---|---|
onClick: () -> Unit | 单击菜单项时调用 |
modifier: Modifier = Modifier | 应用于菜单项的修饰符 |
enabled: Boolean = true | 控制菜单项的启用状态-如果为false,则菜单项将不可单击,并且onClick将不会被调用 |
interactionState: InteractionState = remember { InteractionState() } | 表示该菜单项存在不同的状态,例如"加入黑名单"和“移除黑名单”这种状态 |
2、使用示例
首先根据说明我们需要一个开关来触发下拉菜单,例如比标题栏右侧的更多按钮,我们简单使用一个IconButton,通过该Button来触发菜单,代码如下:
@Composable
fun DropdownMenuDemo() {
var expanded = remember { mutableStateOf(false) }
val iconButton = @Composable {
IconButton(onClick = { expanded.value = true }) {
Icon(Icons.Default.MoreVert)
}
}
DropdownMenu(
expanded = expanded.value,
onDismissRequest = { expanded.value = false },
toggle = iconButton,
) {
DropdownMenuItem(onClick = { }) {
Text("分享")
}
DropdownMenuItem(onClick = { }) {
Text("举报")
}
DropdownMenuItem(onClick = { }) {
Text("关注")
}
}
}
实现效果如下:
3、版本更新
- 暂无
4、未解决问题
暂无,关于菜单的使用一般也就是这些了,如果想自定义每个菜单项也是可以的,DropdownMenu的内容规定是一个列属性的布局,所以你可以随意定制你的内容。