android 我尝试在Jetpack compose中使用选项卡行,我增加了指示符的高度,现在我的文本隐藏在它后面如何解决它?

o75abkj4  于 2023-02-20  发布在  Android
关注(0)|答案(2)|浏览(103)

我尝试在Jetpack组合中使用标签行,我增加了指示符的高度,现在我的文本隐藏在它后面。是否有任何将我的文本放在标签指示符或其他任何东西的顶部
这是我的主要活动,我使用了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

mcvgt66p

mcvgt66p1#

尝试在修饰符上放置一个zIndex。制表符修饰符的zIndex较大,指示符修饰符的zIndex较低。指示符修饰符:

modifier.zIndex(1f)

制表符修饰符:

modifier.zIndex(2f)
cngwdvgl

cngwdvgl2#

我通过以下方法解决了这个问题:

indicator = 
{
    TabRowDefaults.Indicator(                
        modifier = Modifier
            .zIndex(-1f)
             /* ... */
    )
}

简单地将***.zIndex(-1f)***添加到指示符修改符

相关问题