ScrollableTabRow Сохранять вкладку всегда по центру ⇐ Android

[Anonymous]

Я работаю с ScrollableTabRow в Jetpack Compose и хочу, чтобы выбранная вкладка всегда располагалась по горизонтали внутри ScrollableTabRow, даже при прокрутке. Сам элемент ScrollableTabRow должен иметь возможность прокрутки, если вкладок слишком много, а выбранная вкладка всегда должна находиться в центре экрана, когда она выбрана.
Примечание. Даже первый элемент должен быть центрирован. а также.


@Composable
fun BoxScope.ActionControls() {
val context = LocalContext.current

// List of tabs
val tabs = listOf("Photo", "Video", "Portrait", "Night Mode")

// State for Pager and ScrollableTabRow
val pagerState = rememberPagerState(pageCount = { tabs.size })

// Get a coroutine scope to launch scrolling actions
val scope = rememberCoroutineScope()

Column(
modifier = Modifier
.fillMaxWidth()
.align(Alignment.BottomCenter)
.padding(16.dp)
) {

ScrollableTabRow(
selectedTabIndex = pagerState.currentPage,
edgePadding = 0.dp,
containerColor = Color.Transparent,
divider = {},
modifier = Modifier.fillMaxWidth(), // Here, we bind scrollState to the tab row
indicator = { tabPositions ->
TabRowDefaults.SecondaryIndicator(
Modifier.tabIndicatorOffset(tabPositions[pagerState.currentPage]),
height=2.dp,
color = Color.Yellow)
}

) {
tabs.forEachIndexed { index, title ->
Tab(
selected = pagerState.currentPage == index,
selectedContentColor = Color.Yellow,
unselectedContentColor = Color.White,
onClick = {
// Launch a coroutine to animate the scroll to the position
scope.launch {
pagerState.animateScrollToPage(index)

}
},
text = {
Text(text = title)
}
)
}
}

// HorizontalPager for the swipeable content
HorizontalPager(state = pagerState,
pageSize = PageSize.Fill,
contentPadding = PaddingValues(vertical = 16.dp)
) { page ->

when(page){
0->{

Row(modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically
){

Box(modifier = Modifier.weight(1f),
contentAlignment = Alignment.Center
) {

Box(
modifier = Modifier
.size(60.dp) // Outer circle size (border area)
.border(
width = 1.dp, // Border thickness
color = Color.White, // Border color
shape = CircleShape
)
) {

}

}
Box(modifier = Modifier.weight(1f),
contentAlignment = Alignment.Center){
Box(
modifier = Modifier
.size(80.dp) // Outer circle size (border area)
.border(
width = 2.dp, // Border thickness
color = Color.White, // Border color
shape = CircleShape
)
) {
// Circular Button to capture photo with a white-filled circle and border gap
Box(
modifier = Modifier
.align(Alignment.Center)
.padding(8.dp)
.size(70.dp) // Size of the circle
.background(
color = Color.White,
shape = CircleShape
)
.clickable {

},
contentAlignment = Alignment.Center
) {

}
}
}

Box(modifier = Modifier.weight(1f),
contentAlignment = Alignment.Center) {

Box(
modifier = Modifier
.size(40.dp) // Outer circle size (border area)
.border(
width = 1.dp, // Border thickness
color = Color.White, // Border color
shape = CircleShape
).padding(8.dp)
) {

IconButton({}) {
Icon(Icons.Filled.Cameraswitch, contentDescription = null)
}
}
}

}
}
else->{

Row(modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.Center
){

}

}
}
}

}
}



Подробнее здесь: https://stackoverflow.com/questions/793 ... ays-center