Compose实现全局可拖拽悬浮UI：解决触摸遮挡与裁剪问题

问题分析 #

你当前实现的50dp可拖拽悬浮气泡存在两个核心问题：

• 使用fillMaxSize()修饰符会让ComposeView占据整个屏幕，拦截所有触摸事件，导致其他应用/系统界面无法响应触摸操作。
• 不使用fillMaxSize()时，ComposeView的大小固定为50dp×50dp，通过Compose内部offset移动气泡时，超出这个范围的部分会被View的裁剪区域遮挡。

解决方案一：直接更新Window位置（推荐） #

这种方案通过修改WindowManager的布局参数来移动整个ComposeView，从根源避免裁剪和触摸遮挡问题。

修改后的Composable代码

@Composable
fun BubbleView(
    onDrag: (dx: Float, dy: Float) -> Unit
) {
    Box(
        modifier = Modifier
            .size(50.dp)
            .background(Color(100, 9, 100))
            .pointerInput(Unit) {
                detectDragGestures { change, dragAmount ->
                    change.consume()
                    onDrag(dragAmount.x, dragAmount.y)
                }
            },
        contentAlignment = Alignment.Center
    ) {
        Text("Hello Compose!", color = Color.White)
    }
}

ComposeView与WindowManager配置代码

val context = applicationContext
val bubbleView = ComposeView(context).apply {
    setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
    setContent {
        MaterialTheme {
            BubbleView { dx, dy ->
                // 拖拽时更新Window的位置参数
                val params = layoutParams as WindowManager.LayoutParams
                params.x += dx.toInt()
                params.y += dy.toInt()
                (context.getSystemService(WINDOW_SERVICE) as WindowManager).updateViewLayout(this, params)
            }
        }
    }
}

// 配置WindowManager参数
val windowManager = context.getSystemService(WINDOW_SERVICE) as WindowManager
val layoutParams = WindowManager.LayoutParams().apply {
    type = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
        WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY
    } else {
        WindowManager.LayoutParams.TYPE_PHONE
    }
    // 关键flags：允许非气泡区域触摸透传，无布局限制
    flags = WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL or
            WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS or
            WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE // 可选，不需要焦点时添加
    width = WindowManager.LayoutParams.WRAP_CONTENT
    height = WindowManager.LayoutParams.WRAP_CONTENT
    x = 100 // 初始X坐标
    y = 100 // 初始Y坐标
}

windowManager.addView(bubbleView, layoutParams)

关键说明

• FLAG_NOT_TOUCH_MODAL：让气泡之外的触摸事件正常传递给下层应用/系统界面，避免遮挡。
• WRAP_CONTENT：ComposeView大小严格匹配气泡尺寸，无多余触摸拦截区域。
• 直接更新Window坐标：整个ComposeView跟随拖拽移动，不会出现元素裁剪问题。

解决方案二：Compose内部偏移（适合复杂场景） #

如果需要在气泡周围添加其他元素或实现复杂动画，可以让ComposeView占满屏幕，但通过配置保证触摸透传。

修改后的Composable代码

@Composable
fun OverlayScreen(
    screenSize: Size
) {
    var offsetX by remember { mutableStateOf(0f) }
    var offsetY by remember { mutableStateOf(0f) }
    
    // 根布局使用屏幕大小，背景透明
    Box(
        modifier = Modifier
            .size(screenSize.width.dp, screenSize.height.dp)
            .background(Color.Transparent)
    ) {
        Box(
            modifier = Modifier
                .size(50.dp)
                .offset { IntOffset(offsetX.roundToInt(), offsetY.roundToInt()) }
                .background(Color(100, 9, 100))
                .pointerInput(Unit) {
                    detectDragGestures { change, dragAmount ->
                        change.consume()
                        offsetX += dragAmount.x
                        offsetY += dragAmount.y
                    }
                },
            contentAlignment = Alignment.Center
        ) {
            Text("Hello Compose!", color = Color.White)
        }
    }
}

ComposeView与WindowManager配置代码

val context = applicationContext
val displayMetrics = context.resources.displayMetrics
// 计算屏幕尺寸（dp单位）
val screenSize = Size(
    displayMetrics.widthPixels / displayMetrics.density,
    displayMetrics.heightPixels / displayMetrics.density
)

val bubbleOverlay = ComposeView(context).apply {
    setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed)
    setContent {
        MaterialTheme {
            OverlayScreen(screenSize = screenSize)
        }
    }
}

// 配置WindowManager参数
val windowManager = context.getSystemService(WINDOW_SERVICE) as WindowManager
val layoutParams = WindowManager.LayoutParams().apply {
    type = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
        WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY
    } else {
        WindowManager.LayoutParams.TYPE_PHONE
    }
    flags = WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL or
            WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
    width = WindowManager.LayoutParams.MATCH_PARENT
    height = WindowManager.LayoutParams.MATCH_PARENT
    format = PixelFormat.TRANSLUCENT // 设置透明背景
}

windowManager.addView(bubbleOverlay, layoutParams)

关键说明

• 根布局占满屏幕但背景透明，配合FLAG_NOT_TOUCH_MODAL确保仅气泡区域拦截触摸。
• 气泡通过Compose内部offset移动，因根布局足够大，不会出现裁剪问题。

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