Jetpack：012-Jetpack中的弹出菜单

文章目录

[1. 概念介绍](#1. 概念介绍)
[2. 使用方法](#2. 使用方法)
- [2.1 DropdownMenu](#2.1 DropdownMenu)
- [2.2 DropdownMenuItem](#2.2 DropdownMenuItem)
[3. 示例代码](#3. 示例代码)
- [3.1 代码和注释](#3.1 代码和注释)
- [3.2 代码难点](#3.2 代码难点)
- [3.3 运行效果](#3.3 运行效果)
[4. 内容总结](#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 代码和注释

kotlin 复制代码

//自定义的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)
        }
}

我们在上面代码中的关键位置都添加了注释，这样方便大家理解代码。此外，我们把代码封装成了列表，通过列表来添加菜单项目，这样可以让代码更加简洁一些。

3.2 代码难点

示例代码中的难点在于如何显示和关闭弹出菜单，我们的思路是定义一个状态值，然后依据不同的状态值来显示和关闭弹出菜单，也就是代码中if/else语句控制的内容。

修改状态值的地方有两个：一个是弹出菜单的菜单项，另外一个是详情菜单图标的点击事件，也就是代码中onClick参数对应的内容。

状态值在代码中对应为show变量，它通过remember进行状态管理，状态值发生变化后，系统会重组UI界面，进而实现显示和关闭弹出菜单的功能。状态管理的内容，我们将在后面章回中介绍。

3.3 运行效果

我们把弹出菜单封装成了独立的函数，编译并且运行后可以得到下面的运行效果

4. 内容总结

最后，我们对本章回的内容做统一的总结：

弹出菜单位于标题栏最右侧，平常不显示，点击详情菜单图标时弹出菜单；
弹出菜单通过可组合函数DropdownMenu和DropdownMenuItem实现；
可组合函数DropdownMenu主要控制弹出菜单显示状态和位置相关的内容；
可组合函数DropdownMenuItem主要控制弹出菜单中菜单项目的具体内容；
关闭和显示弹出菜单通过状态值来控制，涉及到修改状态值和状态管理的知识；

看官们，关于Jetpack中弹出菜单相关的内容就介绍到这里，欢迎大家在评论区交流与讨论！