画布上的垂直滚动 (Jetpack Compose)

Question

我有个问题。当我将垂直滚动修改器添加到画布时，它不起作用。我不明白为什么。代码：

Canvas(modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())) {
}

内容就直接删掉了。如何向画布添加滚动功能？

Answer 1

为了能够使用 VerticalScroll 或水平滚动内容滚动可组合项，子可组合项水平滚动的总宽度垂直滚动的总高度应大于父级。

您可以使用可组合项包裹您的画布，并将画布的高度设置为大于父级或屏幕

@Composable
private fun MyCanvas() {
    Box(modifier = Modifier.verticalScroll(rememberScrollState())) {
        Canvas(
            modifier = Modifier
                .border(3.dp, Color.Green)
                .fillMaxWidth()
                .height(2000.dp)

        ) {
            drawCircle(Color.Red)
        }
    }
}

其他选项是使用拖动或任何返回触摸位置变化并翻译 Canvas 内容的手势。

Canvas(
    modifier = Modifier
        .border(3.dp, Color.Green)
        .fillMaxWidth()
) {

    // You need to change left or top on touch
    // Static values are for demonstration
    translate(left = 0f, top = -1000f) {
        drawCircle(Color.Red)
    }
}