如何在Jetpack Compose的Material3 HorizontalMultiBrowseCarousel中检测当前处于焦点（大尺寸）的项？

我之前在项目里折腾这个实验性组件的时候，也卡过这个问题——一开始翻遍API没找到直接获取焦点项的方法，后来摸索出两个实用的路子，给你分享下：

方法一：用组件自带的状态直接获取（最省心） #

HorizontalMultiBrowseCarousel可以配合rememberHorizontalMultiBrowseCarouselState来管理它的状态，这个状态对象里的selectedItemIndex字段，就是当前处于焦点、以大尺寸显示的项的索引。它会自动跟着用户的滑动操作更新，你只需要监听这个值的变化，就能同步处理UI逻辑：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FocusedItemDemoCarousel() {
    // 初始化并记住Carousel的状态
    val carouselState = rememberHorizontalMultiBrowseCarouselState()
    
    // 用LaunchedEffect监听焦点项索引的变化
    LaunchedEffect(carouselState.selectedItemIndex) {
        val currentFocusedIndex = carouselState.selectedItemIndex
        // 这里写你自己的逻辑，比如根据索引显示/隐藏对应UI元素
        println("现在焦点在第 $currentFocusedIndex 项")
    }

    HorizontalMultiBrowseCarousel(
        state = carouselState,
        itemCount = 8, // 替换成你的实际项数量
    ) { index ->
        // 每个项的布局
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(if (index == carouselState.selectedItemIndex) Color.LightGray else Color.White)
        ) {
            // 根据是否是焦点项，展示不同的内容
            if (index == carouselState.selectedItemIndex) {
                Text(
                    text = "我是焦点项 $index",
                    modifier = Modifier.align(Alignment.Center),
                    fontSize = 20.sp
                )
            } else {
                Text(
                    text = "$index",
                    modifier = Modifier.align(Alignment.Center)
                )
            }
        }
    }
}

这个方法最省心，因为组件已经帮你处理好了焦点项的计算，你直接用现成的状态值就行。

方法二：自定义滚动监听（适合复杂场景） #

如果你的需求特殊，比如要自己定义焦点判断的逻辑，也可以通过carouselState里的scrollState来监听滚动，手动计算当前的焦点项：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CustomFocusDetectionCarousel() {
    val carouselState = rememberHorizontalMultiBrowseCarouselState()
    val coroutineScope = rememberCoroutineScope()

    // 监听滚动状态，在滚动停止后计算焦点项
    LaunchedEffect(carouselState.scrollState.isScrollInProgress) {
        if (!carouselState.scrollState.isScrollInProgress) {
            val currentIndex = carouselState.scrollState.calculateCurrentItemIndex()
            // 这里执行你的自定义逻辑
            println("滚动停稳后，焦点项是第 $currentIndex 项")
        }
    }

    HorizontalMultiBrowseCarousel(
        state = carouselState,
        itemCount = 8,
    ) { index ->
        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(if (index == carouselState.selectedItemIndex) Color.LightGray else Color.White)
        ) {
            Text(
                text = if (index == carouselState.selectedItemIndex) "焦点项 $index" else "$index",
                modifier = Modifier.align(Alignment.Center)
            )
        }
    }
}

不过一般来说第一种方法就够用了，毕竟selectedItemIndex是组件官方维护的状态，准确性和稳定性都更有保障。最后别忘了，因为HorizontalMultiBrowseCarousel是实验性组件，使用时要加上@OptIn(ExperimentalMaterial3Api::class)注解哦。

内容来源于stack exchange