Jetpack Compose - DropdownMenu

0、介绍
1、属性一览
2、使用示例
3、版本更新
4、未解决问题

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的内容规定是一个列属性的布局，所以你可以随意定制你的内容。

Jetpack Compose - DropdownMenu相关推荐

Jetpack Compose——DropdownMenu（下拉菜单）的简单使用
基于compose_version=1.1.0-beta01版本参数如下: DropdownMenu(expanded: Boolean,//菜单栏状态onDismissRequest: () -& ...
Jetpack Compose 深入探索系列四： Compose UI
通过 Compose runtime 集成 UI Compose UI 是一个 Kotlin 多平台框架.它提供了通过可组合函数发出 UI 的构建块和机制.除此之外,这个库还包括 Android 和 ...
Jetpack Compose学习笔记
在前不久的 Android Dev Summit '19 上,Jetpack Compose 终于发布了一个可直接获得的预览版.现在的版本还是 0.1.0-dev02,处于非常早期的版本,官方也再三强 ...
随输入动态改变ui_深入详解 Jetpack Compose | 优化 UI 构建
人们对于 UI 开发的预期已经不同往昔.现如今,为了满足用户的需求,我们构建的应用必须包含完善的用户界面,其中必然包括动画 (animation) 和动效 (motion),这些诉求在 UI 工具包创 ...
移动开发 Jetpack Compose 组件布局
Jetpack Compose 是用于构建原生 Android 界面的新工具包.它可简化并加快 Android 上的界面开发,使用更少的代码.强大的工具和直观的 Kotlin API,快速让应用生动而 ...
在 Jetpack Compose 中安全地使用数据流
/ 今日科技快讯 / 11月17日下午,暴雪中国官方微博发布公告称,各位暴雪游戏的国服玩家,我们很遗憾地通知大家,随着我们与网之易公司现有授权协议的到期,自2023年1月24日0点起,所有&l ...
Jetpack Compose 自定义绘制——高仿Keep周运动数据页面
废话之前先上图吧,如果不是有人告诉,你可以一眼看出哪个是真哪个是假吗? 仿制整个页面(仅仅页面)大概花了我两个小时,不过仅仅是静态的.不可点击的.图有形似而无功能. 自定义绘制 Jetpack Com ...
使用Jetpack Compose竟能做出如此漂亮的倒计时APP
Compose开发者挑战赛二周目迎合Jetpack Compose beta版的发布,Google官方发起了Compose开发者挑战赛活动,目前已经入二周目 android-dev-challeng ...
Jetpack Compose - Switch
Jetpack Compose - Switch 1.属性一览 2.使用示例 3.版本更新 4.未解决问题 Compose系列文章,请点原文阅读.原文:是时候学习Compose了! 1.属性一览 [目 ...

Jetpack Compose - DropdownMenu

Jetpack Compose - DropdownMenu

0、介绍

1、属性一览

2、使用示例

3、版本更新

4、未解决问题

Jetpack Compose - DropdownMenu相关推荐

最新文章

热门文章