如何使用HorizontalUncontainedCarousel在android jetpack compose中应用英雄策略（居中）轮播

Question

在material3指南中，他们提到了英雄策略（居中）轮播，并提供了使用视图（XML）的详细示例

https://github.com/material-components/material-components-android/blob/master/docs/components/Carousel.md

CarouselLayoutManager(HeroCarouselStrategy())

图像示例： https://raw.githubusercontent.com/material-components/material-components-android/master/docs/components/assets/carousel/hero-center.png （无法上传图片）

但我找不到任何有关如何将此策略应用于 Compose 的信息

Answer 1

您可以将 [

HorizontalPager][1]

与

contentPadding

属性结合使用。
请尝试以下代码：

@Composable
fun HeroCarousel() {
    val pagerCount = 5
    val pagerState = rememberPagerState(initialPage = 0) {
        pagerCount
    }

    HorizontalPager(
        state = pagerState,
        contentPadding = PaddingValues(60.dp)
    ) { page ->

        Column(
            modifier = Modifier
                .fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            Card(
                modifier = Modifier
                    .fillMaxSize()
                    .padding(16.dp)
            ) {
                // some Image Composable
            }
        }
    }
}