Jetpack DerivedStateOf не вызывается при изменении состояния
Я новичок в Джетпаке. В настоящее время у меня проблемы с API derivedStateOf. Я ожидаю, что derivedStateOf будет вызван при изменении состояния email, а затем bgColor будет изменен на Red, но ничего не произошло
Пожалуйста, помогите мне объяснить, в чем проблема и как ее исправить, спасибо !!
@Composable
fun TestDerivedState() {
Box (Modifier.fillMaxSize()) {
var email by remember { mutableStateOf("") }
DerivedCompose(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 24.dp)
.height(56.dp)
.align(Alignment.Center),
value = email,
onClick = {
email = it
}
)
}
}
@Composable
fun DerivedCompose(
modifier: Modifier = Modifier,
value: String,
onClick: (String) -> Unit
) {
val bgColor by remember {
derivedStateOf {
Timber.d("value: $value")
if (value.isBlank()) Color.Red else Color.Green
}
}
Button(
onClick = {
onClick(UUID.randomUUID().toString())
},
colors = ButtonDefaults.buttonColors(
containerColor = bgColor
),
modifier = modifier
) {
Text(text = "test derived state, $value")
}
}
Ответы 3
Я подтверждаю, что невозможно изменить цвет с помощью DerivedStateOf. А еще я думаю, что это лучший ответ на ваш вопрос, ответьте или перейдите к документации
ну, вы всегда можете это сделать, DerivedStateOf в любом случае тяжел. надеюсь, это полезно
Button(
onClick = {
onClick(UUID.randomUUID().toString())
},
colors = ButtonDefaults.buttonColors(
containerColor = if (value.isBlank()) Color.Red else Color.Green
),
modifier = modifier
) {
Text(text = "test derived state, $value")
}
derivedStateOf обновляется только при изменении любых State объектов, которые использовались при расчете. Поскольку вы используете только value, который является простой строкой, производное состояние никогда не изменится.
derivedStateOf здесь не то, что вам нужно. Вместо этого вы можете использовать механику самого remember:
val bgColor = remember(value) { if (value.isBlank()) Color.Red else Color.Green }
Предоставляя value в качестве параметра, вы фактически указываете remember выполнять перерасчет только в случае изменения value.
Тем не менее, в этой конкретной ситуации я бы, вероятно, вообще отбросил remember и сделал бы только это:
val bgColor = if (value.isBlank()) Color.Red else Color.Green
Это проще и не вызывает накладных расходов механики remember, но теперь он будет выполнять вычисления при каждой рекомпозиции, а не только при изменении value.
Если вы не ожидаете, что это будет сильно перекомпоновано (например, как часть анимации), расчет настолько прост, что я бы не стал remember утруждать себя результатом.
1 Самая затратная часть вычислений — isBlank(), которая перебирает каждый символ в value. Это очень быстро, но если вы хотите, чтобы это было еще быстрее, убедитесь, что в строке никогда не бывает только пустых символов, применив к ней trim() при настройке адреса электронной почты:
onClick = {
email = it.trim()
},
Теперь вы можете использовать value.isEmpty() вместо value.isBlank(), который работает в постоянном времени.
Я многому научился из вашего ответа. Спасибо!
Это рабочий код
@Composable
fun TestDerivedState() {
Column (Modifier.fillMaxWidth().padding(12.dp)) {
var email by remember { mutableStateOf("") }
val bgColor by remember {
derivedStateOf {
if (email.isBlank()) Color.Red else Color.Green
}
}
OutlinedTextField(
value = email,
onValueChange = { email = it },
label = { Text(text = "Email") },
modifier = Modifier.fillMaxWidth().padding(12.dp)
)
Button(
onClick = {
//onClick(UUID.randomUUID().toString())
},
colors = ButtonDefaults.buttonColors(
containerColor = bgColor
),
modifier = Modifier.fillMaxWidth().padding(12.dp)
) {
Text(text = "test derived state, $email")
}
}
}
Что именно вы хотите сделать? Изменить цвет кнопки в зависимости от значения строки электронной почты? Если да, то почему вы используете для этого DerivedStateOf?