Select all text of TextField in Jetpack Compose with mvvm pattern

Question

In the previous text field, when focused, there was a method in which all letters were selected. I found a way to make it remembered on the screen, but I wonder how to do it on the mvvm pattern.

@Composable
fun MainScreen(text: String, viewModel: HomeViewModel) {
    val textState = remember { mutableStateOf(TextFieldValue()) }
    val state = viewModel.mainState.text.collectAsState()
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = state.value,
            color = Color.Blue,
            fontSize = 40.sp
        )

        Button(
            onClick = { viewModel.mainState.text.value = "New text" },
            colors = ButtonDefaults.buttonColors(
                backgroundColor = Color.Green
            ),
            modifier = Modifier.padding(16.dp)

        ) {
            Text(text)
        }

        TextField(
            value = textState.value,
            onValueChange = { textState.value = it },
            label = { Text("Input text") }
        )

    }
}

The code above is from screen to remeber. But I understand that remember is only declared within @Composable. The view model does not declare @Composable, so I want to know how to do it in the mvvm pattern.

Below is my code.

LoginScreen

    val text = viewModel.user_id.value
    OutlinedTextField(
                        value = barcode,
                        onValueChange = {
                            viewModel.changeBarcode(it)
                        },
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(all = 4.dp)
                            .onFocusChanged { focusState ->
                                if (focusState.isFocused) {
                                    //monitor value

                                }
                            },
                        label = { Text(text = "Barcode") },
                        singleLine = true,
                        keyboardOptions = KeyboardOptions(
                            keyboardType = KeyboardType.Number,
                            imeAction = ImeAction.Done
                        ),
                        keyboardActions = KeyboardActions(
                            onDone = {
                                keyboardController?.hide()
                                viewModel.onTriggerEvent(MenuStateEvent.ScanEvent)
                            }
                        )
                    )

LoginViewModel

val user_id: MutableState<String> = mutableStateOf("")

How change it to mvvm pattern?

It isn't clear what you are trying to achieve. Selecting all the text isn't some state related. Saving the value of the TextField is however state related. Also, your sample shows user_id. What does that have to do with selecting the text? You need to clean up your post and make it easier to understand. — Johann, Nov 11 '21 at 04:49
Could you take a look if this answer helps you? https://stackoverflow.com/questions/68244362/select-all-text-of-textfield-in-jetpack-compose/68245465#68245465 — nglauber, Nov 13 '21 at 22:38

score 3 · Accepted Answer · edited Dec 31 '21 at 03:10

3

Maybe this will be the method you need.

in ViewModel：

val user_id = mutableStateOf(TextFieldValue(""))

in Compose：

    TextField(
        value = viewModel.user_id.value,
        onValueChange = { viewModel.user_id.value = it },
        label = { Text("Input text") }
    )

Just change the mutableStateOf in ViewModel from "String" to "TextFieldValue(String)" to access it.

edited Dec 31 '21 at 03:10

Dharman

30,962
25
85
135

answered Dec 31 '21 at 03:04

Barr

44
3

Select all text of TextField in Jetpack Compose with mvvm pattern

1 Answers1