如何在 android studio 中的 Jetpack Compose 框中触摸时显示下拉菜单

Question

我想在我触摸的地方显示我的下拉菜单，但它不起作用。我使用 offset 来设置下拉菜单的位置，但它无法正常工作。看起来它只将 x 值设置为我的下拉菜单的位置。

            var expanded by remember { mutableStateOf(false) }
            var touchPoint: Offset by remember { mutableStateOf(Offset.Zero) }
            val density = LocalDensity.current

            Box(
                Modifier
                    .fillMaxSize()
                    .background(Color.Cyan)
                    .pointerInput(Unit) {
                        detectTapGestures {
                            Log.d(TAG, "onCreate: ${it}")
                            touchPoint = it
                            expanded = true

                        }

                    }
            ) {
                val (xDp, yDp) = with(density) {
                    (touchPoint.x.toDp()) to (touchPoint.y.toDp())
                }
                DropdownMenu(
                    modifier = Modifier.align(Alignment.Center),
                    expanded = expanded,
                    offset = DpOffset(xDp, yDp),
                    onDismissRequest = {
                        expanded = false
                    },

                    ) {
                    DropdownMenuItem(onClick = {
                        expanded = false

                    }) {
                        Text("Copy")
                    }
                    DropdownMenuItem(onClick = { expanded = false }) {
                        Text("Get Balance")
                    }
                }

            }

Answer 1

您实际上应该做的是通过给出负偏移量​​来向上偏移。

您需要获取父级的高度，可以通过 Modifier.onSizeChanged 获取它，或者使用 BoxWithConstraints（如果它覆盖整个父级）。

我使用 BoxWithConstraints 进行演示，但两者都可以使用。

如果您偏移 maxHeight 或可组合下拉菜单的高度出现在顶部，那么我们需要另一个正偏移，即触摸位置的 y 轴来将其向下移动

@Composable
private fun DropDownSample() {
    var expanded by remember { mutableStateOf(false) }
    var touchPoint: Offset by remember { mutableStateOf(Offset.Zero) }
    val density = LocalDensity.current

    BoxWithConstraints(
        Modifier
            .fillMaxSize()
            .background(Color.Cyan)
            .pointerInput(Unit) {
                detectTapGestures {
                    Log.d("TAG", "onCreate: ${it}")
                    touchPoint = it
                    expanded = true

                }

            }
    ) {
        val (xDp, yDp) = with(density) {
            (touchPoint.x.toDp()) to (touchPoint.y.toDp())
        }
        DropdownMenu(
            expanded = expanded,
            offset = DpOffset(xDp, -maxHeight + yDp),
            onDismissRequest = {
                expanded = false
            }
        ) {

            DropdownMenuItem(
                onClick = {
                    expanded = false
                },
                interactionSource = MutableInteractionSource(),
                text = {
                    Text("Copy")
                }
            )

            DropdownMenuItem(
                onClick = {
                    expanded = false
                },
                interactionSource = MutableInteractionSource(),
                text = {
                    Text("Get Balance")
                }
            )
        }
    }
}

正如 gif 中所示，如果您触摸下拉菜单出现的区域，如果您触摸屏幕底部，它会向上移动到可组合项的顶部。它位于 gif 的末尾。我不知道是什么原因造成的。除了这个问题之外，它按预期工作。