android - 通过选择在 Compose 中仅突出显示一张卡片

Question

我有一个 Compose LazyColumnList，它在单个卡片中显示内容(来自列表)。我只想突出显示所选的卡片。现在，当我选择另一张卡片时，第一张卡片会突出显示。这是代码:

...
LazyColumn(
               contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp)
    ) {
        items(
            items = sql_quran,
            itemContent = { SurahListItem(quran_einzeln = it, navController)
            })
    }


@Composable
fun SurahListItem(
    quran_einzeln: ItemData_quran,
    navController: NavController,
) {

var selectedCard by remember { mutableStateOf(false) }
var cardColor = if (selectedCard) Blue else White;

// var cardColor= if (selectedCard) LightGray else White
Card(
    modifier = Modifier.padding(horizontal = 8.dp, vertical = 8.dp).fillMaxWidth().fillMaxSize(),
    elevation = 2.dp,
    shape = RoundedCornerShape(corner = CornerSize(16.dp)),
    backgroundColor = cardColor,
    onClick = {
        selectedCard=!selectedCard
    }

)

Answer 1

所有状态更改都在您的 SurahListItem 中本地发生，并且每次您单击时都不会告诉您的 LazyColumn 对其 item 子项执行任何更新其中之一。

我无法编译您的全部代码，因此我只是假设其中的某些部分会产生以下代码。我从 SurahListItem 提升了您想要的上一级“选择状态”，并让包含 LazyColumn 的可组合项执行更新。

您可以将所有这些复制并粘贴到一个 .kt 文件中，您将能够从一些根可组合屏幕/内容中单独运行它。

data class ItemData_quran(val content: String)

@Composable
fun MyCards( sql_quran: List<ItemData_quran>) {

    var selectedItem by remember {
        mutableStateOf<ItemData_quran?>(null)
    }

    LazyColumn(
        contentPadding = PaddingValues(horizontal = 16.dp, vertical = 8.dp)
    ) {
        items(
            items = sql_quran,
            itemContent = { surah ->
                SurahListItem(
                    quran_einzeln = surah,
                    setSelected = selectedItem?.let {
                        surah.content == it.content
                    } ?: false
                ) {
                    selectedItem = it
                }
            }
        )
    }
}

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun SurahListItem(
    quran_einzeln: ItemData_quran,
    setSelected: Boolean,
    isSelected: (ItemData_quran?) -> Unit
) {

    val cardColor = if (setSelected) Blue else White

    Card(
        modifier = Modifier
            .padding(horizontal = 8.dp, vertical = 8.dp)
            .wrapContentSize(),
        elevation = 2.dp,
        shape = RoundedCornerShape(corner = CornerSize(16.dp)),
        backgroundColor = cardColor,
        onClick = {
            isSelected(if(!setSelected) quran_einzeln else null)
        }
    ) {
        Box(
            modifier = Modifier.fillMaxWidth(),
            contentAlignment = Alignment.Center
        ) {
            Text(text  = quran_einzeln.content)
        }
    }
}

用法:

MyCards(
    listOf(
            ItemData_quran("Item 1"),
            ItemData_quran("Item 2"),
            ItemData_quran("Item 3"),
            ItemData_quran("Item 4"),
            ItemData_quran("Item 5"),
            ItemData_quran("Item 6"),
            ItemData_quran("Item 7"),
          )
)