Вкладки в Jetpack Compose
Я хочу сделать вкладки с помощью Jetpack Compose, которые должны быть выровнены по левому краю. Как на изображении ниже:
Но все, что я получаю, - это вкладки, которые либо занимают всю ширину, либо вкладки с отсутствующим разделителем с конца (изображения прилагаются ниже). Я попытался внести изменения в заполнение, но по какой-то причине не смог изменить заполнение внутри отдельной вкладки.
В настоящее время я использую "пейджер-аккомпаниатор" и "индикаторы-пейджер-аккомпаниатор" с версией 0.16.0. Я даже пробовал ScrollableTabRow, но это тоже не работает для моей цели.
Код:
@Composable
fun Tabs(tabs: List<TabItem>, pagerState: PagerState) {
val scope = rememberCoroutineScope()
Row {
Column {
TabRow(
selectedTabIndex = pagerState.currentPage,
backgroundColor = Color.White,
contentColor = Color.Black,
divider = {
Divider(
thickness = 4.dp,
)
},
indicator = { tabPositions ->
TabRowDefaults.Indicator(
modifier = Modifier.customTabIndicatorOffset(tabPositions[pagerState.currentPage]),
height = 4.dp,
color = Color.Green
)
},
tabs = {
tabs.forEachIndexed { index, tab ->
Tab(
modifier = Modifier
.align(Alignment.Start)
.padding(0.dp),
text = {
Text(
text = stringResource(id = tab.name),
fontSize = 14.sp,
textAlign = TextAlign.Start
},
selected = pagerState.currentPage == index,
onClick = {
scope.launch {
pagerState.scrollToPage(index)
}
},
)
}
},
)
}
Divider(thickness = 4.dp, color = Color.Blue)
}
}
fun Modifier.customTabIndicatorOffset(currentTabPosition: TabPosition): Modifier = composed {
val indicatorWidth = 16.dp
val currentTabWidth = currentTabPosition.width
val indicatorOffset by animateDpAsState(
targetValue = currentTabPosition.left + currentTabWidth / 2 - indicatorWidth / 2,
animationSpec = tween()
)
fillMaxWidth()
.wrapContentSize(Alignment.BottomStart)
.offset(x = indicatorOffset)
.width(indicatorWidth)
}