如何将 MutableState<Boolean> 传递给 Jetpack Compose 中的可组合项

Question

在我正在开发的应用程序中，我无法将

MutableState<Boolean>

从父可组合项传递到子可组合项。我想使用

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 // the error occurs here 
        )
    }
}


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

我收到的错误消息是：

类型不匹配：推断类型为布尔值，但预期为 MutableState

我猜测问题出在将

scrollEnabled

（即

MutableState<Boolean>

）传递给子可组合项

UserButtons

时；由于某种原因，即使它被声明为

Boolean

，它也会被检测为正常

MutableState<Boolean>

。

如何确保参数被正确检测为

MutableState

？

Answer 1

Jetpack Compose 使用“单向数据流”模式。这意味着

数据仅使用函数参数沿可组合层次结构向下流动

• 事件使用回调函数在可组合层次结构中向上流动
这意味着您不应该将 MutableState 传递给子 Composable，因为子 Composable 应该修改数据，然后向上流到父级。相反，使用回调函数通知父 Composable 更新

scrollEnabled

变量的值：

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

在您的父可组合项中，像这样调用 UserButtons 可组合项：

UserButtons(
    scrollEnabled = scrollEnabled,
    updateScrollEnabled = { updatedValue
        scrollEnabled = updatedValue
    }
)