State 托管在喷气背包中

Question

我正在学习State在 jetpack compose 中托管。 我试图在单个 function 中分离我的变量并查看逻辑以分离 function。 但是我的代码中出现了奇怪的问题。 有人可以指导我吗？

脉压

@Composable
fun PulsePressure() {
    var systolicTextFieldValue by rememberSaveable(stateSaver = TextFieldValue.Saver) {
        mutableStateOf(TextFieldValue())
    }
    var isSystolicTextFieldValueError by rememberSaveable { mutableStateOf(false) }
    var diastolicTextFieldValue by rememberSaveable(stateSaver = TextFieldValue.Saver) {
        mutableStateOf(TextFieldValue())
    }
    var isDiastolicTextFieldValueError by rememberSaveable { mutableStateOf(false) }
    InputWithUnitContainer(
        systolicTextFieldValue,
        isError = {
            isSystolicTextFieldValueError = it
        },
        incrementTextFieldValue = {
            systolicTextFieldValue = it
        })
    InputWithUnitContainer(
        diastolicTextFieldValue,
        isError = {
            isDiastolicTextFieldValueError = it
        },
        incrementTextFieldValue = {
            diastolicTextFieldValue = it
        }
    )
}

InputWithUnitContainer

@Composable
fun InputWithUnitContainer(
    textFieldValue: TextFieldValue,
    isError: (Boolean) -> Unit,
    incrementTextFieldValue: (TextFieldValue) -> Unit,
) {
    val maxLength = 4
    Row(
        modifier = Modifier
            .fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        TextField(
            value = textFieldValue,
            singleLine = true,
            onValueChange = {
                if (it.text.length <= maxLength) {
                    incrementTextFieldValue(it)
                }
                isError(false)
            },
            isError = isError,
            textStyle = RegularSlate20
        )
    }
}

文本字段错误

None of the following functions can be called with the arguments supplied.

Answer 1

TextField中的isError参数是 Boolean。

变化 1

你必须改变

var isDiastolicTextFieldValueError by rememberSaveable { mutableStateOf(false) }

至

var (isDiastolicTextFieldValueError, updateIsDiastolicTextFieldValueError) = rememberSaveable {
    mutableStateOf(
        false
    )
}

这给出了值和 function 来更新值。

变化 2

然后将值和方法都传递给可组合。

用法

InputWithUnitContainer(
    textFieldValue = diastolicTextFieldValue,
    isError = isDiastolicTextFieldValueError,
    updateIsError = updateIsDiastolicTextFieldValueError,
    incrementTextFieldValue = {
        diastolicTextFieldValue = it
    }
)

方法签名更改

@Composable
fun InputWithUnitContainer(
    textFieldValue: TextFieldValue,
    isError: Boolean,
    updateIsError: (Boolean) -> Unit,
    incrementTextFieldValue: (TextFieldValue) -> Unit,
) {
    ...
}

变化 3

更新使用

TextField(
    value = textFieldValue,
    singleLine = true,
    onValueChange = {
        if (it.text.length <= maxLength) {
            incrementTextFieldValue(it)
        }
        updateIsError(false)
    },
    isError = isError,
    textStyle = TextStyle(),
)