android 撰写轮播，如何在使用 HorizontalUncontainedCarousel 时应用英雄策略（居中）轮播

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 的信息

编辑： 我想要它使用 HorizontalUncontainedCarousel 因为这种行为和动画

Answer 1

您可以使用

HorizontalUncontainedCarousel

可组合项来实现类似的行为。但是，似乎还不支持将当前焦点的项目居中：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CarouselDemo() {
    val carouselState = rememberCarouselState { 25 }

    Column {
        Spacer(modifier = Modifier.height(24.dp))
        HorizontalUncontainedCarousel(
            state = carouselState,
            modifier = Modifier.width(412.dp).height(221.dp),
            itemWidth = 186.dp,
            itemSpacing = 8.dp,
            contentPadding = PaddingValues(horizontal = 16.dp),
            flingBehavior = CarouselDefaults.singleAdvanceFlingBehavior(carouselState)
        ) { index ->
            Image(
                modifier = Modifier.height(205.dp).maskClip(MaterialTheme.shapes.extraLarge),
                painter = painterResource(id = R.drawable.nature),
                contentDescription = "Nature",
                contentScale = ContentScale.Crop
            )
        }
    }
}

输出：