android - Jetpack compose 状态管理,无法更改 Card 的背景颜色
问题描述
使用 Jetpack Compose 状态管理,我想在用户点击时更改background
列表Card
scrollable
AlertDialog
如下代码所示,我state
用cardState
记住的方式存储
当用户单击AlertDialog
肯定按钮时,我正在更改状态值。
我期望在 state 的值改变后,Recomposition会发生并且 UI 会被更新。背景颜色是根据这个状态设置的
cardState.value.isInCart
代码 :
@Preview(showBackground = true)
@Composable
fun prepareCard(card: Card) {
// Remembering card state for adding in cart
val cardState = remember { mutableStateOf(card) }
var bgColor = R.color.white
if (cardState.value.isInCart) { // Setting background color based on state here
bgColor = android.R.color.holo_blue_light
}
MyApplicationTheme() {
androidx.compose.material.Card(
modifier = Modifier.background(color = Color(bgColor)) // using background color here
) {
// Remembering boolean for alert dialog
val showDialog = remember { mutableStateOf(false) }
if (showDialog.value) {
alert(cardState, { showDialog.value = false }) // showing alert from here
}
Column(Modifier.clickable {
showDialog.value = true // on click of Card, changing showDialog state value, which will trigger Alert dialog to be displayed
}) {
Image(
modifier = Modifier
.fillMaxWidth()
.height(200.dp),
contentScale = ContentScale.Fit,
painter = painterResource(id = card.imageId),
contentDescription = ""
)
Text(text = card.name)
}
}
}
}
@Composable
fun alert(cardState: MutableState<Card>, dismiss: () -> Unit = { }) {
AlertDialog(
title = {
Text("SmartPhone")
},
text = {
Row(
modifier = Modifier
.horizontalScroll(rememberScrollState(0))
) {
Text(text = cardState.value.name)
Image(
modifier = Modifier
.width(200.dp)
.height(200.dp),
contentScale = ContentScale.Fit,
painter = painterResource(id = cardState.value.imageId),
contentDescription = cardState.value.name
)
}
}, onDismissRequest = dismiss, // This will help to dismiss alert from outside touch
confirmButton = {
Button(onClick = {
// Add this item in cart === Changing the state here on positive button click, now I am expecting that after Alert will be dismisssed with outside touch then the Card's background would change to holo blue because isInCard is true
cardState.value.isInCart = true
}) { Text("Ok") }
},
dismissButton = { Button(onClick = {}) { Text("Cancel") } }
)
解决方案
首先在Card
使用中backgroundColor
代替Modifier.background
Card(
backgroundColor = bgColor
)
然后使用不同的东西:
- 使用 a
MutableState
不是card.isInCart
card-obj - 在 Jetpack Compose 中应用状态提升的一般模式
就像是:
@Composable
fun prepareCard(card: Card) {
//Use a MutableState for the card.isInCart not the card-obj
val inCartState = remember { mutableStateOf(card.isInCart) }
//Use colorResource
var bgColor = colorResource(R.color.white)
if (inCartState.value) {
bgColor = Color.Blue
}
Card(
backgroundColor = bgColor
) {
// Remembering boolean for alert dialog
val showDialog = remember { mutableStateOf(false) }
if (showDialog.value) {
alert(
showDialog = showDialog.value,
onConfirm = { inCartState.value = true},
onDismiss = { showDialog.value = false })
}
Column(Modifier.clickable {
showDialog.value = true // on click of Card, changing showDialog state value, which will trigger Alert dialog to be displayed
}) {
Image(
//...
)
Text(text = /*...*/)
}
}
}
和
@Composable
fun alert(showDialog: Boolean,
onConfirm: () -> Unit,
onDismiss: () -> Unit) {
if (showDialog) {
AlertDialog(
title = { Text("SmartPhone")},
text = {
//..
},
onDismissRequest = onDismiss,
confirmButton = {
Button(onClick = onConfirm ){ Text("Ok") }
},
dismissButton = {
Button(onClick = onDismiss ){ Text("Cancel") } }
)
}
}
推荐阅读
- python - 列表中唯一元素的索引值数组
- reactjs - How do I fix Object?
- sql - SQL 查询每条记录的两个值
- excel - 如何使用 ToggleButton 在另一个 Excel 工作表中隐藏一行?
- bash - 更新服务约束
- javascript - javascript表单中的自定义日期格式日期格式yyyy-mm-dd
- mysql - 一条语句中有多个相似的 SELECT
- sql - 如何将 CASE 语句与字母数字 OrderBY 的内部联接结合起来
- java - 如何比较两个集合然后过滤到带有组合字符串的新集合?
- angular - Kentico cloud:在richTextResolver 中添加角度html 的问题