Я играл с Jetpack Compose и пробовал несколько вещей. Одним из них является рендеринг векторных активов (svgs).
Я создал пользовательский флажок компонента. Вот код:
@Composable
fun CustomCheckBox(
checked: Boolean = false,
onClick: (() -> Unit)?,
children: (@Composable() () -> Unit)? = null
) {
val imgRes = if (checked) R.drawable.ic_checkbox_on else R.drawable.ic_checkbox_off
val vectorAsset = +vectorResource(imgRes)
Clickable(onClick = onClick) {
Row(modifier = Height(100.dp) wraps Expanded) {
Container(
width = vectorAsset.defaultWidth.value.dp,
height = vectorAsset.defaultHeight.value.dp
) {
DrawVector(vectorImage = vectorAsset)
}
Container(modifier = Spacing(top = 10.dp)) {
children?.invoke()
}
}
}
}
А вот еще немного кода, чтобы получить полную картину:
@Composable
fun TermsConditions(state: TermsAndConditionsState) {
CustomCheckBox(
onClick = {
state.accepted = !state.accepted
},
checked = state.accepted,
children = {
Text(text = "I accept the Terms of Service\" or \"I accept the Privacy Statement\" \"Click here to indicate that you have read and agree to the terms presented in the Terms and Conditions agreement.")
}
)
}
Класс моей модели:
@Model
data class TermsAndConditionsState(var accepted: Boolean)
I ' У меня проблема: всякий раз, когда я нажимаю на компонент флажка, происходит изменение состояния (флаг accept
инвертируется). Однако это не отражено в пользовательском интерфейсе. Удивительно, но это работает с PNG.
Кто-нибудь знает, что я могу делать неправильно? Или это просто ошибка в Compose? Я знаю, что это очень ранняя стадия разработки, поэтому можно ожидать неправильного поведения.