Jetpack?Compose?DropdownMenu手指跟隨點擊顯示

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

這篇文章主要為大家介紹了Jetpack?Compose?DropdownMenu手指跟隨點擊位置顯示實現(xiàn)方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

DropdownMenu顯示時默認會避開點擊的view 通常默認顯示在左下方

本篇文章教你實現(xiàn)跟隨手指按下位置顯示

效果圖

實現(xiàn)方法

首先要獲取到點擊的位置之后計算偏移量

先分析兩種offset參數(shù)

1使用DropdownMenu的offset參數(shù)

獲取到點擊的位置之后計算偏移量， DropdownMenu的offset參數(shù)

@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創(chuàng)建用于監(jiān)聽點擊事件修飾符

在最外層的Box創(chuàng)建一個用于監(jiān)聽點擊事件的修飾符，來捕獲點擊位置

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實現(xiàn)菜單關聯(lián)activity的方法示例
這篇文章主要介紹了Android實現(xiàn)菜單關聯(lián)activity的方法,涉及Android使用Intent實現(xiàn)菜單關聯(lián)activity相關操作技巧,需要的朋友可以參考下
2019-03-03
Android使用Activity實現(xiàn)簡單的可輸入對話框
大家在做彈出對話框效果的時候最容易想到的是用Dialog顯示，但其實彈出對話框的實現(xiàn)效果有兩種：Dialog和Activity，那么下面這篇文章就來給大家介紹了關于Android使用Activity如何實現(xiàn)一個簡單的可輸入對話框的相關資料，需要的朋友可以參考借鑒，下面來一起看看吧。
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開發(fā)環(huán)境詳細步驟
這篇文章主要介紹了Android Studio配置Kotlin開發(fā)環(huán)境詳細步驟的相關資料,需要的朋友可以參考下
2017-05-05
Android編程之頁面切換測試實例
這篇文章主要介紹了Android編程之頁面切換測試,實例分析了Android實現(xiàn)頁面點擊切換的相關技巧,非常具有實用價值,需要的朋友可以參考下
2015-04-04
輕松實現(xiàn)Android指南針功能
這篇文章主要介紹了輕松實現(xiàn)Android指南針功能的幾個關鍵步驟，想要實現(xiàn)指南針功能的朋友不要錯過
2015-12-12
Android?App跳轉微信小程序踩坑實戰(zhàn)
現(xiàn)在市面上很多的應用都可以實現(xiàn)相互跳轉,下面這篇文章主要給大家介紹了關于Android?App跳轉微信小程序踩坑的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-05-05
Android權限操作之uses-permission詳解
這篇文章主要介紹了Android權限操作之uses-permission,較為詳細的分析了uses-permission常見權限操作類型與功能,需要的朋友可以參考下
2016-10-10