Jetpack：012-Jetpack中的弹出菜单

news2024/11/16 10:42:51

文章目录

1. 概念介绍
2. 使用方法
- 2.1 DropdownMenu
- 2.2 DropdownMenuItem
3. 示例代码
- 3.1 代码和注释
- 3.2 代码难点
- 3.3 运行效果
4. 内容总结

我们在上一章回中介绍了Jetpack中标题栏相关的内容，本章回中主要 弹出菜单。闲话休提，让我们一起Talk Android Jetpack吧！

1. 概念介绍

我们在本章回中介绍的弹出菜单主要指标题栏右侧的详情菜单，平常不显示，当点击详情图标时才会弹出菜单。在Android的View体系中叫它PopupMenu组件。在Jectpack库中叫DropdownMenu。虽然名字不同，但是显示的效果相同，为了方便介绍，我统一称它们为弹出菜单。

2. 使用方法

弹出菜单通过DropdownMenu和DropdownMenuItem这两个可组合函数一起实现，接下来我们分别介绍这两个函数的使用方法。

2.1 DropdownMenu

该函数主要用来显示弹出菜单，它提供了一些参数来控制菜单，下面是常用的参数：

expanded参数：主要用来控制是否显示菜单，值为true时显示菜单，否则不显示菜单；
offset参数：主要用来控制菜单弹出的位置，默认在action图标左下角显示弹出菜单；
onDismissRequest参数：点击菜单外任意位置时是否关闭菜单，值为true时关闭菜单，否则不关闭菜单；

2.2 DropdownMenuItem

该函数主要用来控制弹出菜单中的菜单项，它提供了相关的参数来控制菜单项，下面是常用的参数：

text:主要用来控制菜单项显示的文本内容；
onClick:主要用来控制菜单项的点击事件；
leadingIcon:主用用来控制菜单项的图标，位于菜单项最左侧；
trailingIcon:主用用来控制菜单项的图标，位于菜单项最右侧；
colors:主要用来控制菜单项中的文本，图标，背景等内容的颜色；

3. 示例代码

介绍完实现弹出菜单的可组合函数后，我们将通过具体的代码来演示这些函数的用法，下面是示例代码，请大家参考：

3.1 代码和注释

//自定义的popupMenu，通过可以组合函数DropdownMenu实现，同时实现了点击功能，不过没有给item添加具体的功能
@Composable
fun ShowPopupMenu() {
    //是否显示popupMenu,默认显示
    var show by remember { mutableStateOf(true) }

    //菜单中显示的内容：包含图标和文字
    val items = listOf<NavigationItem>(
        NavigationItem("One",Icons.Default.Done),
        NavigationItem("Two",Icons.Default.Done),
        NavigationItem("Three",Icons.Default.Done),
    )

    if (show)
        DropdownMenu(
            //是否显示菜单
            expanded = show,
            //控制菜单的弹出位置，向左和向下进行偏移
            offset = DpOffset(x = 20.dp, y = 30.dp),
            //点击菜单外任意位置时，菜单消失
            onDismissRequest = { show = false }) {
            Column() {
                items.forEachIndexed { index, item ->
                    //这个菜单项目比较好，封装了图标、文本和点击事件
                        DropdownMenuItem(
                            leadingIcon = { Icon(imageVector = item.icon, contentDescription = null)},
                            text = { Text(text = item.text) },
                            //点击任意菜单项目时，菜单消失
                            onClick = { show = false})
                }
            }
        }
    else
        //action第二次点击弹出菜单，第一次点击在scaffold中控制
        IconButton(onClick = { show = true}) {
            Icon(imageVector = Icons.Default.MoreVert, contentDescription = null)
        }
}