I am new to Jetpack Compose. I am adding a LazyColumn to display list of QR Codes but the "items" inside the LazyListScope is accepting onlt Int

Question

I have created the database and the QR Code generation feature is also working properly. Now I want to show the History for which I am using a LazyColumn. But for some reason the 'items' in LazyListScope is not accepting the variable. Below I am posting all the required files to fetch the QRCodes list

QrCodeDao.kt

@Dao
interface QRCodeDao {
    @Query("SELECT * FROM qrCodes ORDER BY qr_timestamp DESC")
    fun getAllQrCodes(): Flow<List<QrCodeModel>>
}

QrCodeRepository.kt

@Singleton
class QrRepository @Inject constructor(private val qrCodeDao: QRCodeDao) {

    fun getAllQrCodes() : Flow<List<QrCodeModel>>{
        return qrCodeDao.getAllQrCodes()
    }
}

HistoryViewModel.kt

@HiltViewModel
class HistoryViewModel @Inject constructor(
    private val qrRepository: QrRepository
) : ViewModel(){

    val getQrCodes by mutableStateOf(qrRepository.getAllQrCodes())
}

HistoryScreen.kt

@Composable
fun HistoryScreen(
    navController: NavController,
    viewModel: HistoryViewModel = hiltViewModel()
) {
    val scaffoldState = rememberScaffoldState()
    val scope = rememberCoroutineScope()
    val context = LocalContext.current

    val qrCodes = viewModel.getQrCodes

    Scaffold(
        scaffoldState = scaffoldState
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(offWhite)
                .padding(top = 25.dp, start = 25.dp, end = 25.dp)
        ) {
            LazyColumn(
                modifier = Modifier.fillMaxWidth(),
                contentPadding = PaddingValues(vertical = 10.dp)
            ) {
                items(items : qrCodes) { qrCode ->
                    val qrImageBmp
                    scope.launch {
                        qrImageBmp = viewModel.processQrCode(qrCode)
                    }
                    SingleQrListItem(qrCodeModel = qrCode, imageBitmap = qrImageBmp)
                }
            }
        }
    }
}

@Composable
fun SingleQrListItem(
    qrCodeModel: QrCodeModel,
    imageBitmap: ImageBitmap
) {
    Card(
        modifier = Modifier
            .height(120.dp)
            .fillMaxWidth(),
        shape = RoundedCornerShape(8.dp),
        elevation = 8.dp,
        backgroundColor = colorPrimary
    ) {
        Row(
            modifier = Modifier
                .padding(start = 5.dp)
                .fillMaxSize()
        ) {
            Image(
                bitmap = imageBitmap,
                contentDescription = null,
                modifier = Modifier
                    .fillMaxHeight()
                    .background(offWhite)
            )
            Column(
                modifier = Modifier
                    .fillMaxHeight()
                    .background(offWhite)
                    .padding(start = 10.dp),
                verticalArrangement = Arrangement.Center
            ) {
                Text(
                    text = "Data: ${qrCodeModel.qrData}",
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(10.dp),
                    fontFamily = LatoBold,
                    fontSize = 16.sp,
                )
                Text(
                    text = "Type: ${qrCodeModel.qrType}",
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(10.dp),
                    fontFamily = LatoBold,
                    fontSize = 16.sp,
                )
                Text(
                    text = "Created at: ${qrCodeModel.qrTimestamp}",
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(10.dp),
                    fontFamily = LatoBold,
                    fontSize = 16.sp,
                )
            }
        }
    }
}

Please note I am using the following import statement:

androidx.compose.foundation.lazy.items

I have tried checking out other solutions too but it didn't work for me. I am also new to Jetpack Compose so I am actually replacing the RecyclerView from my old project.

UPDATE: I have fixed the issue by adding "val allQrCodesState by viewModel.allQrCodesFlow.collectAsState(emptyList())" in my HistoryScreen"

Answer 1

It is because You are using semicolon instead of =. Change it to = to assign the value

LazyColumn(
                modifier = Modifier.fillMaxWidth(),
                contentPadding = PaddingValues(vertical = 10.dp)
            ) {
                items(items = qrCodes) { qrCode ->
                    val qrImageBmp
                    scope.launch {
                        qrImageBmp = viewModel.processQrCode(qrCode)
                    }
                    SingleQrListItem(qrCodeModel = qrCode, imageBitmap = qrImageBmp)
                }
            }