Jetpack Compose:无法在 TextField 中显示文本 [英] Jetpack Compose: Not able to show text in TextField

问题描述

最近我在玩 Jetpack Compose，我注意到文本可能不会显示在 TextField 中.

Recently I'm playing with Jetpack Compose and I noticed that the text may not show up in TextField.

所以我有一个 ViewModel 和 Flow 的 ViewState.

So I have a ViewModel with Flow of ViewState.

在我的 Compose 文件中，我有类似的东西:

In my Compose file, I have something similar to this:

@Composable
internal fun TestScreen() {
    val state by viewModel.state.collectAsState()
    TestScreen {
        viewState = state,
        actioner = { ... }
    }
}

@Composable
private fun TestScreen(viewState: ViewState, actioner: () -> Unit) {
    var name by remember {
        mutableStateOf(
            TextFieldValue(viewState.name)
        )
    }
    Surface {
        ....
        Column {
            ....

            OutlinedTextField(
                ...
                value = name,
                onValueChange = { textFieldValue -> 
                    name = textFieldValue
                    actioner(...)
                }
            )
        }
    }
}

OutlineTextField 永远不会显示 viewState.name

但是，如果我改变这个:

However, if I change this:

    var name by remember {
        mutableStateOf(
            TextFieldValue(viewState.name)
        )
    }

为此:

    var name = TextFieldValue(viewState.name)

显然它可以显示 viewState.name 中的值.

Obviously it could show the value in viewState.name.

根据文档(https://developer.android.com/jetpack/compose/state#state-in-composables)，其中建议使用 remember &mutableStateOf 来处理变化.

According to the Documentation (https://developer.android.com/jetpack/compose/state#state-in-composables) in which it recommends using remember & mutableStateOf to handle the changes.

如果有人能帮我解释为什么带有 remember 的代码不起作用但直接分配的值起作用，我将不胜感激?

I'll be very grateful if someone could help me to explain why the code with remember doesn't work but the directly assigned value worked?

viewState.name 是一个 String

我部分解决"了通过执行以下操作来解决此问题:

and I "partially solved" this issue by doing the following:

    var name by remember {
        mutableStateOf(
            TextFieldValue("")
        )
    }
    
    name = TextFieldValue(viewState.name)

然后可以显示名称.但看起来不太对劲?

then the name can be shown. But it doesn't look quite right?

推荐答案

remember 只是为了确保在重组时，mutableStateOf 对象的值不会得到重新初始化为初始值.

remember is used just to ensure that upon recomposition, the value of the mutableStateOf object does not get re-initialised to the initial value.

例如

@Composable
fun Test1(){
 var text by mutableStateOf ("Prev Text")
 Text(text)
  Button(onClick = { text = "Updated Text" }){
      Text("Update The Text")
  }
}

不会在按钮点击时更新文本.这是因为单击按钮会更改 mutableStateOf text，这将触发重新组合.但是，当控件到达 Composable 的第一行时，它会将变量 text 重新初始化为Prev Text".

would not update the text on button click. This is because button click will change the mutableStateOf text, which will trigger a recomposition. However, when the control reaches the first line of the Composable, it will re-initialise the variable text to "Prev Text".

这就是记住的用武之地.

如果你把上面的初始化改成

If you change the initialisation above to

var text by remember { mutableStateOf ("Prev Text") },

它会告诉 compose 跟踪这个变量，并记住"它的值，并在重新组合时再次使用它，当控件再次到达初始化逻辑时.因此，请记住在那里充当守卫"这不会让控件进入初始化逻辑，并返回它当前存储的变量的最新记忆值.

It wil tell compose to track this variable, and "remember" its value, and use it again on recomposition, when the control reaches the initialisation logic again. Hence, remember over there acts as a "guard" that does not let the control reach into the initialisation logic, and returns that latest remembered value of the variable it currently has in store.

这篇关于Jetpack Compose:无法在 TextField 中显示文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！