Я пытаюсь использовать строку табуляции в Jetpack, я увеличил высоту указателя, теперь мой текст скрыт за ним, как это решить?

#android #kotlin #android-tablayout #android-jetpack-compose

Вопрос:

Я пытаюсь использовать строку табуляции в Jetpack, я увеличил высоту указателя, теперь мой текст скрыт за ним. Есть ли что-нибудь, чтобы поместить мой текст сверху на вкладке «Указатель» или что-нибудь еще

Это мое основное занятие, я использовал Scaffold и вызвал функцию для создания таблицы

 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
                )
            }
        }
    }
}
 

Вот изображение проблемы

Ответ №1:

Попробуйте поставить zIndex на модификатор. Больше для модификатора вкладки и меньше для модификатора индикатора. Модификатор индикатора:

 modifier.zIndex(1f)
 

Модификатор вкладок:

 modifier.zIndex(2f)