20240219

State的使用

在Compose中，我们可以使用State来管理数据，State是一个可以被观察的数据，当数据发生变化时，State会通知所有的观察者。我们可以使用State来管理UI的状态，比如显示和隐藏组件、改变组件的样式等。

什么时候使用State

当我们需要管理UI的状态时，我们可以使用State。比如，当我们需要显示和隐藏一个组件时，我们可以使用State来管理组件的可见性。当我们需要改变组件的样式时，我们可以使用State来管理组件的样式。

用或者不用State的例子

下面是一个使用State的例子，我们使用State来管理一个Text的可见性：

@Composable
fun Example() {
    val visible = remember { mutableStateOf(true) }
    if (visible.value) {
        Text("Hello, World!")
    }
}

下面是一个不使用State的例子，我们使用if语句来管理一个Text的可见性：

@Composable
fun Example() {
    val visible = true
    if (visible) {
        Text("Hello, World!")
    }

}

在这个例子中，我们使用State来管理Text的可见性，这样当visible的值发生变化时，Text会自动更新。而在不使用State的例子中，我们需要手动更新Text的可见性。

用ViewModel管理State

在Compose中，我们可以使用ViewModel来管理State。ViewModel是一个用来管理UI状态的类，它包含了所有的数据和状态，我们可以通过viewModel函数来获取ViewModel的实例。下面是一个使用ViewModel的例子：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ExpenseRecordInputSheet(viewModel: ExpenseTrackerViewModel) {
    val inputName = viewModel.inputName
    val inputMoney = viewModel.inputMoney
    Column(modifier = Modifier.padding(20.dp)) {
        TextField(
            value = inputName.value,
            onValueChange = { inputName.value = it },
            label = { Text("Name") },
            modifier = Modifier.fillMaxWidth().align(Alignment.CenterHorizontally).padding(10.dp)
        )
        TextField(
            value = inputMoney.value,
            onValueChange = { inputMoney.value = it },
            label = { Text("Money") },
            modifier = Modifier.fillMaxWidth().align(Alignment.CenterHorizontally).padding(10.dp)
            //todo add filter to only allow numbers
        )
        Button(
            onClick = { viewModel.submitData() },
            modifier = Modifier.fillMaxWidth().align(Alignment.CenterHorizontally).padding(10.dp)

        ) {
            Text("Submit")
        }
    }
}

在这个例子中，我们使用ViewModel来管理TextField的值，当TextField的值发生变化时，ViewModel会自动更新。