为什么在HorizontalPager中，lambda返回的页码与CurrentPage不同？ [英] Why in HorizontalPager is the page number returned by the lambda different from the currentPage?

问题描述

我正在使用此组件，但遇到了问题，因为我得不到相同的结果：

HorizontalPager(count = tabTitles.size, state = pageState) { page ->
     Log.i("Polaris", "Hi, I'm page $page")
     Log.i("Polaris", "Hi, I'm currentPage $currentPage")
}

我得到的结果是：

2022-02-05 17:16:06.461 31070-31070/com.polaris I/Polaris: Hi, I'm page 0
2022-02-05 17:16:06.461 31070-31070/com.polaris I/Polaris: Hi, I'm currentPage 0
2022-02-05 17:16:06.464 31070-31070/com.polaris I/Polaris: Hi, I'm page 1
2022-02-05 17:16:06.464 31070-31070/com.polaris I/Polaris: Hi, I'm currentPage 0

为什么CurrentPage总是返回我所在的当前页面，而Page总是返回当前和下一页？

我编辑出版物以添加其余代码。问题是，给定页面参数给我的结果，在从一个页面转到另一个页面时，我在预测组件内部进行的调用会将我从服务中获得的相同信息复制到每个页面中，而不是将对应于每个页面的信息放入：

@ExperimentalPagerApi
@Composable
fun Tabs(zodiacName: String?, modifier: Modifier = Modifier) {
    val viewModel = getViewModel<DetailViewModel>()
    val tabTitles = listOf("Yesterday", "Today", "Tomorrow")
    val coroutineScope = rememberCoroutineScope()
    val pageState = rememberPagerState()
    Column(
        modifier
    ) {
        TabRow(
            modifier = Modifier.fillMaxWidth(),
            selectedTabIndex = pageState.currentPage,
            backgroundColor = Color.Transparent,
            indicator = { tabPositions ->
                TabRowDefaults.Indicator(
                    color = Color.White,
                    modifier = Modifier.pagerTabIndicatorOffset(
                        pageState,
                        tabPositions
                    ),
                    height = 2.dp
                )
            }) {
            tabTitles.forEachIndexed { index, title ->
                Tab(selected = pageState.currentPage == index,
                    onClick = {
                        coroutineScope.launch {
                            pageState.animateScrollToPage(index)
                        }
                    },
                    text = {
                        Text(
                            text = title,
                            color = Color.White,
                            fontSize = 14.sp,
                            fontFamily = Helvetica
                        )
                    })
            }
        }
        HorizontalPager(count = tabTitles.size, state = pageState) {
            when (currentPage) {
                0 -> Prediction(
                    viewModel = viewModel,
                    zodiacName = zodiacName,
                    day = "yesterday"
                )
                1 -> Prediction(
                    viewModel = viewModel,
                    zodiacName = zodiacName,
                    day = "today"
                )
                2 -> Prediction(
                    viewModel = viewModel,
                    zodiacName = zodiacName,
                    day = "tomorrow"
                )
            }
        }
    }
}

预测组件的内容如下：

@Composable
fun Prediction(viewModel: DetailViewModel, zodiacName: String?, day: String?) {
    val errorMessage = viewModel.errorMessage.value
    val horoscope = viewModel.horoscopeResponse.value
    if (errorMessage.isEmpty()) {
        LazyColumn(
            modifier = Modifier
                .padding(top = 20.dp, bottom = 10.dp, start = 10.dp, end = 10.dp)
        ) {
            item {
                LaunchedEffect(Unit) {
                    viewModel.getHoroscopeDetail(zodiacName, day)
                }
                if (horoscope.checkDescriptionContent()) {
                    PredictionCard(horoscope = horoscope)

                } else {
                    ShimmerCard()
                }
            }
        }

    } else {
        ErrorComponent(
            viewModel = viewModel,
            sign = zodiacName,
            day = day
        )
    }
}

为什么如果我使用CurrentPage，它工作正常，它进行调用并正确放置所有信息，但如果我使用lambda中包含的Page参数，它就会复制信息？

推荐答案

HorizontalPager会预先绘制一对相邻的页面，以便在开始滚动时不必等待呈现。

这正是日志中发生的情况：content针对第一页和第二页调用，但currentPage在两种情况下都是0。

在content中创建视图时，必须始终使用page参数，否则在滚动过程中会基于错误的值构建视图。滚动结束后，视图将使用新的currentPage值重新组合，因此在快速滚动时可能看起来很好，但如果滚动缓慢，则会出现问题。

您可以很容易地在下面的示例中看到这是如何工作的。查看我如何在不松开手指的情况下首次滚动页面，currentPage显示错误的数字，该数字在我松开手指和动画结束时更新。

HorizontalPager(
    count = 10,
) { page ->
    Column {
        Text("page $page")
        Text("currentPage $currentPage")
    }
}

这篇关于为什么在HorizontalPager中，lambda返回的页码与CurrentPage不同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！