Android TV Jetpack Compose自动轮播图偏移及循环异常问题

1. 图片偏移问题修复 #

问题根源在于SliderImage中的Image组件未明确约束尺寸，且HorizontalPager的页面布局未强制占满容器宽度。修改如下：

调整SliderImage的布局逻辑，确保图片占满可用宽度并保持合理比例：

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

同时给HorizontalPager添加宽度约束，保证每个页面占满容器：

HorizontalPager(
    pageCount = itemsCount,
    state = pagerState,
    modifier = Modifier.fillMaxWidth()
) { page ->
    itemContent(page)
}

2. 轮播跳转错误修复 #

问题出在LaunchedEffect的触发逻辑：以pagerState.currentPage作为key会导致动画过程中重复触发协程，引发页面跳转混乱。改用持续循环的轮播逻辑：

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

    Box(
        modifier = modifier.fillMaxWidth(),
        contentAlignment = alignment
    ) {
        HorizontalPager(
            pageCount = itemsCount,
            state = pagerState,
            modifier = Modifier.fillMaxWidth()
        ) { 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
            )
        }
    }
}

关键修改点： #

• 用rememberPagerState()替代手动创建PagerState，符合官方推荐用法
• 将轮播逻辑放在无限循环中，避免页面切换时重复触发协程
• 指示器切换为绑定currentPage，确保与当前显示页面同步

内容的提问来源于stack exchange，提问作者Kalaitos Ornitier