https://kotlinlang.org logo
#compose
Title
# compose
k

Kiprop Victor

11/30/2021, 2:06 PM
Hi, I have a list of items that I want to iterate through one at a time via clicks and display its content in a composable:
🧵 2
Copy code
if (
    gameTopicsItems.value.isNotEmpty()
) {
    GameTopicItem(
        modifier = modifier,
        gameTopic = gameTopicsItems.value[currentIndexState.value],
        showPreviousIcon = currentIndexState.value > 0,
        showNextIcon = currentIndexState.value < (gameTopicsItems.value.size - 1),
        onNextClick = { currentIndexState.value += 1 },
        onPreviousClick = { currentIndexState.value -= 1 },
        showShuffleIcon = gameTopicsItems.value.size > 1,
        onShuffleClick = {
            currentIndexState.value = gameTopicsItems.value.indices.random()
        }
    )
} else {
    EmptyItemsView(modifier = modifier.padding(top = paddingNormal))
}
So far this logic is working fine, but the issue is on displaying the item drawable. I have an image in the item composable that displays the image from drawable res like shown below:
Copy code
Image(
    modifier = Modifier
        .constrainAs(gameTopicIcon) {
            start.linkTo(parent.start)
            top.linkTo(<http://parent.top|parent.top>)
        }
        .fillMaxWidth()
        .wrapContentHeight()
        .padding(
            start = paddingXxl1,
            end = paddingXxl1,
            top = paddingXxl2
        ),
    painter = painterResource(
        id = gameTopic.icon
    ),
    contentDescription = gameTopic.title,
    contentScale = ContentScale.FillWidth,
)
The issue I have is, upon iterating the list a few times, the images(which are vectors) start to be displayed weirdly as shown in the screenshots below. What could be the issue?
m

maciejciemiega

11/30/2021, 5:07 PM
k

Kiprop Victor

11/30/2021, 5:19 PM
@maciejciemiega Yes, it seems to be a related issue. 👍🏾
👍 1
5 Views