Center Zoomed Carousel Compose组件实现是否非常规？求技术反馈

我开发了一个Center Zoomed Carousel Composable，但感觉其实现方式不太符合常规。

组件使用示例 #

CenterZoomedCarousel(
    items = pokemons,
    spacing = 4.dp,
    itemSize = itemSize,
    zoomItemSize = itemSize * 3f,
    modifier = Modifier.height(200.dp),
    scrollType = kr.co.carousel.CarouselScrollType.INFINITE
) { carouselItemState ->
    val item = carouselItemState.item
    if (carouselItemState.isFocus) name = item.second
    Card {
        Column(
            modifier = Modifier
                .background(Color.White)
                .padding(12.dp)
        ) {
            Image(
                painter = rememberAsyncImagePainter(item.first),
                contentDescription = item.second,
                modifier = carouselItemState.animatedModifier
            )
        }
    }
}

组件核心实现 #

@Composable
fun <T> CenterZoomedCarousel(
...
CarouselLazyRow(
            modifier = Modifier
                .fillMaxWidth(),
            lazyCarouselState = carouselState,
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.spacedBy(spacing)
        ) {
            carouselItems(items, scrollType) { item, isCurrentPage ->
                val targetSize = remember(isCurrentPage) {
                    if (isCurrentPage) zoomItemSize else itemSize
                }
                val targetAlpha = remember(isCurrentPage) {
                    if (isCurrentPage) 1f else unfocusedAlpha
                }
                val animatedSize by animateDpAsState(
                    targetValue = targetSize,
                    label = "animatedSize",
                    finishedListener = { carouselState.setAnimationEnd(true) }
                )
                val animatedAlpha by animateFloatAsState(targetAlpha, label = "animatedAlpha")

                content(
                    CarouselItemState(
                        item,
                        Modifier
                            .size(animatedSize)
                            .alpha(animatedAlpha),
                        isCurrentPage
                    )
                )
            }
        }

组件返回的数据类 #

data class CarouselItemState<T>(
    val item: T,
    val animatedModifier: Modifier,
    val isFocus: Boolean,
)

我觉得通过返回包含animatedModifier的数据类这种实现方式可能不符合通用实践，想知道这种方法是否较为另类，希望得到关于该实现是否非常规的反馈。

反馈与分析 #

你的实现思路本身是合理的，但确实和Jetpack Compose生态中常见的组件设计模式存在差异，核心差异点在于通过数据类传递封装好的Modifier这一设计：

为什么这种方式显得“另类”？ #

• Compose的设计哲学更强调「调用方控制UI细节」，组件通常只负责提供状态（比如isFocus），而不是直接生成并传递Modifier。这种模式下，调用方可以灵活组合自己需要的修饰效果，比如在你的例子中，如果调用方想在animatedModifier基础上添加点击事件或额外padding，虽然可行，但逻辑会变得不直观，也限制了定制空间。
• 主流轮播组件（如官方HorizontalPager、Accompanist Pager）的设计思路是传递核心状态（当前页、页面偏移量），让调用方基于这些状态自行构建UI和动画，而非封装好Modifier直接交付。

这种实现的优缺点 #

优点

• 封装性强：调用方无需关心缩放、透明度动画的具体实现，直接使用animatedModifier就能快速实现统一效果，降低了使用门槛。
• 一致性高：所有使用该组件的地方都会遵循相同的动画逻辑，避免重复编写动画代码。

缺点

• 灵活性不足：如果调用方需要修改动画参数（如时长、插值器），或在动画Modifier之外添加自定义修饰逻辑，这种封装方式会大幅增加定制难度。
• 不符合Compose惯用模式：组件内部隐藏了动画状态的管理，违背了“状态向上提升+UI组合”的设计原则，调试和扩展都会更麻烦。

优化建议 #

如果想让实现更贴合Compose通用实践，可以调整为传递状态而非Modifier的模式：

1. 组件内部管理焦点状态，将isFocus和focusProgress（0-1浮点数，代表当前项接近焦点的程度）传递给调用方。
2. 调用方基于这些状态自行构建Modifier，完全控制动画行为。

调整后的调用示例大致如下：

CenterZoomedCarousel(
    items = pokemons,
    spacing = 4.dp,
    baseItemSize = itemSize,
    zoomItemSize = itemSize * 3f,
    modifier = Modifier.height(200.dp),
    scrollType = CarouselScrollType.INFINITE
) { item, isFocus, focusProgress ->
    val animatedSize by animateDpAsState(
        targetValue = if (isFocus) zoomItemSize else itemSize,
        animationSpec = tween(durationMillis = 300)
    )
    val animatedAlpha by animateFloatAsState(
        targetValue = if (isFocus) 1f else 0.7f,
        animationSpec = tween(durationMillis = 300)
    )
    
    Card {
        Column(
            modifier = Modifier
                .background(Color.White)
                .padding(12.dp)
        ) {
            Image(
                painter = rememberAsyncImagePainter(item.first),
                contentDescription = item.second,
                modifier = Modifier.size(animatedSize).alpha(animatedAlpha)
            )
        }
    }
}

这种模式既保留了组件的核心轮播功能，又给调用方足够的定制自由度，更符合Compose的设计理念。

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