📌  相关文章
📜  Android Jetpack Compose 中的状态管理

📅  最后修改于: 2022-05-13 01:58:44.458000             🧑  作者: Mango

Android Jetpack Compose 中的状态管理

在 Android 中使用 Jetpack Compose,并希望使用最新更新的数据即时更新 UI。这可以通过使用 Jetpack Compose 的状态管理来处理。本教程将教您如何在 Jetpack Compose 中管理状态。我们会发现,

  1. 在 Jetpack Compose 中,什么是状态?
  2. 重构函数如何?
  3. 可以通过多种方式管理撰写状态。

在 Jetpack Compose 中,什么是状态?

通常,状态是包含映射到一个或多个小部件的数据的对象。我们可以使用状态对象中的值来更新小部件中显示的数据。状态的值可以在运行时更改,这允许我们使用新数据更新小部件。 Jetpack Compose 中的可组合项会根据状态值进行自我更新。当值改变时,可组合函数只重新组合数据已改变的可组合,而忽略其他。

当我们重构 UI 时,UI 树不会重绘自身,而只会更新特定的可组合对象,因为重绘整个 UI 将是一项非常昂贵的任务。但它如何确定要更新哪些堆肥? Jetpack Compose 基于 Positional Memoization 的概念,这是一种优化程序函数调用并返回缓存结果的技术。当我们第一次在 Compose 中绘制 UI 时,它会缓存 UI 树中的所有可组合项。

可以通过多种方式管理撰写状态

我们可以通过两种方式管理 Jetpack Compose 中的状态。

  1. MutableState – 在这种情况下,状态存储执行时的值,如果订阅了任何可组合项,则可组合项会在其更改时更新该值。
  2. 模型——我们使用模型作为任何类的注释,以帮助我们更新 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")
        }
    }
}