Android Jetpack Compose 中的状态管理
在 Android 中使用 Jetpack Compose,并希望使用最新更新的数据即时更新 UI。这可以通过使用 Jetpack Compose 的状态管理来处理。本教程将教您如何在 Jetpack Compose 中管理状态。我们会发现,
- 在 Jetpack Compose 中,什么是状态?
- 重构函数如何?
- 可以通过多种方式管理撰写状态。
在 Jetpack Compose 中,什么是状态?
通常,状态是包含映射到一个或多个小部件的数据的对象。我们可以使用状态对象中的值来更新小部件中显示的数据。状态的值可以在运行时更改,这允许我们使用新数据更新小部件。 Jetpack Compose 中的可组合项会根据状态值进行自我更新。当值改变时,可组合函数只重新组合数据已改变的可组合,而忽略其他。
GeekTip: #1 The composable in Jetpack Compose are subscribed to a state, and when the value of the state is updated, the value of all the composable who are subscribed to it is also updated. All three texts are subscribed to a state in this case, and when the value of state changes, the text in these three is also updated.
当我们重构 UI 时,UI 树不会重绘自身,而只会更新特定的可组合对象,因为重绘整个 UI 将是一项非常昂贵的任务。但它如何确定要更新哪些堆肥? Jetpack Compose 基于 Positional Memoization 的概念,这是一种优化程序函数调用并返回缓存结果的技术。当我们第一次在 Compose 中绘制 UI 时,它会缓存 UI 树中的所有可组合项。
可以通过多种方式管理撰写状态
我们可以通过两种方式管理 Jetpack Compose 中的状态。
- MutableState – 在这种情况下,状态存储执行时的值,如果订阅了任何可组合项,则可组合项会在其更改时更新该值。
- 模型——我们使用模型作为任何类的注释,以帮助我们更新 UI。
现在让我们看看如何使用它们。我们将看一个包含 MutableState 和 Model 的示例。但首先,让我们创建一个应用程序并启动并运行它。我们的主要活动如下:
Kotlin
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
SomeUI {
GFG()
}
}
}
@Composable
fun GFG() {
}
}
Kotlin
@Composable
private fun setupStateUsingState() {
Column {
Title(
title = { Text(text = "GFGManagement") }
)
Display(
someVal= // set new value
)
Button(onClick = {
// update value
}) {
Text(text = "GFG Course Taken")
}
}
}
Kotlin
@Composable
private fun setupStateUsingModel() {
Column {
TopAppBar(
title = { Text(text = "Course Management") }
)
SomeBubble(
text = // set new value
)
Button(onClick = {
// update value
}) {
Text(text = "Display Course")
}
}
}
Kotlin
@Composable
private fun setupStateUsingModel() {
val counter = Counter()
Column {
TitleBar(
title = { Text(text = "Course Management") }
)
Theme(
bubble = counter.value.toString()
)
Button(onClick = {
counter.value += 5
}) {
Text(text = "Click to view courses")
}
}
}
我们将在这个 App 可组合函数中更新我们的状态。我们想在这个应用程序中创建一个文本和一个按钮。每单击一次按钮,文本的值就会增加 5。
那么,让我们开始实施吧。
在 Compose 中使用 MutableState
首先,我们将创建一个名为的可组合函数,
setupStateUsingState()
科特林
@Composable
private fun setupStateUsingState() {
Column {
Title(
title = { Text(text = "GFGManagement") }
)
Display(
someVal= // set new value
)
Button(onClick = {
// update value
}) {
Text(text = "GFG Course Taken")
}
}
}
在这里,我们添加了 TopAppBar、Text 和 Button 作为基本组件。我在 Button 中添加了一个 onClick函数,它将更新值,我们将更新 Text 中的值。现在,我们将创建一个 MutableState 变量,其值为 0 作为其初始值。当我们点击按钮时,值会增加08,并重新组合状态以重绘UI。因此,当通过单击按钮更新值时,文本会重新组合以显示更新的值。
在 Compose 中建模
模型也可用于处理 Jetpack compose 中的状态更改。在 Jetpack Compose 中,模型是可以在任何类中使用的注解。如果任何可组合项从使用 @Model 注释的类的任何参数接收到值,并且参数的值发生更改,则 UI 会自行重组。这是使用 MutableState 和 Model 来管理状态的结果。
科特林
@Composable
private fun setupStateUsingModel() {
Column {
TopAppBar(
title = { Text(text = "Course Management") }
)
SomeBubble(
text = // set new value
)
Button(onClick = {
// update value
}) {
Text(text = "Display Course")
}
}
}
现在让我们创建一个带有 Int 参数值和初始值为 0 的数据类 Counter。该类将使用 @Model 进行注释。
科特林
@Composable
private fun setupStateUsingModel() {
val counter = Counter()
Column {
TitleBar(
title = { Text(text = "Course Management") }
)
Theme(
bubble = counter.value.toString()
)
Button(onClick = {
counter.value += 5
}) {
Text(text = "Click to view courses")
}
}
}