Compose与自定义View混合：自定义View绘制、触摸事件转发、invalidate触发

4.1 混合架构原理

在 Compose 应用中嵌入传统 View 系统组件（如 Canvas 绘制的自定义 View）时，需要理解两个渲染管线之间的协作边界。Compose 使用 LayoutNode → Skia 直接渲染，而传统 View 依赖 ViewRootImpl → Surface 的测量、布局、绘制三步流程。通过 AndroidView 包裹的自定义 View 在 Compose 布局解析后，作为一个“黑盒”节点插入到 LayoutNode 树中，其内部的 Canvas 绘制、触摸事件处理仍遵循 View 系统的原始规则。

4.2 自定义View绘制集成

使用 AndroidView 将自定义 View 嵌入 Compose 时，最关键的是在 factory 中创建 View 实例并初始化 Canvas 相关逻辑，然后在 update 回调中接收 Compose 传过来的状态数据。

// Compose 侧代码片段
@Composable
fun CanvasWithCustomView(
    dataModel: DataModel,
    modifier: Modifier = Modifier
) {
    AndroidView(
        modifier = modifier.fillMaxWidth().height(200.dp),
        factory = { context ->
            MyCanvasView(context).apply {
                // 初始化时设置内部监听器，将 View 内部状态通知回 Compose
                setOnDataChangeListener { newData ->
                    // 触发 Compose 状态更新
                }
            }
        },
        update = { view ->
            // 当 dataModel 变化时，更新 View 内部数据并刷新绘制
            view.updateData(dataModel)
        }
    )
}

// 自定义 View 核心绘制
class MyCanvasView(context: Context) : View(context) {
    private var paint: Paint = Paint(Paint.ANTI_ALIAS_FLAG)
    private var data: DataModel = DataModel()
    
    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        // 使用 Canvas 进行高性能自定义绘制
        paint.color = Color.BLUE
        canvas.drawCircle(width / 2f, height / 2f, 80f, paint)
        paint.color = Color.WHITE
        paint.textSize = 24f
        canvas.drawText(data.label, width / 2f - 30f, height / 2f + 8f, paint)
    }
    
    fun updateData(newData: DataModel) {
        data = newData
        invalidate() // 触发 onDraw 重新执行
    }
}

4.3 触摸事件转发机制

在混合界面中，触摸事件的分发需要特别注意：Compose 的 pointerInput 与 View 的 onTouchEvent 是两个独立的事件处理体系。若自定义 View 需要截获触摸事件（如拖拽、手势绘制），必须在 AndroidView 中显式声明 touchEvent 或重写 View 的 onTouchEvent。

// 在 AndroidView 中处理触摸事件（Compose 端消费）
AndroidView(
    modifier = Modifier.pointerInput(Unit) {
        // Compose 端触摸逻辑，优先执行
        detectTapGestures { offset ->
            // 处理点击
        }
    },
    factory = { context -> MyTouchView(context) },
    touchEvent = { view, motionEvent ->
        // 当 Compose 端未消费事件时，此回调被调用
        when (motionEvent.action) {
            MotionEvent.ACTION_DOWN -> {
                // 自定义逻辑
                true // 消费此事件
            }
            else -> false
        }
    }
)

// 自定义 View 内部的触摸事件
class MyTouchView(context: Context) : View(context) {
    override fun onTouchEvent(event: MotionEvent): Boolean {
        // 若 AndroidView 的 touchEvent 返回 false，则事件会到这里
        return super.onTouchEvent(event)
    }
}

4.4 invalidate 触发的性能优化

invalidate() 虽然简单，但频繁调用会导致整个 View 区域重绘。在混合场景下，不恰当的 invalidate 可能触发 Compose 端额外的重组，造成帧率下降。应遵循以下原则：

// 带脏矩形优化的更新方式
class OptimizedCanvasView(context: Context) : View(context) {
    private var dirtyRect: Rect? = null
    
    fun updatePartialData(region: Rect) {
        dirtyRect = region
        invalidate(region.left, region.top, region.right, region.bottom)
    }
    
    override fun onDraw(canvas: Canvas) {
        // 仅绘制 dirtyRect 区域内的内容
        val clipBounds = canvas.clipBounds
        // 绘制逻辑...
    }
}

4.5 完整集成案例：可拖拽的自定义Canvas

下面代码演示了如何在 Compose 中嵌入一个支持拖拽绘图的自定义 View，包含绘制、触摸转发和失效刷新三个核心环节：

// 1. 自定义 View 实现
class DraggableCanvasView(context: Context) : View(context) {
    private var circleX = 100f
    private var circleY = 100f
    private val radius = 50f
    private var isDragging = false
    var onPositionChanged: ((Float, Float) -> Unit)? = null
    
    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        val paint = Paint().apply {
            color = Color.parseColor("#3498db")
            style = Paint.Style.FILL
        }
        canvas.drawCircle(circleX, circleY, radius, paint)
    }
    
    override fun onTouchEvent(event: MotionEvent): Boolean {
        when (event.action) {
            MotionEvent.ACTION_DOWN -> {
                val dx = event.x - circleX
                val dy = event.y - circleY
                if (dx * dx + dy * dy <= radius * radius) {
                    isDragging = true
                    return true
                }
            }
            MotionEvent.ACTION_MOVE -> {
                if (isDragging) {
                    circleX = event.x.coerceIn(radius, width - radius)
                    circleY = event.y.coerceIn(radius, height - radius)
                    invalidate()
                    onPositionChanged?.invoke(circleX, circleY)
                    return true
                }
            }
            MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
                isDragging = false
                return true
            }
        }
        return super.onTouchEvent(event)
    }
}

// 2. Compose 端集成
@Composable
fun DraggableCircleExample() {
    var position by remember { mutableStateOf(Pair(100f, 100f)) }
    
    AndroidView(
        modifier = Modifier.fillMaxSize(),
        factory = { context ->
            DraggableCanvasView(context).apply {
                onPositionChanged = { x, y ->
                    position = Pair(x, y)
                }
            }
        },
        update = { view ->
            // 若需要回写状态到 View（可选）
        }
    )
    
    Text("当前位置: (${position.first}, ${position.second})",
         modifier = Modifier.padding(16.dp))
}

4.6 性能与稳定性优化

• 减少不必要的 invalidate： 在 update 回调中增加数据比较（如 if (oldData != newData)），只有当数据真正变化时才调用 invalidate()。
• 使用硬件加速： 确保自定义 View 的 draw 方法使用 Canvas 绘制图层合并等兼容硬件加速的 API（如 clipPath 在软件模式仍可用，但不推荐在硬件加速的 View 中频繁使用）。
• 事件冲突解决： 当 Compose 手势（如 detectHorizontalDragGestures）和 View 内拖拽同时存在时，应在 touchEvent 中判断是否需要消费事件，或通过 requestDisallowInterceptTouchEvent 禁止父层拦截。
• 内存泄漏防范： 在 DisposableEffect 或 onDetachedFromWindow 中清理 View 持有的 Drawable、Bitmap 和监听器引用。