Why my automatic pager stop runing after i swipe it manually?-CodePudding

I have following the step to make automatic viewpager in github conversation issue, and im getting bug in my viepager , im using jetpack compose. I have following the step to make automatic viewpager in github conversation issue, and im getting bug in my viepager , im using jetpack compose.

My Pager Configruatin

Box {
    HorizontalPager(count = items.size, state = pagerState) { page ->
        AutomaticSliderCard(item = items[page],Modifier.onSizeChanged { pageSize = it })
    }

**MyScreen **

@OptIn(ExperimentalPagerApi::class)
@Composable
fun DashboardScreen(navController: NavController) {
    val items = DashboardSlider1.getData()
    val itemsBanner = dummyBannerDashboardItem
    val itemsKenalan = dummyKenalanDashboardItem

    val pagerState = rememberPagerState()
    var pageSize by remember { mutableStateOf(IntSize.Zero) }
    val lastIndex by remember(pagerState.currentPage) {
        derivedStateOf { pagerState.currentPage == items.size - 1 }
    }

    val pagerStateBanner = rememberPagerState()


    LaunchedEffect(Unit) {
        while (true) {
            yield()
            delay(2000)
            pagerState.animateScrollBy(
                value = if (lastIndex) -(pageSize.width.toFloat() * items.size) else pageSize.width.toFloat(),
                animationSpec = tween(if (lastIndex) 2000 else 1400)
            )
        }
    }

@Composable
fun AutomaticSliderCard(item: DashboardSlider1, modifier: Modifier = Modifier) {
    Box(
        modifier = modifier
            .fillMaxWidth()
            .height(200.dp)
    ) {
        Image(
            painter = painterResource(id = R.drawable.background_dashboard_slider1),
            contentDescription = null,
            modifier = Modifier.fillMaxSize(),
            alignment = Alignment.Center,
            contentScale = ContentScale.Crop,
        )
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .align(Alignment.CenterStart)
                .offset(y = -20.dp)
        ) {
            Column(horizontalAlignment = Alignment.Start) {
                Text(
                    text = item.title.toString(),
                    fontFamily = Poppins,
                    fontSize = 20.sp,
                    color = Color.White,
                    modifier = Modifier.padding(horizontal = 24.dp)
                )
                Text(
                    text = "${item.numberCount}",
                    fontFamily = Poppins,
                    fontSize = 25.sp,
                    fontWeight = FontWeight.Bold,
                    color = Color.White,
                    modifier = Modifier
                        .padding(horizontal = 24.dp)
                        .offset(y = -10.dp)
                )
            }
            Image(
                painter = painterResource(id = item.image),
                contentDescription = null,
                modifier = Modifier.size(120.dp),
                alignment = Alignment.CenterEnd
            )
        }
    }
}

CodePudding user response：

Try use

LaunchedEffect(Unit) {
    snapshotFlow { pagerState.currentPage }
        .debounce(2000L)
        .onEach {
            pagerState.animateScrollBy(
                value = if (lastIndex) -(pageSize.width.toFloat() * items.size) else pageSize.width.toFloat(),
                animationSpec = tween(if (lastIndex) 2000 else 1400)
            )
        }
        .launchIn(this)
}

Here snapshotFlow will listen your current page and start animation if last changes was be make more than 2 seconds ago

CodePudding user response：

Try updating your LaunchedEffect key

LaunchedEffect(key1= Unit, key2= pagerState.currentPage) {
    while (true) {
        yield()
        delay(2000)
        pagerState.animateScrollBy(
            value = if (lastIndex) -(pageSize.width.toFloat() * items.size) else pageSize.width.toFloat(),
            animationSpec = tween(if (lastIndex) 2000 else 1400)
        )
    }
}

Also, i advice you to use animateScrollToPage instead of animateScrollBy:

LaunchedEffect(key1= Unit, key2= pagerState.currentPage) {
    while (true) {
        yield()
        delay(2000)
        var newPage = pagerState.currentPage   1
        if (newPage > medias.lastIndex) newPage = 0
        pagerState.animateScrollToPage(newPage)
    }
}