首页 > 解决方案 > 停止 Jetpack Compose 指针InteropFilter 使用输入事件

问题描述

我有一个Column有两个孩子的垂直:

  1. 一个Pager可组合的(来自Accompanist),它显示Text.
  2. Canvas绘制两条弧线和一个圆的可组合项。

它们按照此处描述的相同顺序进行排序。我希望Text始终在Canvas.


实施细节

Canvas组合的有一个Modifier.pointerInteropFilter处理MotionEvent.ACTION_DOWNMotionEvent.ACTION_MOVE。如果事件不在弧的 10% 距离内,则忽略并false返回。

我的理解是返回false将表明该事件尚未被消耗,因此将被传递以供Pager处理 - 但事实并非如此。一旦Modifier.pointerInteropFilter被注册,则Pager永远不会接收输入事件,无论返回truefalse


布局

为简洁起见,下面是我当前实现的简化版本。我有一个Column渲染第Pager一个,然后是Canvas.

Column(
    modifier = Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Center
) {
    // The Pager should always be rendered behind the Canvas. This is to
    // prevent the Text from rending on top when being dragged.
    HorizontalPager(
        state = rememberPagerState(pageCount = 8000, initialPage = 4000)
    ) { page ->
        Text(
            modifier = Modifier.fillMaxWidth(),
            text = "25:00",
            textAlign = TextAlign.Center,
            fontSize = 60.sp
        )
    }
}

var progress by remember { mutableStateOf(0.25f) }

ArcSeekBar(progress, false) { change ->
    progress = change
}

在此示例中,我将 硬编码pointerInteropFilter为始终返回 false,假设它不会消耗/阻止事件,允许它传递到Pager.

@Composable
fun ArcSeekBar(progress: Float, interaction: Boolean, changed: (Float) -> Unit) {
    val sweepAngle = 270.0f

    var width: Int by remember { mutableStateOf(0) }
    var height: Int by remember { mutableStateOf(0) }

    Canvas(
        modifier = Modifier
            .fillMaxSize()
            .aspectRatio(1.0f)
            .onSizeChanged {
                width = it.width
                height = it.height
            }
            .pointerInteropFilter {
                // Reduced for brevity, but whatever the function returns
                // the Pager composable behind it will never receive input events.
                false
            },
    ) {
        // Omitted for brevity, draw two arcs and a circle
    }
}

作为参考,我的布局产生以下内容:

在此处输入图像描述

标签: androidkotlinandroid-jetpackandroid-jetpack-compose

解决方案


推荐阅读