Jetpack Compose DropdownMenu手指跟随点击显示

更新时间：2022年11月17日 14:09:17 作者：九狼

这篇文章主要为大家介绍了Jetpack Compose DropdownMenu手指跟随点击位置显示实现方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

引言

DropdownMenu显示时默认会避开点击的view 通常默认显示在左下方

本篇文章教你实现跟随手指按下位置显示

效果图

实现方法

首先要获取到点击的位置之后计算偏移量

先分析两种offset参数

1使用DropdownMenu的offset参数

获取到点击的位置之后计算偏移量， DropdownMenu的offset参数

@Composable
fun DropdownMenu(
    ...
    offset: DpOffset = DpOffset(0.dp, 0.dp)
    ...
)

这种方法比较麻烦，要反向计算偏移量，因为初始位置（x，y）轴的原点在左下角,而不是左上角

2Modifier.offset

将DropdownMenu嵌套在Box里面,调用BoxD的Modifier.offset()改变DropdownMenu的显示位置
这种方案的的初始位置（x，y）轴的原点在左上角
点击的位置就是DropdownMenu的偏移量，

获取到点击的位置

层级结构

Box{
  card()
  Box{
     DropdownMenu()
  }
}

Box创建用于监听点击事件修饰符

在最外层的Box创建一个用于监听点击事件的修饰符，来捕获点击位置

val animatedOffset = remember { Animatable(Offset(0f, 0f), Offset.VectorConverter) }
Box(
    modifier = Modifier
        .fillMaxWidth()
        .pointerInput(Unit) {
            coroutineScope {
                while (true) {
                    //获取点击位置
                    val boxOffset = awaitPointerEventScope {
                        awaitFirstDown().position
                    }
                    //显示DropdownMenu
                    expanded = true
                    launch {
                        animatedOffset.animateTo(
                            boxOffset,
                            animationSpec = spring(stiffness = Spring.StiffnessLow)
                        )
                    }
                }
            }
        }
)

DropdownMenu外层的Box()设置偏移量

Box(modifier = Modifier.offset {
    IntOffset(
        animatedOffset.value.x.roundToInt(),
        animatedOffset.value.y.roundToInt()
    )
} ) {
    DropdownMenu()
    }

完整代码

@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun FullContent(
    modifier: Modifier,
    context: String
) {
    var expanded by remember { mutableStateOf(false) }
    val animatedOffset = remember { Animatable(Offset(0f, 0f), Offset.VectorConverter) }
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .pointerInput(Unit) {
                coroutineScope {
                    while (true) {
                        //获取点击位置
                        val boxOffset = awaitPointerEventScope {
                            awaitFirstDown().position
                        }
                        expanded = true
                        launch {
                            animatedOffset.animateTo(
                                boxOffset,
                                animationSpec = spring(stiffness = Spring.StiffnessLow)
                            )
                        }
                    }
                }
            }
    ) {
        Card(modifier = modifier
            .fillMaxWidth(),
            border = BorderStroke(2.dp, CustomTheme.colors.divider)        
        ) {
            Text(
                text = context,
                modifier = Modifier.padding(6.dp),
                fontSize = 17.sp,
                fontWeight = FontWeight.Normal,
            )
        }
        Box(modifier = Modifier.offset {
            IntOffset(
                animatedOffset.value.x.roundToInt(),
                animatedOffset.value.y.roundToInt()
            )
        } ) {
            DropdownMenu(
                expanded = expanded,
                onDismissRequest = { expanded = false }
            ) {
                DropdownMenuItem(
                    text = {
                        Text(stringResource(id = R.string.app_copy))
                    },
                    onClick = {
                    })
                DropdownMenuItem(
                    text = {
                        Text(stringResource(id = R.string.app_copy))
                    },
                    onClick = {
                    })
                Divider()
                DropdownMenuItem(
                    text = {
                        Text(stringResource(id = R.string.app_copy))
                    },
                    onClick = {
                    })
            }
        }
    }
}

使用方法

FullContent(
    modifier = Modifier.fillMaxWidth(),
    context = "悄悄的我走了，
正如我悄悄的来；
我挥一挥衣袖，
不带走一片云彩。"
)

以上就是Jetpack Compose DropdownMenu手指跟随点击显示的详细内容，更多关于Jetpack Compose DropdownMenu的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

Kotlin中单例模式和Java的对比浅析
目前java中的单例模式有多种写法，kotlin中的写法更多一点，下面这篇文章主要给大家介绍了关于Kotlin中单例模式和Java对比的相关资料，会总结全部的到单例模式写法，需要的朋友可以参考下
2018-07-07
Android实现菜单关联activity的方法示例
这篇文章主要介绍了Android实现菜单关联activity的方法,涉及Android使用Intent实现菜单关联activity相关操作技巧,需要的朋友可以参考下
2019-03-03
Android使用Activity实现简单的可输入对话框
大家在做弹出对话框效果的时候最容易想到的是用Dialog显示，但其实弹出对话框的实现效果有两种：Dialog和Activity，那么下面这篇文章就来给大家介绍了关于Android使用Activity如何实现一个简单的可输入对话框的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-10-10
Andriod 资源文件之存取操作
这篇文章主要介绍了Andriod 资源文件之存取操作的相关资料,需要的朋友可以参考下
2016-03-03
Android Studio报错Manifest merger failed with multiple errors
这篇文章主要介绍了Android Studio报错Manifest merger failed with multiple errors
2017-10-10
Android Studio配置Kotlin开发环境详细步骤
这篇文章主要介绍了Android Studio配置Kotlin开发环境详细步骤的相关资料,需要的朋友可以参考下
2017-05-05
Android编程之页面切换测试实例
这篇文章主要介绍了Android编程之页面切换测试,实例分析了Android实现页面点击切换的相关技巧,非常具有实用价值,需要的朋友可以参考下
2015-04-04
轻松实现Android指南针功能
这篇文章主要介绍了轻松实现Android指南针功能的几个关键步骤，想要实现指南针功能的朋友不要错过
2015-12-12
Android App跳转微信小程序踩坑实战
现在市面上很多的应用都可以实现相互跳转,下面这篇文章主要给大家介绍了关于Android App跳转微信小程序踩坑的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-05-05
Android权限操作之uses-permission详解
这篇文章主要介绍了Android权限操作之uses-permission,较为详细的分析了uses-permission常见权限操作类型与功能,需要的朋友可以参考下
2016-10-10