Compose中如何将可变变量作为对象成员存储？解决光标同步问题

问题分析 #

你遇到的核心问题有两个：

1. @Composable不能标记构造函数：Compose的注解仅适用于函数、lambda等可组合单元，构造函数不属于这个范畴，因此会触发报错。
2. 普通变量无法触发重组：用普通float变量存储偏移量时，变量更新不会通知Compose进行UI重组，导致光标位置无法同步更新。

修正方案 #

方案一：封装类+Composable工厂方法 #

保留类的封装结构，通过伴生对象的Composable方法初始化状态，确保状态被remember持有，更新时能触发UI重组：

class Trackpad(
    private val xOffset: MutableFloatState,
    private val yOffset: MutableFloatState
) {
    @Composable
    fun Pad(modifier: Modifier) {
        Surface(
            modifier = modifier
                .fillMaxWidth()
                .pointerInput(Unit) {
                    detectDragGestures { change, dragAmount ->
                        change.consume()
                        // 更新状态值，触发重组
                        xOffset.floatValue += dragAmount.x * 3
                        yOffset.floatValue += dragAmount.y * 3
                    }
                },
            color = Color.Cyan
        ) {}
    }

    @Composable
    fun Cursor() {
        Text(
            text = "Will be cursor",
            modifier = Modifier.offset {
                // 直接读取状态值，状态变化时自动更新UI
                IntOffset(xOffset.floatValue.roundToInt(), yOffset.floatValue.roundToInt())
            }
        )
    }

    companion object {
        // 用Composable工厂方法创建实例，确保状态在Compose上下文被remember
        @Composable
        fun create(): Trackpad {
            val xOffset = remember { mutableFloatStateOf(0f) }
            val yOffset = remember { mutableFloatStateOf(0f) }
            return Trackpad(xOffset, yOffset)
        }
    }
}

使用方式：

@Composable
fun TrackpadDemo() {
    val trackpad = Trackpad.create()
    Column {
        trackpad.Pad(modifier = Modifier.height(200.dp))
        trackpad.Cursor()
    }
}

方案二：状态提升（Compose最佳实践） #

如果不需要强制封装成类，推荐使用Compose的状态提升模式，将状态放在父组件中，子组件仅负责UI渲染和事件回调，更利于复用和测试：

@Composable
fun TrackpadDemo() {
    // 父组件持有状态，确保状态被remember
    val xOffset = remember { mutableFloatStateOf(0f) }
    val yOffset = remember { mutableFloatStateOf(0f) }

    Column {
        TrackpadPad(
            modifier = Modifier.height(200.dp),
            onDrag = { dx, dy ->
                xOffset.floatValue += dx * 3
                yOffset.floatValue += dy * 3
            }
        )
        TrackpadCursor(x = xOffset.floatValue, y = yOffset.floatValue)
    }
}

@Composable
fun TrackpadPad(modifier: Modifier, onDrag: (dx: Float, dy: Float) -> Unit) {
    Surface(
        modifier = modifier
            .fillMaxWidth()
            .pointerInput(Unit) {
                detectDragGestures { change, dragAmount ->
                    change.consume()
                    onDrag(dragAmount.x, dragAmount.y)
                }
            },
        color = Color.Cyan
    ) {}
}

@Composable
fun TrackpadCursor(x: Float, y: Float) {
    Text(
        text = "Will be cursor",
        modifier = Modifier.offset { IntOffset(x.roundToInt(), y.roundToInt()) }
    )
}

原代码问题说明 #

• 构造函数添加@Composable注解违反Compose规则，构造函数不属于可组合元素范畴。
• 原代码中Cursor函数里的mxof和myof用remember初始化后，只会保留初始值，后续xofs/yofs的变化不会同步更新这些变量。
• 普通float变量不是Composable状态，更新时无法触发UI重组，因此光标位置不会变化。

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