Jetpack?Compose?DropdownMenu手指跟隨點擊顯示
引言
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里面,調(diào)用BoxD的Modifier.offset()
改變DropdownMenu的顯示位置
這種方案的的初始位置(x,y)軸的原點在左上角
點擊的位置就是DropdownMenu的偏移量,
獲取到點擊的位置
層級結(jié)構(gòu)
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()設(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) { //獲取點擊位置 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手指跟隨點擊顯示的詳細內(nèi)容,更多關(guān)于Jetpack Compose DropdownMenu的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Android編程實現(xiàn)設(shè)置按鈕背景透明與半透明及圖片背景透明的方法
這篇文章主要介紹了Android編程實現(xiàn)設(shè)置按鈕背景透明與半透明及圖片背景透明的方法,結(jié)合實例形式較為詳細的分析了Button及ImageButton的背景屬性設(shè)置技巧,非常簡單實用,需要的朋友可以參考下2015-12-12Android實現(xiàn)可播放GIF動畫的ImageView
這篇文章主要為大家詳細介紹了Android實現(xiàn)可播放GIF動畫的ImageView,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-09-09Android DynamicGrid實現(xiàn)拖曳交換位置功能
這篇文章主要為大家詳細介紹了Android DynamicGrid實現(xiàn)拖曳交換位置功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-06-06Android音視頻開發(fā)之MediaExtactor使用教程
MediaExtactor在Android音視頻開發(fā)中負責提取音視頻信息和數(shù)據(jù)流的功能,可以通過該類實現(xiàn)從多媒體文件中剝離得到音頻和視頻的能力。本文將詳細為大家介紹一下它的使用,感興趣的可以了解一下2022-04-04Kotlin協(xié)程操作之創(chuàng)建啟動掛起恢復(fù)詳解
本文的定位是協(xié)程的創(chuàng)建、啟動、掛起、恢復(fù),也會示例一些簡單的使用,這里不對suspend講解,,也不對協(xié)程的高級用法做闡述(熱數(shù)據(jù)通道Channel、冷數(shù)據(jù)流Flow...),本文主要講協(xié)程稍微深入的全面知識2022-08-08Android創(chuàng)建外部lib庫及自定義View的圖文教程
這篇文章主要給大家介紹了關(guān)于Android創(chuàng)建外部lib庫及自定義View的相關(guān)資料,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2018-11-11輕松實現(xiàn)可擴展自定義的Android滾輪時間選擇控件
這篇文章主要為大家詳細介紹了可擴展自定義的Android滾輪時間選擇控件,結(jié)合WheelView實現(xiàn)滾輪選擇日期操作,感興趣的小伙伴們可以參考一下2016-07-07Android 仿微博的點贊功能的實現(xiàn)原理(持續(xù)點贊再取消)
經(jīng)常玩微博的同志都知道,微博的持續(xù)點贊再取消功能,下面小編給大家?guī)砹薃ndroid 仿微博的點贊功能的實現(xiàn)原理(持續(xù)點贊再取消),感興趣的朋友跟隨腳本之家小編一起看看吧2018-03-03