Jetpack?Compose?DropdownMenu手指跟隨點(diǎn)擊顯示
更新時(shí)間：2022年11月17日 14:09:17 作者：九狼
這篇文章主要為大家介紹了Jetpack?Compose?DropdownMenu手指跟隨點(diǎn)擊位置顯示實(shí)現(xiàn)方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
引言
DropdownMenu顯示時(shí)默認(rèn)會(huì)避開(kāi)點(diǎn)擊的view 通常默認(rèn)顯示在左下方
本篇文章教你實(shí)現(xiàn)跟隨手指按下位置顯示
效果圖
實(shí)現(xiàn)方法
首先要獲取到點(diǎn)擊的位置之后計(jì)算偏移量
先分析兩種offset參數(shù)
1使用DropdownMenu的offset參數(shù)
獲取到點(diǎn)擊的位置之后計(jì)算偏移量， DropdownMenu的offset參數(shù)
@Composable
fun DropdownMenu(
...
offset: DpOffset = DpOffset(0.dp, 0.dp)
...
)
這種方法比較麻煩，要反向計(jì)算偏移量，因?yàn)槌跏嘉恢茫▁，y）軸的原點(diǎn)在左下角,而不是左上角
2Modifier.offset
將DropdownMenu嵌套在Box里面,調(diào)用BoxD的Modifier.offset()改變DropdownMenu的顯示位置
這種方案的的初始位置（x，y）軸的原點(diǎn)在左上角
點(diǎn)擊的位置就是DropdownMenu的偏移量，
獲取到點(diǎn)擊的位置
層級(jí)結(jié)構(gòu)
Box{
card()
Box{
DropdownMenu()
}
}
Box創(chuàng)建用于監(jiān)聽(tīng)點(diǎn)擊事件修飾符
在最外層的Box創(chuàng)建一個(gè)用于監(jiān)聽(tīng)點(diǎn)擊事件的修飾符，來(lái)捕獲點(diǎn)擊位置
val animatedOffset = remember { Animatable(Offset(0f, 0f), Offset.VectorConverter) }
Box(
modifier = Modifier
.fillMaxWidth()
.pointerInput(Unit) {
coroutineScope {
while (true) {
//獲取點(diǎn)擊位置
val boxOffset = awaitPointerEventScope {
awaitFirstDown().position
}
//顯示DropdownMenu
expanded = true
launch {
animatedOffset.animateTo(
boxOffset,
animationSpec = spring(stiffness = Spring.StiffnessLow)
)
}
}
}
}
)
DropdownMenu外層的Box()設(shè)置偏移量
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) {
//獲取點(diǎn)擊位置
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 = "悄悄的我走了，
正如我悄悄的來(lái)；
我揮一揮衣袖，
不帶走一片云彩。"
)以上就是Jetpack Compose DropdownMenu手指跟隨點(diǎn)擊顯示的詳細(xì)內(nèi)容，更多關(guān)于Jetpack Compose DropdownMenu的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
目前java中的單例模式有多種寫(xiě)法，kotlin中的寫(xiě)法更多一點(diǎn)，下面這篇文章主要給大家介紹了關(guān)于Kotlin中單例模式和Java對(duì)比的相關(guān)資料，會(huì)總結(jié)全部的到單例模式寫(xiě)法，需要的朋友可以參考下2018-07-07
Android實(shí)現(xiàn)菜單關(guān)聯(lián)activity的方法示例
這篇文章主要介紹了Android實(shí)現(xiàn)菜單關(guān)聯(lián)activity的方法,涉及Android使用Intent實(shí)現(xiàn)菜單關(guān)聯(lián)activity相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
Android使用Activity實(shí)現(xiàn)簡(jiǎn)單的可輸入對(duì)話框
大家在做彈出對(duì)話框效果的時(shí)候最容易想到的是用Dialog顯示，但其實(shí)彈出對(duì)話框的實(shí)現(xiàn)效果有兩種：Dialog和Activity，那么下面這篇文章就來(lái)給大家介紹了關(guān)于Android使用Activity如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的可輸入對(duì)話框的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-10-10
這篇文章主要介紹了Andriod 資源文件之存取操作的相關(guān)資料,需要的朋友可以參考下2016-03-03
Android Studio報(bào)錯(cuò)Manifest merger failed with multiple errors
這篇文章主要介紹了Android Studio報(bào)錯(cuò)Manifest merger failed with multiple errors2017-10-10
Android Studio配置Kotlin開(kāi)發(fā)環(huán)境詳細(xì)步驟
這篇文章主要介紹了Android Studio配置Kotlin開(kāi)發(fā)環(huán)境詳細(xì)步驟的相關(guān)資料,需要的朋友可以參考下2017-05-05
Android編程之頁(yè)面切換測(cè)試實(shí)例
這篇文章主要介紹了Android編程之頁(yè)面切換測(cè)試,實(shí)例分析了Android實(shí)現(xiàn)頁(yè)面點(diǎn)擊切換的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了輕松實(shí)現(xiàn)Android指南針功能的幾個(gè)關(guān)鍵步驟，想要實(shí)現(xiàn)指南針功能的朋友不要錯(cuò)過(guò)2015-12-12
Android?App跳轉(zhuǎn)微信小程序踩坑實(shí)戰(zhàn)
現(xiàn)在市面上很多的應(yīng)用都可以實(shí)現(xiàn)相互跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于Android?App跳轉(zhuǎn)微信小程序踩坑的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
Android權(quán)限操作之uses-permission詳解
這篇文章主要介紹了Android權(quán)限操作之uses-permission,較為詳細(xì)的分析了uses-permission常見(jiàn)權(quán)限操作類(lèi)型與功能,需要的朋友可以參考下2016-10-10