I have the next code, everything is fine except that I need to put my second AnswerOption
in a lazyverticalGrid.
Which i cant do it, because its inside a lazycolumn this is the code
@Composable
fun AssessmentScreen(
onClose: (String, String) -> Unit,
relatedSubSkillIdsJson: String,
uiState: AssessmentUiState,
onSelectedOption: (String) -> Unit,
onShowAnswerFeedback: (Boolean) -> Unit,
onNextQuestion: () -> Unit,
onCloseAssessment: () -> Unit,
navigateToAndPop: (Pair<String, String>) -> Unit,
goBack: () -> Unit,
assessmentType: String,
) {
val context = LocalContext.current
val activity = context.findActivity()
val navigationBarHeightDp = activity?.getNavigationBarHeightInDp() ?: 0.dp
val blur =
if (uiState.isLoading) dimensionResource(dimen.default_screen_blur) else 0.dp
val currentArtiIndex = remember { mutableStateOf(0) }
if (uiState.questions.isNotEmpty()) {
LazyColumn(
Modifier
.fillMaxSize()
.padding(
top = dimensionResource(dimen.default_screen_padding),
start = dimensionResource(dimen.default_screen_padding),
end = dimensionResource(dimen.default_screen_padding)
)
.blur(blur)
) {
item {
CloseAssessment(
relatedSubSkillIdsJson = relatedSubSkillIdsJson,
uiState = uiState,
questionIndex = uiState.currentQuestionIndex,
isAnsweredQuestion = uiState.showAnswerFeedback,
onCloseAssessment = { onCloseAssessment() },
navigateToAndPop = navigateToAndPop,
goBack = goBack
)
AssessmentTitle(artiImages[currentArtiIndex.value], assessmentType)
QuestionDotsIndicator(uiState.questionAnswersStatus)
AssessmentQuestion(
thumbnail = uiState.getCurrentQuestionItem().thumbnail,
question = uiState.getCurrentQuestionItem().question
)
Spacer(modifier = Modifier.height(20.dp))
}
val optionsAbcLetterDescription = ('a'..'z').toList()
itemsIndexed(uiState.currentAnswerOptions) { index, option ->
if (uiState.currentAnswerOptions[index].thumbnail == ""){
AnswerOption(
selectedOptionId = uiState.selectedAnswerId,
showFeedback = uiState.showAnswerFeedback,
optionLetter = circularCharIteration(optionsAbcLetterDescription, index),
option = option,
onSelectedOption = { onSelectedOption(it) }
)
}else{
AnswerOption(
selectedOptionId = uiState.selectedAnswerId,
showFeedback = uiState.showAnswerFeedback,
optionLetter = circularCharIteration(optionsAbcLetterDescription, index),
option = option,
onSelectedOption = { onSelectedOption(it) }
)
}
}
item {
ChallengeBtn(
modifier = Modifier
.padding(bottom = navigationBarHeightDp dimensionResource(dimen.default_screen_padding)),
uiState = uiState,
navigateToAndPop = navigateToAndPop,
onShowAnswerFeedback = { onShowAnswerFeedback(it) },
onCloseAssessment = { onCloseAssessment() },
onNextQuestion = {
if (!uiState.isLastQuestion) {
currentArtiIndex.value =
nextArtiImage(currentArtiIndex.value)
onNextQuestion()
}
} ,
relatedSubSkillIdsJson = relatedSubSkillIdsJson,
)
}
}
}
ProgressBarComponentComposable(isLoading = uiState.isLoading)
any idea on how to do it?
CodePudding user response:
wrap it inside item{…}
block
...
val optionsAbcLetterDescription = ('a'..'z').toList()
itemsIndexed(uiState.currentAnswerOptions) { index, option ->
if (uiState.currentAnswerOptions[index].thumbnail == "") {
[email protected] { // item block
AnswerOption(
...
)
}
} else {
[email protected] { // item block
AnswerOption(
...
)
}
}
...
or you can make the AnswerOption
an extension of LazyItemScope
,
@Composable
fun LazyItemScope.AnswerOption() {...}
and you can simply call it like this
...
val optionsAbcLetterDescription = ('a'..'z').toList()
itemsIndexed(uiState.currentAnswerOptions) { index, option ->
if (uiState.currentAnswerOptions[index].thumbnail == "") {
AnswerOption(
...
)
} else {
AnswerOption(
...
)
}
...