停止 Jetpack Compose pointerInteropFilter 消耗输入事件

Question

我有一个垂直的

Column

有两个孩子：

1. A

   Pager

   可组合项（来自 Accompanist），它显示

   Text

   .
2. A

   Canvas

   可组合项，可绘制两条弧线和一个圆圈。

它们的订购顺序与此处描述的顺序相同。我希望

Text

始终呈现在

Canvas

后面。

---

实施细节

Canvas

可组合项有一个

Modifier.pointerInteropFilter

来处理

MotionEvent.ACTION_DOWN

和

MotionEvent.ACTION_MOVE

。如果事件不在弧的 10% 距离内，则忽略它，并返回

false

。

My understanding was return

false

将表明该事件尚未被消耗，因此将传递给

Pager

来处理 - 但事实并非如此。一旦

Modifier.pointerInteropFilter

被注册，

Pager

永远不会收到输入事件，无论返回

true

或

false

.

---

布局

为简洁起见，下面是我当前实现的简化版本。我有一个

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
    }
}

---

作为参考，我的布局产生以下内容：

Answer 1

有了 Jetpack Compose 1.4.1 和

androidx.compose.foundation.pager.HorizontalPager

的 HorizontalPager 而不是伴奏者，这不再是问题。