我有一个垂直的Column
有两个孩子:
- A
Pager
可组合(来自伴奏者),显示Text
.
- A
Canvas
绘制两个圆弧和一个圆的可组合项。
它们的排序顺序与此处描述的顺序相同。我想要Text
始终渲染在Canvas
.
实施细节
The Canvas
可组合的有一个Modifier.pointerInteropFilter
处理MotionEvent.ACTION_DOWN
and MotionEvent.ACTION_MOVE
。如果事件不在弧的 10% 距离内,则忽略该事件,并且false
回。
我的理解力正在恢复false
表示该事件尚未被消耗,因此将被传递给Pager
来处理——但事实并非如此。一旦Modifier.pointerInteropFilter
已注册,则Pager
从不接收输入事件,无论是否返回true
or false
.
Layout
为了简洁起见,下面是我当前实现的简化版本。我有一个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
}
}
作为参考,我的布局产生以下结果: