单击卡片按钮更新 LazyColumn
Updating LazyColumn In Card Button Click
我正在使用 JetPack Compose 开发 Question/Answer 测验应用程序。我有如下卡
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
您需要在 CardView
中存储一个状态值,指示按钮是否被点击。 rememberSaveable
将确保在重组和滚动期间保存它。我将 query.question_id
作为 key
传递:以防它发生变化,很可能应该重新初始化该值。在 documentation
中查看有关 compose 状态的更多信息
var answerRevealed by rememberSaveable(query.question_id) { mutableStateOf(false) }
您可以根据此状态更改惰性列元素的背景。 p.s。我建议你使用 Modifier
作为最后一个参数,这样你就不需要在最后一个逗号,你可以很容易地使用 add/remove/reorder 修饰符:
@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")
}
我正在使用 JetPack Compose 开发 Question/Answer 测验应用程序。我有如下卡
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
您需要在 CardView
中存储一个状态值,指示按钮是否被点击。 rememberSaveable
将确保在重组和滚动期间保存它。我将 query.question_id
作为 key
传递:以防它发生变化,很可能应该重新初始化该值。在 documentation
var answerRevealed by rememberSaveable(query.question_id) { mutableStateOf(false) }
您可以根据此状态更改惰性列元素的背景。 p.s。我建议你使用 Modifier
作为最后一个参数,这样你就不需要在最后一个逗号,你可以很容易地使用 add/remove/reorder 修饰符:
@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")
}