Jetpack 撰写状态管理，无法更改 Card 的背景颜色

问题描述

使用 Jetpack Compose 状态管理，当用户点击 background 时，我想更改 Card 列表中的 scrollable 的 AlertDialog

如下面的代码所示，我将 state 存储为 cardState，remember

当用户点击 AlertDialog 正按钮时，我正在更改状态值。

我期待那种状态的值改变后，的重构会发生，并且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),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
    ) 

然后使用不同的东西：

• 对 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") } }
        )
    }
}