我正在尝试在 Jetpack Compose 中使用 Tab Row 我增加了指示器高度，现在我的文本隐藏在它后面如何解决？

Question

我正在尝试在 Jetpack Compose 中使用 Tab Row 我增加了指示器高度，现在我的文本隐藏在它后面。有没有什么可以把我的文字放在标签指示器或其他任何东西的顶部

这是我的主Activity 我使用了 Scaffold 并调用了一个函数来创建 TabLayout

Scaffold(backgroundColor = Color.Black) {
            val tabs = listOf(
                "Option1 ", "Option 2"
            )
            val scope= rememberCoroutineScope()
            val pagerState= rememberPagerState(pageCount = tabs.size)
            ChooseDeliveryPickup(
                pagerState,
                tabs,
                { Log.e("Hello","Yes")},
                scope
            )
        }

这是函数

@ExperimentalPagerApi
@Composable
fun ChooseDeliveryPickup(
    pagerState: PagerState,
    tabs: List<String>,
    onClick: () -> Unit,
    scope: CoroutineScope
) {
    TabRow(
        selectedTabIndex = pagerState.currentPage, backgroundColor = Color(0xFFEAECED),
        modifier = Modifier
            .padding(16.dp)
            .height(40.dp)
            .width(295.dp)
            .clip(RoundedCornerShape(12.dp)),
        indicator = { tabPositions ->
            Box(
                Modifier
                    .tabIndicatorOffset(tabPositions[pagerState.currentPage])
                    .height(139.dp)
                    .padding(4.dp)
                    .border(width = 139.dp, shape = RoundedCornerShape(8.dp), color = Color.White)

            ){

            }
        }
    ) {
        tabs.forEachIndexed { index, s ->
            Tab(selected = pagerState.currentPage == index, onClick = {
                onClick()
                scope.launch {
                    pagerState.animateScrollToPage(index)
                }
            }) {

                var color = if (pagerState.currentPage == index) {
                    Color(0xFF0F0B28)

                } else {
                    Color(0xFF585969)
                }

                Text(
                    text = s,
                    color = color,
                    fontFamily = interSemiBold,
                    fontSize = 12.sp,
                    lineHeight = 18.sp,
                    letterSpacing = (0.02).sp
                )
            }
        }
    }
}

Here is image of problem

Answer 1

尝试在修饰符上放置一个 zIndex。制表符修饰符较大，指示符修饰符较小。指标修饰符：

modifier.zIndex(1f)

制表符修饰符：

modifier.zIndex(2f)

我正在尝试在 Jetpack Compose 中使用 Tab Row 我增加了指示器高度，现在我的文本隐藏在它后面如何解决？

I am trying to use Tab Row in Jetpack compose i increased the indicatior height, now my text is hidden behind it How to resolve it?

android

kotlin

android-tablayout

android-jetpack-compose