Jetpack Compose中传递可变状态参数后无法修改值的问题

你当前的问题在于直接传递了Boolean类型的不可变值，子组件无法直接修改父组件的状态——这不符合Compose的**状态提升（State Hoisting）**原则。下面是几种可行的解决方式：

方案1：传递状态值+修改回调（推荐） #

这是最符合Compose设计理念的方式：父组件保留状态的所有权，子组件只负责触发事件，通过回调通知父组件修改状态。

修改后的代码示例：

@Composable
fun MyScreen(...) {
    var showBottomSheet by remember { mutableStateOf(false) }

    Scaffold(...) {
        MyBottomSheet(
            showBottomSheet = showBottomSheet,
            onDismiss = { showBottomSheet = false }
        )
    }
}

@Composable
fun MyBottomSheet(
    showBottomSheet: Boolean,
    onDismiss: () -> Unit // 用于通知父组件关闭弹窗的回调
) {
    val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)

    if (showBottomSheet) {
        ModalBottomSheet(
            onDismissRequest = onDismiss,
            sheetState = sheetState
        ) {
            Button(onClick = onDismiss) {
                Text("Hide bottom sheet")
            }
        }
    }
}

这种方式让状态的唯一可信源留在父组件，避免状态分散导致的逻辑混乱，同时子组件的复用性更强——只要传入不同的回调，就能适配不同的业务逻辑。

方案2：直接传递MutableState实例 #

如果是简单场景，你可以直接把MutableState<Boolean>对象传给子组件，让它直接修改状态的value属性。不过这种方式会让子组件和父组件的状态耦合，降低复用性，建议谨慎使用。

代码示例：

@Composable
fun MyScreen(...) {
    val showBottomSheet = remember { mutableStateOf(false) }

    Scaffold(...) {
        MyBottomSheet(showBottomSheet = showBottomSheet)
    }
}

@Composable
fun MyBottomSheet(showBottomSheet: MutableState<Boolean>) {
    val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)

    if (showBottomSheet.value) {
        ModalBottomSheet(
            onDismissRequest = { showBottomSheet.value = false },
            sheetState = sheetState
        ) {
            Button(onClick = { showBottomSheet.value = false }) {
                Text("Hide bottom sheet")
            }
        }
    }
}

方案3：封装状态逻辑（复杂场景适用） #

如果弹窗的状态逻辑比较复杂（比如除了显示隐藏还有其他状态），可以把状态和操作封装成一个类，通过remember创建实例传递给子组件，让代码更清晰。

示例：

// 封装弹窗的状态和操作
class BottomSheetController(initialVisible: Boolean) {
    val isVisible = mutableStateOf(initialVisible)

    fun hide() {
        isVisible.value = false
    }
}

// 用remember缓存控制器实例
@Composable
fun rememberBottomSheetController(initialVisible: Boolean = false): BottomSheetController {
    return remember { BottomSheetController(initialVisible) }
}

// 父组件使用
@Composable
fun MyScreen(...) {
    val bottomSheetController = rememberBottomSheetController()

    Scaffold(...) {
        MyBottomSheet(controller = bottomSheetController)
    }
}

// 子组件使用
@Composable
fun MyBottomSheet(controller: BottomSheetController) {
    val sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)

    if (controller.isVisible.value) {
        ModalBottomSheet(
            onDismissRequest = { controller.hide() },
            sheetState = sheetState
        ) {
            Button(onClick = { controller.hide() }) {
                Text("Hide bottom sheet")
            }
        }
    }
}

这种方式把状态操作从UI组件中剥离出来，让组件更专注于UI渲染，也方便在多个组件间复用状态逻辑。

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