如何通过委托使用 mutableState 但使其可传递给另一个函数？

Question

我有一个按钮可以切换显示和隐藏文本的组合功能

@Composable
fun Greeting() {
    Column {
        val toggleState = remember {
            mutableStateOf(false)
        }
        AnimatedVisibility(visible = toggleState.value) {
            Text(text = "Edit", fontSize = 64.sp)
        }
        ToggleButton(toggleState = toggleState) {}
    }
}

@Composable
fun ToggleButton(modifier: Modifier = Modifier,
                 toggleState: MutableState<Boolean>,
                 onToggle: (Boolean) -> Unit) {


    TextButton(
        modifier = modifier,
        onClick = {
            toggleState.value = !toggleState.value
            onToggle(toggleState.value)
        })
    { Text(text = if (toggleState.value) "Stop" else "Start") }
}

我不喜欢代码的一件事是 val toggleState = remember { ... }。
我更喜欢val toggleState by remember {...}

但是，如果我这样做，如下所示，我无法将 toggleState 传递给 ToggleButton，因为 ToggleButton 想要 mutableState<Boolean> 而不是 [=18] =].因此它会出错。


@Composable
fun Greeting() {
    Column {
        val toggleState by remember {
            mutableStateOf(false)
        }
        AnimatedVisibility(visible = toggleState) {
            Text(text = "Edit", fontSize = 64.sp)
        }
        ToggleButton(toggleState = toggleState) {} // Here will have error
    }
}

@Composable
fun ToggleButton(modifier: Modifier = Modifier,
                 toggleState: MutableState<Boolean>,
                 onToggle: (Boolean) -> Unit) {


    TextButton(
        modifier = modifier,
        onClick = {
            toggleState.value = !toggleState.value
            onToggle(toggleState.value)
        })
    { Text(text = if (toggleState.value) "Stop" else "Start") }
}

如何在仍然使用 val toggleState by remember {...} 的情况下修复上述错误？

Answer 1

Compose 中的状态提升是一种将状态移动到可组合项的调用方以使可组合项无状态的模式。 Jetpack Compose 中状态提升的一般模式是用两个参数替换状态变量：

value: T: 要显示的当前值
onValueChange: (T) -> Unit: 请求更改值的事件，其中 T 是建议的新值

你可以这样做

// stateless composable is responsible 
@Composable
fun ToggleButton(modifier: Modifier = Modifier,
                 toggle: Boolean,
                 onToggleChange: () -> Unit) {
    
    TextButton(
        onClick = onToggleChange,
        modifier = modifier
    )
    { Text(text = if (toggle) "Stop" else "Start") }

}

和

@Composable
fun Greeting() {

        var toggleState by remember { mutableStateOf(false) }

        AnimatedVisibility(visible = toggleState) {
            Text(text = "Edit", fontSize = 64.sp)
        }
        ToggleButton(toggle = toggleState,
            onToggleChange = { toggleState = !toggleState }
        )
}

您还可以添加仅负责保存内部状态的相同有状态可组合项：

@Composable
fun ToggleButton(modifier: Modifier = Modifier) {

    var toggleState by remember { mutableStateOf(false) }

    ToggleButton(modifier,
        toggleState,
        onToggleChange = {
            toggleState = !toggleState
        },
    )
}

如何通过委托使用 mutableState 但使其可传递给另一个函数？

How to use by delegate for mutableState yet make it passable to another function?

android

android-jetpack-compose