Вкладки в 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)
}

0 ответов

Другие вопросы по тегам