Jetpack Compose中如何正确传递MutableState<Boolean>至子Composable？

嗨，我来帮你搞定这个问题！你遇到的类型不匹配错误，根源其实是Compose里委托属性by的特性——当你用var scrollEnabled by remember { mutableStateOf(true) }时，scrollEnabled已经被委托成了Boolean类型的变量，而不是原始的MutableState<Boolean>对象。所以直接把它传给子组件时，自然会出现“期望MutableState但传入Boolean”的错误。

下面给你几种可行的解决方案，你可以根据场景选择：

方案一：直接传递原始的MutableState对象 #

如果你就是想把MutableState本身传给子组件，只需要调整父组件里的变量声明，去掉by关键字，直接持有MutableState引用：

@OptIn(UnstableApi::class)
@Composable
fun ParentComposable(
    screenHeight: Dp,
    barHeight: Dp,
) {
    // 直接持有MutableState对象，不用by委托
    val scrollEnabled = remember { mutableStateOf(true) }

    Column(
        modifier = Modifier
            .padding(top = barHeight)
            .height(screenHeight - barHeight)
            .fillMaxSize()
    ) {
        UserButtons(scrollEnabled = scrollEnabled) // 现在传递的是正确的MutableState对象
    }
}

@Composable
fun UserButtons(
    scrollEnabled: MutableState<Boolean>
) {
    IconButton(
        onClick = {
            scrollEnabled.value = false
            println("Scroll has been deactivated")
        }) {}
}

这种方式下，父组件里如果要读取状态值，需要用scrollEnabled.value，子组件也能正常修改value属性。

方案二：保留委托属性，同时传递原始State #

如果你不想改变父组件里使用by的习惯，可以单独保存原始的MutableState引用，兼顾使用便利性和正确传递：

@OptIn(UnstableApi::class)
@Composable
fun ParentComposable(
    screenHeight: Dp,
    barHeight: Dp,
) {
    // 先保存原始的MutableState对象
    val scrollEnabledState = remember { mutableStateOf(true) }
    // 再用by委托成Boolean变量，方便父组件内直接使用
    var scrollEnabled by scrollEnabledState

    Column(
        modifier = Modifier
            .padding(top = barHeight)
            .height(screenHeight - barHeight)
            .fillMaxSize()
    ) {
        UserButtons(scrollEnabled = scrollEnabledState) // 传递原始的State对象
    }
}

方案三：遵循Compose推荐的状态提升（更优雅） #

其实在Compose的最佳实践中，更推荐状态提升的模式——子组件不需要持有MutableState，只需要接收状态值和修改状态的回调。这样可以让状态的所有权更清晰，也更符合单向数据流的原则：

@OptIn(UnstableApi::class)
@Composable
fun ParentComposable(
    screenHeight: Dp,
    barHeight: Dp,
) {
    var scrollEnabled by remember { mutableStateOf(true) }

    Column(
        modifier = Modifier
            .padding(top = barHeight)
            .height(screenHeight - barHeight)
            .fillMaxSize()
    ) {
        // 传递状态值+修改回调
        UserButtons(
            scrollEnabled = scrollEnabled,
            onScrollEnabledChange = { scrollEnabled = it }
        )
    }
}

@Composable
fun UserButtons(
    scrollEnabled: Boolean,
    onScrollEnabledChange: (Boolean) -> Unit
) {
    IconButton(
        onClick = {
            onScrollEnabledChange(false)
            println("Scroll has been deactivated")
        }) {}
}

这种方式下，子组件完全不依赖MutableState的实现，只专注于UI交互和通知父组件修改状态，代码的可维护性和复用性会更好。

备注：内容来源于stack exchange，提问作者Royal