AndroidView嵌套原生视图缩放后触摸区域不匹配BUG问询

背景 #

在Android Compose中使用AndroidView包裹PDFView等原生视图时，通过父Compose组件的Modifier.scale()设置缩放比例后，出现原生视图触摸区域与显示区域不匹配的问题——Compose自身组件的触摸区域正常，但原生视图仅原未缩放的小区域可响应交互，放大后的显示区域无法触发点击或滚动。推测scale修饰符仅处理了原生视图的视觉渲染，未同步修正触摸交互的坐标映射。

版本信息 #

• Jetpack Compose：使用compose-bom，版本platform('androidx.compose:compose-bom:2022.10.00')
• Android Studio：Dolphin | 2021.3.1
• Kotlin：1.7.20
• JDK：11

复现步骤（以TextView为例） #

1. 创建Activity，在onCreate中调用setContent加载Compose内容
2. 构建Compose层级：Box -> Box -> AndroidView -> TextView
3. 为第二层Box添加.scale(1.5F)修饰符，给TextView设置长文本并开启滚动
4. 测试发现TextView仅左上角小区域可响应点击/滚动，触摸区域与显示区域完全不匹配

复现代码 #

class DemoScaleActivity : AppCompatActivity() {

    val TAG = "DemoScaleActivity"

    private var scope = CoroutineScope(Dispatchers.Main)

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeStandardDoubleBox()
        }
    }

    @Composable
    private fun ComposeStandardDoubleBox() {
        Box(
            Modifier
                .fillMaxSize()
                .background(Color.Yellow),
            contentAlignment = Alignment.Center
        ) {
            Box(
                modifier = Modifier
                    .size(250F.dp, 80F.dp)
                    .scale(1.5F)
                    .background(Color.Gray),
            ) {
                AndroidView(
                    modifier = Modifier.fillMaxSize(),
                    factory = { generateTextView() }) {
                }
            }
        }
    }

    private fun generateTextView(): TextView {
        val textView = TextView(this).apply {
            movementMethod = ScrollingMovementMethod.getInstance()
            isVerticalScrollBarEnabled = true
            scrollBarStyle = View.SCROLLBARS_OUTSIDE_OVERLAY
            scrollBarFadeDuration = 1000
            isSingleLine = false
            isVerticalFadingEdgeEnabled = true

            setBackgroundColor(android.graphics.Color.RED)
            text = generateTextString()
            setOnClickListener {
                Log.d("zzz", " !!!!! ")
            }
        }
        return textView
    }

    private fun generateTextString(): String {
        val aStr = "a".repeat(20)
        val bStr = "b".repeat(20)
        val cStr = "c".repeat(20)
        val dStr = "d".repeat(20)
        val result = StringBuilder()
        repeat(40) {
            result
                .append(aStr).append("\n")
                .append(bStr).append("\n")
                .append(cStr).append("\n")
                .append(dStr).append("\n")
        }
        return result.toString()
    }
}

截图说明 #

• 未添加scale修饰符时：触摸区域与显示区域完全匹配，灰色背景覆盖区域均可响应触摸
• 添加scale修饰符后：仅原未缩放的左上角小范围可响应触摸，放大后的显示区域无法触发交互

解决方案 #

问题根源是Modifier.scale()属于Compose的绘制变换，仅修改视觉呈现，原生View的触摸事件仍基于原始未缩放的坐标系统处理。可通过以下方式解决：

方式1：使用Modifier.graphicsLayer替代scale #

graphicsLayer的缩放会自动同步触摸坐标变换，无需额外处理：

Box(
    modifier = Modifier
        .size(250F.dp, 80F.dp)
        .graphicsLayer {
            scaleX = 1.5F
            scaleY = 1.5F
            transformOrigin = TransformOrigin.Center // 保持居中缩放
        }
        .background(Color.Gray),
) {
    // AndroidView代码不变
}

方式2：在原生View层直接设置缩放 #

跳过Compose层的缩放，直接在原生View初始化时配置缩放参数：

private fun generateTextView(): TextView {
    val textView = TextView(this).apply {
        // 其他配置不变
        scaleX = 1.5F
        scaleY = 1.5F
        // 确保缩放中心为视图中心，需在View测量完成后设置，可配合viewTreeObserver监听尺寸变化
        viewTreeObserver.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
            override fun onGlobalLayout() {
                pivotX = width / 2F
                pivotY = height / 2F
                viewTreeObserver.removeOnGlobalLayoutListener(this)
            }
        })
    }
    return textView
}

方式3：手动转换触摸坐标（复杂场景） #

若必须使用Compose的scale修饰符，可在AndroidView的update回调中拦截触摸事件，手动转换坐标：

AndroidView(
    modifier = Modifier.fillMaxSize(),
    factory = { generateTextView() },
    update = { view ->
        view.setOnTouchListener { v, event ->
            // 将触摸坐标按缩放比例反向转换
            val scaledX = event.x / 1.5F
            val scaledY = event.y / 1.5F
            val transformedEvent = MotionEvent.obtain(
                event.downTime,
                event.eventTime,
                event.action,
                scaledX,
                scaledY,
                event.metaState
            )
            val result = v.onTouchEvent(transformedEvent)
            transformedEvent.recycle()
            result
        }
    }
)

此方式需处理所有触摸事件类型（如ACTION_MOVE、ACTION_UP），适合特殊定制场景。

内容的提问来源于stack exchange，提问作者ZWY