0

我正在使用新的 compose 库在 android中实现概述的TextField。但奇怪的是,输入数据没有在文本字段中更新。

于是搜了一下,发现android compose中有一个叫Recomposition的话题。我没有完全明白。
但是,我确实找到了解决方案:

@Composable
fun HelloContent(){
    var name:String by remember {mutableStateOf("")}
    OutlinedTextField(
        value = name,
        onValueChange = {name = it},
        label = {Text("Name")}
    )
}

我还阅读了jetpack compose 中的 State概念。但我无法完全得到它。
有人可以用简单的话解释吗?

4

3 回答 3

3

基本上,重组只是 Compose 中的一个事件,其中 Composable 被重新执行。在 Compose 所基于的声明式编码中,我们将 UI 编写为函数(或方法,更常见)。现在,重组基本上是通过重新执行可组合“函数”的主体来重新发出UI 的事件。这就是重组的核心。现在到它何时被触发。

好的,所以为了触发重组,我们需要一种特殊类型的变量。这种类型内置于 compose 中,专门设计用于让它知道何时重新组合。并且提到的类型是MutableState. 顾名思义,就是State,可以Mutate,即改变;各不相同。

所以,我们有一个类型的变量MutableState,接下来是什么?你猜怎么着,你没有类型变量,MutableState因为我没有教你如何创建一个!您将在 Compose 中使用的最常见分配是mutableStateOf. 这是一个预定义的方法,它实际上返回一个类型的MutableStateMutableState<T>T是这里的State类型,见下文

var a = mutableStateOf(999)

如上所示,999 是一个 int,因此,mutableStateOf这里将返回一个MutableState<Int>类型值。很容易。

现在,我们有一个MutableState<Int>值,但老实说,这有点难看。每次需要从 中获取值时MutableState<T>,都需要引用一个方便命名的属性.value

因此,要从上述 999 中取出var a,您需要调用a.value. 现在,这可以在一两个地方使用,但每次调用它似乎都是一团糟。这就是 Kotlin 属性委托的用武之地(我知道,我不需要将最后两个词大写)。我们使用by关键字从状态中检索值,并将其分配给我们的变量 - 这就是您应该关心的全部。

所以,var a by mutableStateOf(999)实际上会返回999type Int,而不是 type MutableState<Int>,但精彩的部分是 Compose 仍然会知道该变量a是 State-Holder。所以基本上mutableStateOf可以被认为是一个注册计数器,你只需要通过一次,就可以在State-Holders. 从何时开始,每次更改状态持有者之一的值时都会触发重组。这是一个粗略的想法,但让我们了解一下技术。现在,我们可以了解重组的“方式”。

要触发重组,您只需要确保两件事:

  1. Composable 应该读取一个变量,这也是一个状态持有者
  2. 状态持有者应该经历其当前价值的变化

佩里的例子让一切都变得更好:-

var a by mutableStateOf(999)

案例 1:一个 Composable 接收a作为参数值MyComposable(a),然后我运行a = 0,结果 1:Recomposition Triggered

案例二:变量a实际上是在 Composable 内部声明的,然后我运行var a = 12344 结果二:触发重组

案例 III:我重复案例 1 和 II,但使用不同的变量,如下所示:var b = 999
结果 III:未触发重组;原因:b不是国家持有者

太好了,我们现在掌握了基础知识。所以,这是本次讲座的最后阶段。

记住!!

你看,当我说在重组期间,整个 Composable 被重新执行,我的意思是整个 Composable 被重新执行,也就是说,每一行和每一个分配,没有例外。你看到这有什么问题了吗?让我示范

假设我想要一个TextComposable 显示一个数字,并在我单击它时增加该数字。

我可以实现这样简单的东西

@Composable
fun CountingText(){
 var n = mutableStateOf(0) //Starts at 0
 Text(
  value = n.toString(), //The Composable only accepts strings, while n is of Int type
  modifier = Modifier
             .clickable { n++ }
 )
}

好的,这是我们可能认为可行的实现。如果您不熟悉Modifiers,请暂时保留它,并相信我clickable,当您实际单击Text. 现在,让我们想象一下这将如何执行。

首先 Compose 会将变量注册n为状态持有者。然后它将呈现Text具有初始值0的Composable n

现在,Text实际上是clicked。里面的块clicakble将被执行,在这种情况下只是n++,它将更新 的值n。Compose 看到 的值为n更新,并遍历状态持有者列表。Compose 发现n确实是一个状态持有者,然后决定触发重组。现在,读取 的值的整个 Composablen将被重新组合。在这种情况下,该 Composable 是 CountingText因为它Text内部正在读取n(To display it) 的值。因此,CountingText将被“重新执行”。让我们来看看这里的重新执行。

Composable 中的第一行,

var n = mutableStateOf(0)

n变成了0。

下一行:-

Text(
  value = n.toString(), //Just displays 0 
  modifier = Modifier 
             .clickable { n++ } //Just tells it to increase n upon click
 )

所以你看,这里的问题是,在重新执行时,n它是完全从头开始创建的,就好像它以前从未存在过一样。它已从 Composable 的内存中删除。为了解决这个问题,我们需要 Composable to remember n. 这样,Compose 就知道这是一个状态持有者,并且拥有一个需要在重组时重新分配给它的值。所以,这里只是更新的第一行

var n by remember { mutableStateOf(0) }

现在,在第一次执行时,n将收到 0,因为它实际上是第一次n创建。感谢remembern现在可以访问Composable的内存,因此将存储在内存中以供将来使用。

因此,在重组期间,会发生这种情况 - 当执行程序 (???) 到达n分配的行时,

var n by remember { mutableStateOf(0) }

remember实际上充当了看门人,并且不允许执行者进入其中包含的块。相反,它将先前记住的值传递给它并要求它继续前进。因为当用户单击文本时,它已经将值n增加到 1,这被保留在内存中,所以现在它可以按预期工作。

这与您的 TextField 问题相同。该字段最初读取一个空值,并且每次用户键入一个字母时都会更新该值,触发重组并最终在屏幕上显示正确的值。

它可以变得足够简单吗?让我知道我花了半个小时打字。

于 2021-11-05T15:42:53.037 回答
1

在 Compose 中使用重组来重组(重新加载更改的部分)屏幕。在您的示例中,您有更改屏幕状态的用户输入。您必须使用var name:String by remember {mutableStateOf("")},顺便说一句,您可以:String省略掉,因为您在这里设置了类型:mutableStateOf("")无论如何,您需要使用remember可组合项记住旧内容,然后可以添加新内容。如果你每次输入 hello 时它会重新组合一个字母,它会记住值 h,然后是 he,然后是 hel,依此类推。

于 2021-11-05T13:16:50.430 回答
-1

试试这个
我知道没有区别但留下进口

Compose_version 1.0.4

import androidx.compose.material.OutlinedTextField
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.setValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

@Composable
fun YourAnswer() {
    var text by remember { mutableStateOf("") }
    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Name") }
    )
}
于 2021-11-05T13:29:51.347 回答