我在 jetpack compose 中通过从 API 获取数据制作了水平寻呼机，但我不知道如何让我的寻呼机像滑块一样自动滚动

Question

你愿意帮助我吗，我不知道我在做什么。我想制作一个仪表板，里面有横幅。所以我决定制作横幅并从 api 获取数据以将其填充到横幅中。但我想让它自动滚动

仪表盘屏幕

@OptIn(ExperimentalPagerApi::class, FlowPreview::class)
@Composable
fun DashboardScreen(
    navController: NavHostController = rememberAnimatedNavController(),
    datastore: DataStoreRepository,
    dashboardViewModel: DashboardViewModel = hiltViewModel(),
) {
    val state by dashboardViewModel.dashboardState.collectAsState()
    val username = datastore.getUsername().collectAsState(initial = "")
    val company = datastore.getUserCompany().collectAsState(initial = "")

    val pagerState = rememberPagerState()

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(horizontal = 8.dp, vertical = 20.dp)
            .padding(12.dp)
            .verticalScroll(rememberScrollState()),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        TopSectionDashboard(name = username.value, company = company.value)
        Spacer(modifier = Modifier.height(20.dp))
        Box {
            state.dashboard?.let {
                BannerSlider(
                    state = pagerState,
                    listBanner = it.banner
                )

                Indicators(
                    size = it.banner.size,
                    index = pagerState.currentPage,
                    modifier = Modifier.align(Alignment.BottomCenter)
                )
            }
        }
        if (state.isLoading) {
            Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxSize()) {
                CircularProgressIndicator()
            }
        }
    }
}

横幅滑块

 @OptIn(ExperimentalPagerApi::class)
    @Composable
    fun BannerSlider(
        modifier: Modifier = Modifier,
        state: PagerState,
        listBanner: List<Banner>,
    ) {
        HorizontalPager(
            count = listBanner.size,
            state = state
        ) {
            BannerItem(
                item = Banner(
                    count = listBanner[it].count,
                    text = listBanner[it].text,
                    icon = listBanner[it].icon
                ),
            )
        }
    }

横幅项目

@Composable
fun BannerItem(item: Banner, 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.text,
                    fontFamily = Poppins,
                    fontSize = 20.sp,
                    color = Color.White,
                    modifier = Modifier.padding(horizontal = 24.dp)
                )
                Text(
                    text = "${item.count}",
                    fontFamily = Poppins,
                    fontSize = 25.sp,
                    fontWeight = FontWeight.Bold,
                    color = Color.White,
                    modifier = Modifier
                        .padding(horizontal = 24.dp)
                        .offset(y = (-10).dp)
                )
            }
            AsyncImage(
                model = item.icon,
                contentDescription = "$item.title",
                modifier = Modifier.size(120.dp),
                alignment = Alignment.CenterEnd
            )
        }
    }
}

请帮助我，我不知道。我真的很感谢帮助我的人

Answer 1

以一种简单的方式，你可以通过

LaunchedEffect(pagerState.currentPage) {
        launch {
            delay(2000L)
            with(pagerState) {
                 val nextPage = if (currentPage < pageCount - 1) currentPage + 1 else 0
                 animateScrollToPage(nextPage)
             }
       }
}

请记住将count 也传递给HorizontalPager