Compose实现全局可拖拽悬浮气泡：解决触摸阻塞与裁剪问题

核心解决方案是通过配置WindowManager的特定Flag，结合精确的窗口尺寸设置，同时在Compose中处理拖拽逻辑：

关键WindowManager参数配置 #

使用以下两个核心Flag解决你的问题：

• FLAG_NOT_TOUCH_MODAL：窗口仅处理自身区域内的触摸事件，外部区域的触摸会透传给下层应用，避免阻塞全局触摸
• FLAG_LAYOUT_NO_LIMITS：允许窗口布局超出屏幕边界，拖拽气泡时不会被屏幕边缘裁剪

同时，窗口尺寸设置为气泡实际大小（24dp），而非MATCH_PARENT，确保触摸透传的精准性。

完整LayoutParams示例 #

private fun createLayoutParams(x: Int, y: Int): WindowManager.LayoutParams {
    return WindowManager.LayoutParams().apply {
        type = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            WindowManager.LayoutParams.TYPE_APPLICATION_OVERLAY
        } else {
            @Suppress("DEPRECATION")
            WindowManager.LayoutParams.TYPE_PHONE
        }
        // 设置气泡实际尺寸（24dp转像素）
        width = dpToPx(24)
        height = dpToPx(24)
        flags = WindowManager.LayoutParams.FLAG_NOT_TOUCH_MODAL or
                WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS or
                WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE // 非必需，无焦点需求时建议添加
        format = PixelFormat.TRANSLUCENT
        gravity = Gravity.TOP or Gravity.START // 基于屏幕左上角计算坐标
        this.x = x
        this.y = y
    }
}

private fun dpToPx(dp: Int): Int {
    return (dp * resources.displayMetrics.density).roundToInt()
}

Compose拖拽逻辑实现 #

在Compose中处理拖拽事件，并实时更新WindowManager的窗口坐标：

@Composable
fun FloatingBubble(onPositionChange: (Int, Int) -> Unit) {
    var offset by remember { mutableStateOf(Offset.Zero) }
    val dragState = rememberDraggableState { delta ->
        offset += delta
        // 将拖拽偏移量转换为WindowManager的坐标值
        onPositionChange(offset.x.roundToInt(), offset.y.roundToInt())
    }

    Box(
        modifier = Modifier
            .size(24.dp)
            .background(Color.Blue, CircleShape)
            .draggable(
                state = dragState,
                orientation = Orientation.Vertical,
                onDragStarted = { /* 拖拽开始时的逻辑，比如高亮气泡 */ },
                onDragStopped = { /* 拖拽结束时的逻辑，比如保存位置 */ }
            )
            .clickable { /* 可选：处理气泡点击事件 */ }
    ) {
        Icon(
            Icons.Filled.Circle,
            contentDescription = "Floating Recorder Bubble",
            tint = Color.White,
            modifier = Modifier.size(16.dp).align(Alignment.Center)
        )
    }
}

服务中整合ComposeView与WindowManager #

在前台服务中初始化ComposeView并添加到WindowManager，实时更新位置：

class FloatingRecorderService : Service() {
    private lateinit var windowManager: WindowManager
    private lateinit var composeView: ComposeView
    private var currentX = 100 // 初始X坐标
    private var currentY = 100 // 初始Y坐标

    override fun onCreate() {
        super.onCreate()
        windowManager = getSystemService(WINDOW_SERVICE) as WindowManager
        composeView = ComposeView(this).apply {
            setContent {
                FloatingBubble { newX, newY ->
                    updateBubblePosition(newX, newY)
                }
            }
        }
        // 添加初始视图
        windowManager.addView(composeView, createLayoutParams(currentX, currentY))
    }

    private fun updateBubblePosition(newX: Int, newY: Int) {
        currentX = newX
        currentY = newY
        val params = composeView.layoutParams as WindowManager.LayoutParams
        params.x = currentX
        params.y = currentY
        // 更新窗口位置
        windowManager.updateViewLayout(composeView, params)
    }

    // 省略createLayoutParams和dpToPx方法（同上文）

    override fun onBind(intent: Intent): IBinder? = null

    override fun onDestroy() {
        super.onDestroy()
        windowManager.removeView(composeView)
    }
}

注意事项 #

1. 确保已申请ACTION_MANAGE_OVERLAY_PERMISSION权限，且服务已启动为前台服务（避免被系统后台杀死）
2. FLAG_NOT_FOCUSABLE：如果气泡不需要获取输入焦点（比如没有编辑框），建议添加该Flag，进一步优化触摸透传体验
3. 坐标计算：由于使用Gravity.TOP or Gravity.START，WindowManager的x/y是相对于屏幕左上角的偏移量，拖拽时直接传递即可

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