我可以为可组合函数切换状态变量吗？

Question

我有一个简单的可组合函数，如下所示

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            var isGrayScale by remember { mutableStateOf(false) }
            val colorChoice by remember(isGrayScale) {
                mutableStateOf(
                    if (isGrayScale)
                        ColorChoice(onColor = Color.White, offColor = Color.Black)
                    else
                        ColorChoice(onColor = Color.Green, offColor = Color.Red)
                )
            }
            Box(modifier = Modifier.fillMaxSize().background(colorChoice.color))
            Button(
                modifier = Modifier.padding(64.dp).fillMaxSize(),
                onClick = { colorChoice.toggle() }) {
                Text(
                    text = if (colorChoice.isOn) "On" else "Off",
                    color = colorChoice.color,
                    fontSize = 48.sp
                )
            }
            Switch(
                modifier = Modifier.padding(64.dp).fillMaxWidth(),
                checked = isGrayScale,
                onCheckedChange = {isGrayScale = !isGrayScale}
            )
        }
    }

    class ColorChoice(
        private val onColor: Color,
        private val offColor: Color
    ) {
        var isOn by mutableStateOf(false)
        var color by mutableStateOf(offColor)
        fun toggle() {
            isOn = !isOn
            color = if(isOn) {
                onColor
            } else {
                offColor
            }
        }
    }
}

开关会将可组合函数引用更改为不同的状态变量。切换后，当状态变量发生变化时，可组合函数不再重构。

不支持更改可组合函数的状态变量吗？或者我做错了什么。

Answer 1

经过一番调查，显然问题在于onClick = { colorChoice.toggle() }，当colorChoice 更改时，lambda 仍然存储旧的`colorChoice。

要更正它，请将onClick = { colorChoice.toggle() } 替换为onClick = colorChoice::toggle。这确保onClick 将获得最新的colorChoice

完整代码如下

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            var isGrayScale by remember { mutableStateOf(false) }
            val colorChoice by remember(isGrayScale) {
                mutableStateOf(
                    if (isGrayScale)
                        ColorChoice(onColor = Color.White, offColor = Color.Black)
                    else
                        ColorChoice(onColor = Color.Green, offColor = Color.Red)
                )
            }
            Box(modifier = Modifier.fillMaxSize().background(colorChoice.color))
            Button(
                modifier = Modifier.padding(64.dp).fillMaxSize(),
                onClick = colorChoice::toggle) {
                Text(
                    text = if (colorChoice.isOn) "On" else "Off",
                    color = colorChoice.color,
                    fontSize = 48.sp
                )
            }
            Switch(
                modifier = Modifier.padding(64.dp).fillMaxWidth(),
                checked = isGrayScale,
                onCheckedChange = {isGrayScale = !isGrayScale}
            )
        }
    }

    class ColorChoice(
        private val onColor: Color,
        private val offColor: Color
    ) {
        var isOn by mutableStateOf(false)
        var color by mutableStateOf(offColor)
        fun toggle() {
            isOn = !isOn
            color = if(isOn) {
                onColor
            } else {
                offColor
            }
        }
    }
}