如何防止 Jetpack Compose ExposedDropdownMenuBox 在滚动时显示菜单

Question

我正在尝试使用 Jetpack Compose 的 ExposedDropdownMenuBox，但我无法阻止它在滚动时显示菜单。

例如，以下是复制此问题的代码：

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Surface(color = MaterialTheme.colors.background) {
                    Column(
                        modifier = Modifier
                            .padding(horizontal = 8.dp)
                            .verticalScroll(rememberScrollState()),
                        verticalArrangement = Arrangement.spacedBy(8.dp)
                    ) {
                        repeat(20){
                            ExposedDropdownMenuSample()
                        }
                    }
                }
            }
        }
    }
}

ExusedDropdownMenuSample取自官方样本。

这是显示问题的 GIF。

我怎样才能防止这种情况发生？

此代码使用 compose 版本1.1.0-rc01。

Answer 1

编辑：现在它不会像 m.reiter 报告的那样吞掉猛烈运动

我能够用这个丑陋的黑客解决这个问题：

private fun Modifier.cancelOnExpandedChangeIfScrolling(cancelNext: () -> Unit) = pointerInput(Unit) {
    forEachGesture {
        coroutineScope {
            awaitPointerEventScope {
                var event: PointerEvent
                var startPosition = Offset.Unspecified
                var cancel = false

                do {
                    event = awaitPointerEvent(PointerEventPass.Initial)
                    if (event.changes.any()) {
                        if (startPosition == Offset.Unspecified) {
                            startPosition = event.changes.first().position
                        }

                        val distance =
                            startPosition.minus(event.changes.last().position).getDistance()
                        cancel = distance > 10f || cancel
                    }
                } while (!event.changes.all { it.changedToUp() })

                if (cancel) {
                    cancelNext.invoke()
                }
            }
        }
    }
}

然后将其添加到ExposedDropdownMenuBox类似：

var cancelNextExpandedChange by remember { mutableStateOf(false) } //this is to prevent fling motion from being swallowed
ExposedDropdownMenuBox(
    expanded = expanded,
    onExpandedChange = {
        if (!cancelNextExpandedChange) expanded = !expanded
        cancelNextExpandedChange = false
    }, modifier = Modifier.cancelOnExpandedChangeIfScrolling() { cancelNextExpandedChange = true }
)

所以它主要检查是否存在超过10 个像素的拖动？cancelNextExpandedChange如果为 true，则调用设置为的回调true，以便跳过下一个onExpandedChange。

10 只是一个非常适合我的测试的神奇数字，但对于高分辨率屏幕设备来说似乎太低了。我确信有更好的方法来计算这个数字......也许更有经验的人可以帮助解决这个问题，直到我们找到适当的解决方案？