Jetpack Compose中点击Tab调用lambda传Int值报错如何修复？

问题根源 #

你给onTabSelected参数错误添加了@Composable注解，该回调是在Tab的onClick点击事件中触发，onClick属于普通函数作用域，不属于Composable重组上下文，无法调用带@Composable注解的函数，这是报错的核心原因。

修复步骤 #

1. 移除onTabSelected参数的@Composable注解，将其改为普通函数类型：

@ExperimentalPagerApi
@Composable
fun Tabs(
    pagerState: PagerState,
    modifier: Modifier,
    state: MyJobsState,
    // 此处移除@Composable注解即可
    onTabSelected: (tabPage: Int) -> Unit
) {
    val scope = rememberCoroutineScope()
    ScrollableTabRow(
        selectedTabIndex = pagerState.currentPage,
        indicator = { tabPositions ->
            TabRowDefaults.Indicator(
                modifier.pagerTabIndicatorOffset(pagerState, tabPositions),
                height = 0.dp,
            )
        },
        edgePadding = 0.dp,
        divider = {}
    ) {
        state.items?.forEachIndexed { index, _ ->
            Tab(
                text = {
                    Text(
                        text = state.items[index].title ?: "")
                },
                selected = pagerState.currentPage == index,
                onClick = {
                    scope.launch {
                        pagerState.animateScrollToPage(index)
                    }
                    onTabSelected.invoke(index)
                }
            )
        }
    }
}

2. 如果需要在回调触发后更新UI，直接在父组件调用Tabs时，把回调拿到的下标赋值给remember包裹的可变状态即可，Compose会自动监听状态变化触发重组，无需给回调添加@Composable注解。
3. 可选优化：如果需要保证回调在Tab页切换完成后再触发，可以把回调调用逻辑放到协程的animateScrollToPage之后：

onClick = {
    scope.launch {
        pagerState.animateScrollToPage(index)
        // 滚动完成后再触发回调，保证状态同步
        onTabSelected.invoke(index)
    }
}

补充说明 #

你之前尝试使用LaunchedEffect和协程没有解决问题，是因为报错的核心是函数上下文不匹配，和副作用、协程逻辑无关，修改参数类型即可解决问题。

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