Как передать mutableStateOf в функцию?

Question

[trickster2019]

Добрый день, решил вывести все поля ввода данные в отдельный виджет, но столкнулся с проблемой.
Основной экран

@Composable
fun AddNoteScreen() {
    var NameNote by remember{
        mutableStateOf("")
    }
    var DescriptionNote by remember {
        mutableStateOf("")
    }

    Column(
        modifier= Modifier
            .fillMaxSize()
            .background(bac),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        MainOutlinedTextField(NameNote)
    }
}

Виджет

@Composable
fun MainOutlinedTextField(valueUser:String){
    OutlinedTextField(
        value = valueUser,
        onValueChange ={newText->
            valueUser=newText
        },
        colors = TextFieldDefaults.outlinedTextFieldColors(
            textColor = Color.White,
            unfocusedBorderColor = main_blue,
            focusedBorderColor = faded_blue
        ),
        label = {
            Text(
                text = "Имя заметки",
                color = faded_blue,
                fontSize = 10.sp
            )
        },
        leadingIcon = {
            IconButton(onClick = {  }) {
                Icon(
                    imageVector = Icons.Filled.Edit,
                    contentDescription = null,
                    tint = faded_blue
                )
            }
        },
        singleLine = true,
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Ascii,
            imeAction = ImeAction.Go
        ),
    )
}

Но тут появилась ошибка, мол valueUser не изменяемая переменная и так не пойдёт.
Потом я переделал функция под State, и ошибка в виджете исчезла.

@Composable
fun MainOutlinedTextField(valueUser:State<String>){
    var uv=valueUser.value
    OutlinedTextField(
        value = uv,
        onValueChange ={newText->
            uv=newText
        },
        colors = TextFieldDefaults.outlinedTextFieldColors(
            textColor = Color.White,
            unfocusedBorderColor = main_blue,
            focusedBorderColor = faded_blue
        ),
        label = {
            Text(
                text = "Имя заметки",
                color = faded_blue,
                fontSize = 10.sp
            )
        },
        leadingIcon = {
            IconButton(onClick = {  }) {
                Icon(
                    imageVector = Icons.Filled.Edit,
                    contentDescription = null,
                    tint = faded_blue
                )
            }
        },
        singleLine = true,
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Ascii,
            imeAction = ImeAction.Go
        ),
    )
}

Но появилась ошибка в основном экране

Type mismatch.
    Required:
    State<String>
    Found:
    String

Я попытался переделать переменную
var NameNote = mutableStateOf("")
Но всё равно нечего не вышло.

Answer 1

[Павел]

У вас в MainOutlinedTextField передается в аргументы функции valueUser:String, и вы пытаетесь ей присвоить значение в onValueChange ={newText->
valueUser=newText
}
Конечно такое не будет работать.
Либо создавайте переменную by remember внутри MainOutlinedTextField и в нее пишите значение при вводе текста, либо добавьте в аргументы лямбду onResult: (String) -> Unit и возвращайте значение на экран выше

Comments

[trickster2019]

Так я что то чутка не понимаю, особенно с первым способом. Допустим у меня экран с регистрацией, и у меня будет 3 MainOutlinedTextField, и одна кнопка с отправкой данных на API. Каким образом мне получить значения их MainOutlinedTextField при отправке данных?

[Павел]

@Composable
fun AddNoteScreen() {
    var login by remember{
        mutableStateOf("")
    }
    var password by remember {
        mutableStateOf("")
    }
    var repeatPassword by remember {
        mutableStateOf("")
    }

    Column(
        modifier= Modifier
            .fillMaxSize()
            .background(bac),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
       //login
        MainOutlinedTextField(onResult = { login = it })
       //password
        MainOutlinedTextField(onResult = { password = it })
       //repeat password
        MainOutlinedTextField(onResult = { repeatPassword = it })
    }
}

Ну и сам виджет:

@Composable
fun MainOutlinedTextField(onResult: (String) -> Unit){
    OutlinedTextField(
        value = valueUser,
        onValueChange ={newText->
            onResult(newText)
        },
        colors = TextFieldDefaults.outlinedTextFieldColors(
            textColor = Color.White,
            unfocusedBorderColor = main_blue,
            focusedBorderColor = faded_blue
        ),
        label = {
            Text(
                text = "Имя заметки",
                color = faded_blue,
                fontSize = 10.sp
            )
        },
        leadingIcon = {
            IconButton(onClick = {  }) {
                Icon(
                    imageVector = Icons.Filled.Edit,
                    contentDescription = null,
                    tint = faded_blue
                )
            }
        },
        singleLine = true,
        keyboardOptions = KeyboardOptions(
            keyboardType = KeyboardType.Ascii,
            imeAction = ImeAction.Go
        ),
    )
}

Примерно так