android - Canvas 上的垂直滚动 (Jetpack Compose)

Question

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

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

内容就被删掉了。如何向 Canvas 添加滚动功能？

Answer 1

为了能够使用verticalScroll或水平滚动内容滚动Composable，子Composables水平滚动的总宽度垂直滚动的总高度应该大于父级。

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

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