更新卡按钮中的 LazyColumn 单击

Posted 2023-04-19

【中文标题】更新卡按钮中的 LazyColumn 单击

【英文标题】：Updating LazyColumn In Card Button Click

【发布时间】：2021-11-11 18:30:15

【问题描述】：

我正在 JetPack Compose 中开发一个问答测验应用程序。我有如下卡片

Card(modifier = Modifier
        .wrapContentHeight(Alignment.CenterVertically)
        .wrapContentWidth(Alignment.CenterHorizontally)
        .padding(10.dp)
        .width(300.dp)
        .height(600.dp)
        .clip(RoundedCornerShape(8.dp)),
        elevation = 10.dp,
        backgroundColor = Color.White

    )
    

        Column(
            modifier = Modifier
                .wrapContentHeight(Alignment.CenterVertically)
                .wrapContentWidth(Alignment.CenterHorizontally)
                .padding(8.dp),
            horizontalAlignment = Alignment.Start,
            verticalArrangement = Arrangement.Top

            )

            Text(
                text = "Question : " + query.question_id,
                style = Typography.h1
            )
            Spacer(modifier = Modifier.height(2.dp))
            Text(
                text = query.question,
                style = Typography.subtitle1

            )
            Spacer(modifier = Modifier.height(5.dp))
            Text(
                text = "Options",
                style = Typography.h1
            )
            Spacer(modifier = Modifier.height(2.dp))
            OptionsDetailsList(lstOptions = lstOptions)
            
            Spacer(modifier = Modifier.height(10.dp))
            
            Button(onClick = 
            
            ) 
                Text(text = "View Answer")
            
            Spacer(modifier = Modifier.height(10.dp))
        
    

答案列表是一个 LazyColumn，如下所示

@Composable
fun OptionsDetailsList(lstOptions: List<CertAnswers>)
    Log.d("ListOptions Count" , lstOptions.size.toString())
    LazyColumn()
        item 
            Spacer(modifier = Modifier.requiredHeight(1.dp))
        
        items(lstOptions)
                item ->
            Text(text = item.answer,
                modifier=Modifier.padding(3.dp),
                style = Typography.subtitle1,
            )
            Spacer(modifier = Modifier.requiredHeight(1.dp))
        
    

我的答案数据模型如下

data class CertAnswers(
    @PrimaryKey (autoGenerate = true)
    val id : Int,
    var question_id : Int,
    val ans_title: String,
    val answer : String,
    var isSolution: Boolean
)

使用isSolution 我可以得到一个选项是否是正确的答案。 但我只想显示按钮单击并更新LazyColumn 以显示不同颜色的相关选项。 我尝试在单击按钮时再次调用OptionsDetailsList 方法，但它不起作用。 如何在CardView 内更新按钮单击上的LazyColumn。

【参考方案1】：

您需要在CardView 中存储一个状态值，指示按钮是否被点击。 rememberSaveable 将确保在重新组合和滚动期间保存它。我将query.question_id 作为key 传递：以防万一它发生变化，该值很可能应该重新初始化。在documentation中查看有关撰写状态的更多信息

var answerRevealed by rememberSaveable(query.question_id)  mutableStateOf(false) 

您可以根据此状态更改惰性列元素的背景。 p.s.我建议你使用Modifier作为最后一个参数，这样你就不需要在最后使用逗号，你可以很容易地添加/删除/重新排序修饰符：

@Composable
fun OptionsDetailsList(answerRevealed: Boolean, lstOptions: List<CertAnswers>) 
    Log.d("ListOptions Count", lstOptions.size.toString())
    LazyColumn() 
        item 
            Spacer(modifier = Modifier.requiredHeight(1.dp))
        
        items(lstOptions)  item ->
            Text(
                text = item.answer,
                style = Typography().subtitle1,
                modifier = Modifier
                    .padding(3.dp)
                    .background(
                        if (answerRevealed) 
                            if (item.isSolution) 
                                Color.Green
                             else 
                                Color.Red
                            
                         else 
                            Color.Transparent
                        
                    )
            )
            Spacer(modifier = Modifier.requiredHeight(1.dp))
        
    

只需在您的按钮中将此状态设置为true。您还可以在点击按钮后隐藏按钮，或更改文本。

// hide after onClick
if (!answerRevealed) 
    Button(onClick = 
        answerRevealed = true
    
    ) 
        Text(text = "View Answer")
    

// or change text
Button(onClick = 
    answerRevealed = true

) 
    Text(text = if (answerRevealed) "Hide Answer" else "View Answer")