CODEWITHSUNDEEP
androidkotlinviewmodeltextfieldandroid-jetpack-compose
YunxiuWang
YunxiuWang

Reputation: 131

How can i change value in TextField value from viewModel in jetpack compose

I am using in my project, and don't know how to change a TextField's value from my ViewModel.

In my Activity:

...
@Composable
fun myView() {
    var dName = remember {
        mutableStateOf(TextFieldValue(""))
    }
    TextField(
        value = dName.value, 
        onValueChange = { dName.value = it }, 
        modifier = Modifier.fillMaxWidth()
    )
}
...

In my ViewModel:

...
var dName = MutableStateFlow("")
...

I want to call dName.value = "test" in my ViewModel and change the shown value in the TextField. How can I accomplish this?

Upvotes: 12

Views: 16930

Answers (2)

Linh
Linh

Reputation: 60923

You can also use mutableStateOf instead of MutableStateFlow. I think it much simple.

ViewModel

var dname by mutableStateOf("init value")

Composable

TextField(
    value = viewModel.dname,
    onValueChange = { viewModel.dname = it }
)

In ViewModel, when you want to change the value, you can call dname = "test"

Upvotes: 14

Noah
Noah

Reputation: 3425

Assuming you have a reference to your viewModel called viewModel, you just have to call viewModel.name.collectAsState(). But beyond that, I suggest keeping the data logic in the ViewModel, by making the MutableStateFlow private and exposing an immutable StateFlow and a setter method to the composable.

// ViewModel
private val _name = MutableStateFlow("")
val name = _name.asStateFlow()

fun setName(name: String) {
  _name.value = name
}

// Composable
val name = viewModel.name.collectAsState()
TextField(
  value = name,
  onValueChange = viewModel::setName
)

As you can see, I'm not using remember { mutableStateOf(...) } here, because the StateFlow in the ViewModel is the single source of truth.

Your approach of setting the composable's value imperatively doesn't make sense in the declarative API that Jetpack Compose provides.

Try reading up on declarative/imperative UI and state in Jetpack compose as well as kotlin flow to learn more.

Upvotes: 7

Related Questions