Compose中的状态

大家好，今天我们来讲一下Compose中的状态。我们之前说过，应用简单来说就是界面+数据。所以我们今天就一起来看一下Compose是怎么记录数据的。Compose中通过State可以来记录数据，记录和程序界面的交互。我们一起来新建一个简单的计数器程序，工程命名为ComposeLesson2。这个计数器程序如下图：

图中有一个文本用于显示计数的值，一个按钮用来实现加1功能。

我们来看一下下面不用State的代码：

kotlin 复制代码

@Composable
fun AddNumber() {
    var num = 0 //Don't do this
    Row {
        Text(
            num.toString(),
            modifier = Modifier.padding(10.dp)
        )

        ElevatedButton(
            onClick = {
                num += 1
            },
            modifier = Modifier.padding(start = 10.dp)
        ) {
            Text("+1")
        }
    }
}

这时候我们点击+1按钮是没有反应的。

上述的代码无法按预期发挥作用。为变量num设置不同的值不会使Compose检测到其状态更改，因此不会产生任何效果。

同时，上述函数中第一行将num设置为0. 可组合函数在界面中可以按照任意顺序频繁执行，每一次进入该函数都会使num变量被重新赋值为0.

如需向可组合函数中添加内部状态，可以使用mutableStateOf函数。该函数可以让Compose重组读取最新状态。

同时，为了使重组后能记住之前的状态，我们需要使用remember函数。

使用remember后的函数的程序如下：

scss 复制代码

@Composable
fun AddNumber() {
    var num by remember {
        mutableStateOf(0)
    }
    Row {
        Text(
            num.value.toString(),
            modifier = Modifier.padding(10.dp)
        )

        ElevatedButton(
            onClick = {
                num.value += 1
            },
            modifier = Modifier.padding(start = 10.dp)
        ) {
            Text("+1")
        }
    }
}

上述程序中，我们用到了remember和mutableStateOf，这时再取num的值时就需要用.value。

为了方便，我们可以使用by关键字来实现属性委托：

我们把=改成by，最终程序如下：

scss 复制代码

@Composable
fun AddNumber() {
    var num by remember {
        mutableStateOf(0)
    }
    Row {
        Text(
            num.toString(),
            modifier = Modifier.padding(10.dp)
        )

        ElevatedButton(
            onClick = {
                num += 1
            },
            modifier = Modifier.padding(start = 10.dp)
        ) {
            Text("+1")
        }
    }
}

运行后我们再来点击一下+1按钮，就可以看到实现了+1的效果。

本文的代码已提交到以下github地址：

github.com/gucheng3116...