如何在Jetpack Compose中实现文本捏合缩放且不超出屏幕？

一、修复现有Zoomable库的溢出问题 #

你当前代码里的Text未设置宽度限制，缩放后内容自然会超出屏幕边界。可以通过以下调整解决：

• 给Text添加fillMaxWidth()，确保文本默认占满屏幕宽度并自动换行
• 将Text嵌套在可滚动容器中，缩放后内容超出时允许滚动查看

修改后的代码：

@Composable
fun TextZoomable(text: AnnotatedString, onTap: (Offset) -> Unit) {
    val zoomState = rememberZoomState()
    val verticalScrollState = rememberScrollState()
    val horizontalScrollState = rememberScrollState()

    Box(
        modifier = Modifier
            .fillMaxSize()
            .zoomable(
                zoomState = zoomState,
                onTap = onTap
            )
    ) {
        Column(
            modifier = Modifier
                .verticalScroll(verticalScrollState)
                .horizontalScroll(horizontalScrollState)
        ) {
            Text(
                text = text,
                modifier = Modifier.fillMaxWidth()
            )
        }
    }
}

二、不依赖第三方库实现文本缩放 #

可以直接用Compose原生的手势API实现缩放，配合滚动容器控制内容边界：

核心实现逻辑 #

• 用remember保存缩放比例，限制最小/最大缩放范围（避免过度缩放）
• 通过pointerInput监听双指缩放手势，更新缩放比例
• 将文本放在滚动容器中，确保缩放后超出屏幕的内容可滚动访问

完整代码示例：

@Composable
fun CustomZoomableText(text: AnnotatedString, onTap: (Offset) -> Unit) {
    var scale by remember { mutableStateOf(1f) }
    val minScale = 0.8f
    val maxScale = 3f
    val verticalScrollState = rememberScrollState()
    val horizontalScrollState = rememberScrollState()

    Box(
        modifier = Modifier
            .fillMaxSize()
            .pointerInput(Unit) {
                detectTransformGestures { _, _, zoom, _ ->
                    scale = (scale * zoom).coerceIn(minScale, maxScale)
                }
            }
            .pointerInput(Unit) {
                detectTapGestures(onTap = onTap)
            }
    ) {
        Column(
            modifier = Modifier
                .verticalScroll(verticalScrollState)
                .horizontalScroll(horizontalScrollState)
                .scale(scale)
                .padding(16.dp)
        ) {
            Text(
                text = text,
                modifier = Modifier.fillMaxWidth()
            )
        }
    }
}

内容的提问来源于stack exchange，提问作者A. Cedano