Hi i have 2 ui/screen and i ’d like to show 2 page...

# compose

[Android75]

Hi i have 2 ui/screen and i ’d like to show 2 page like viewpager with 2 fragments, so i ’m using HorizontalPager and it works very well but i have a bad effect. the page changes after i swipe and select page…. i put a video that it explains better the problem

[Android75]

Screen_recording_20230303_141359.mp4

Screen_recording_20230303_141359.mp4

[Android75]

I have two different array

[Android75]

val pagerState =
    rememberPagerState(pageCount = 2 )
Box(
    modifier = Modifier
        .fillMaxSize()
        .background(Color.White)
) {
    HorizontalPager(
        state = pagerState,
        modifier = Modifier
            .fillMaxWidth()
    ) { page ->
        if(page == 0){
            TeethButtons(modifier = Modifier, viewModel.functionList,     pagerState.currentPage) { function ->
                viewModel.onSelectToothFeature(function)
            }
        }else{
            TeethButtons(modifier = Modifier, viewModel.functionListPage2,    pagerState.currentPage) { function ->
                viewModel.onSelectToothFeature(function)
            }
        }
    }
}

[Android75]

or this code:

Column() {


    val pagerState =
        rememberPagerState(pageCount = 2)
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)
    ) {
        HorizontalPager(
            state = pagerState,
            modifier = Modifier
                .fillMaxWidth()
        ) { page ->

            TeethButtons(
                modifier = Modifier,
                if(page  == 0) viewModel.functionList else viewModel.functionListPage2,
                pagerState.currentPage
            ) { function ->
                viewModel.onSelectToothFeature(function)
            }
        }
    }
}

[Android75]

i ’d like to avoid the movement of teeth

[Android75]

@Composable
fun BoxScope.TeethButtons(
    modifier: Modifier = Modifier,
    functionList: MutableList<ToothFeature>,
    page: Int,
    onSelectToothFeature: (function: ToothFeature) -> Unit
) {

    if (page == 0) {
        Row(modifier = modifier.fillMaxWidth().height(100.dp).background(
                    GreyLight
                )
                .padding(start = 30.dp, end = 30.dp)
                .align(
                    Alignment.BottomCenter
                ),
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically
        ) {
            functionList.forEach { item ->
                DentToolButton(item) { function ->
                    onSelectToothFeature(function)
                }
            }
        }
    }else {
        Row(modifier = modifier.fillMaxWidth().height(100.dp).background(GreyLight)
                .padding(start = 30.dp, end = 30.dp).align(Alignment.BottomEnd),
            verticalAlignment = Alignment.CenterVertically
        ) {
            functionList.forEach { item ->
                DentToolButton(item) { function ->
                    onSelectToothFeature(function)
                }
                Spacer30()
            }
        }
    }
}

[Android75]

I resolved, it was a problem of images and resources 😞