使用 State 托管更改 Jetpack Compose 中的变量

Question

我想更改 jetpack compose 中变量的值。 我正在尝试将Stateful和Stateless与某些代码一起使用，但它在增加值时遇到了一些问题。 你们能指导我吗？

ItemColorStateful

@Composable
fun ItemColorStateful() {
    var index by remember { mutableStateOf(-1) }
    Column(modifier = Modifier.fillMaxSize()) {
        Text(text = "Different Color")
        ButtonScopeStateless(
            index = { index },
            onIndexChange = {
                index = it
            }
        )
    }
}

ButtonScope无状态

@Composable
fun ButtonScopeStateless(
    index: () -> Int,
    onIndexChange: (Int) -> Unit,
) {
    Button(onClick = { onIndexChange(index()++) }) {
        Text(text = "Click Me $index")
    }
}

我在index()++上遇到错误。

Answer 1

使用state 提升无状态可组合项的一般模式应该有两个参数：

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

在你的情况下：

• index: Int ，
• onIndexChange: (Int) -> Unit

您还应该尊重封装属性：只有有状态的可组合项才能修改其 state。它完全是内部的。
使用onIndexChange(index+1)而不是onIndexChange(index()++) 。 这样 state 就被ItemColorStateful修改了。

您可以使用：

@Composable
fun ItemColorStateful() {
    var index by remember { mutableStateOf(-1) }
    Column(modifier = Modifier.fillMaxSize()) {
        Text(text = "Different Color")
        ButtonScopeStateless(
            index = index ,
            onIndexChange = {
                index = it
            }
        )
    }
}

@Composable
fun ButtonScopeStateless(
    index:  Int,  //value=the current value to display
    onIndexChange: (Int) -> Unit //an event that requests the value to change, where Int is the proposed new value
) {
    Button(onClick = { onIndexChange(index+1) }) {
        Text(text = "Click Me $index")
    }
}

Answer 2

ItemColorStateful

    @Composable
    fun ItemColorStateful() {
    var index by remember { mutableStateOf(-1) }
    Column(modifier = Modifier.fillMaxSize()) {
        Text(text = "Different Color")
        ButtonScopeStateless(
            index = index ,
            onIndexChange = {
                index++
            }
        )
    }
}

ButtonScope无状态

@Composable
fun ButtonScopeStateless(
    index: Int,
    onIndexChange: () -> Unit,
) {
    Button(onClick = {
        onIndexChange()
    }) {
        Text(text = "Click Me $index")
    }
}