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(
          ...
      ) 
     
}
  
...