Android TV 自动滑块中的图像偏移 (Jetpack Compose)

Question

滑块的第一个图像工作正常，但从第二个图像开始，图像似乎不居中，第二个图像似乎取代了第一个图像，第三个图像取代了第一个和第二个图像，依此类推。

另一个问题是，当滑块结束时，它不会返回到第一张图像，而是转到第三张图像。

这是我的图像和自动滑块的代码：

@Composable
fun SliderImage(
    @DrawableRes drawable: Int,
    @StringRes text: Int,
    modifier: Modifier = Modifier
) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center,
        modifier = modifier.fillMaxWidth().fillMaxHeight()
    ) {
        Text(
            text = stringResource(text),
            modifier = Modifier.paddingFromBaseline(top = 24.dp, bottom = 8.dp),
            style = MaterialTheme.typography.bodyMedium
        )
        Image(
            painter = painterResource(drawable),
            contentDescription = null,
            contentScale = ContentScale.FillBounds,
            modifier = Modifier
                //.size(250.dp)

        )

    }
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun AutoSlidingCarousel(
 modifier: Modifier = Modifier,
 alignment: Alignment = Alignment.Center,
 autoSlideDuration: Long = AUTO_SLIDE_DURATION,
 itemsCount: Int,
pagerState: PagerState = remember { PagerState() },
 itemContent: @Composable (index: Int) -> Unit
) {
LaunchedEffect(pagerState.currentPage) {
    delay(autoSlideDuration)
    pagerState.animateScrollToPage((pagerState.currentPage+1) % itemsCount)
}
    Box (
        modifier = modifier.fillMaxWidth(),
        contentAlignment = alignment
    ) {
        HorizontalPager(pageCount = itemsCount, state = pagerState) { page ->
            itemContent(page)
        }

        Surface(
            modifier = Modifier
                .padding(bottom = 8.dp)
                .align(Alignment.BottomCenter),
            shape = CircleShape,
            color = Color.Black.copy(alpha = 0.5f)
        ) {
            DotsIndicator(
                modifier = Modifier.padding(horizontal = 8.dp, vertical = 6.dp),
                totalDots = itemsCount,
                selectedIndex = pagerState.targetPage,
                selectedSize = 8.dp,
                unselectedSize = 6.dp
            )
        }
    }
}

我尝试过将图像居中在几个地方，但没有一个起作用。

Answer 1

看起来您遇到的 AutoSlidingCarousel 问题可能是由于 PagerState 在到达末尾时未正确重置，导致它跳转到第三页而不是循环回第一页。要解决此问题并使图像正确居中，您可以对 AutoSlidingCarousel 可组合项进行以下修改：

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun AutoSlidingCarousel(
    modifier: Modifier = Modifier,
    alignment: Alignment = Alignment.Center,
    autoSlideDuration: Long = AUTO_SLIDE_DURATION,
    itemsCount: Int,
    pagerState: PagerState = rememberPagerState(pageCount = itemsCount),
    itemContent: @Composable (index: Int) -> Unit
) {
    LaunchedEffect(pagerState.currentPage) {
        while (true) {
            delay(autoSlideDuration)
            pagerState.animateScrollToPage((pagerState.currentPage + 1) % itemsCount)
        }
    }

    Box(
        modifier = modifier.fillMaxSize(),
        contentAlignment = alignment
    ) {
        HorizontalPager(
            state = pagerState,
            modifier = Modifier.fillMaxSize()
        ) { page ->
            itemContent(page)
        }

        Surface(
            modifier = Modifier
                .padding(bottom = 8.dp)
                .align(Alignment.BottomCenter),
            shape = CircleShape,
            color = Color.Black.copy(alpha = 0.5f)
        ) {
            DotsIndicator(
                modifier = Modifier.padding(horizontal = 8.dp, vertical = 6.dp),
                totalDots = itemsCount,
                selectedIndex = pagerState.currentPage,
                selectedSize = 8.dp,
                unselectedSize = 6.dp
            )
        }
    }
}

我将 pagerState 初始化更改为使用 RememberPagerState 而不是 Remember 并提供了 pageCount。这可确保寻呼机状态正确初始化。

在 LaunchedEffect 中，我添加了一个 while (true) 循环，以连续动画滚动到下一页。这可确保轮播持续循环浏览图像。

在访问 DotsIndicator 的 selectedIndex 时，我删除了 targetPage 属性。现在直接使用pagerState.currentPage。