Fix

https://github.com/2dust/v2rayNG/issues/6153

V2rayNG/app/src/main/java/com/v2ray/ang/ui/main/MainGroupTab.kt

@@ -1,28 +1,21 @@
 package com.v2ray.ang.ui.main
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.widthIn
-import androidx.compose.foundation.lazy.LazyRow
-import androidx.compose.foundation.lazy.itemsIndexed
-import androidx.compose.foundation.lazy.rememberLazyListState
-import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ScrollableTabRow
 import androidx.compose.material3.Tab
+import androidx.compose.material3.TabRowDefaults
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
+import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.v2ray.ang.dto.GroupMapItem
 import com.v2ray.ang.dto.entities.ServersCache
@@ -37,26 +30,20 @@ fun GroupTabBar(
     modifier: Modifier = Modifier
 ) {
     val selectedIndex = selectedTabIndex.coerceIn(0, groups.lastIndex)
-    val listState = rememberLazyListState(initialFirstVisibleItemIndex = selectedIndex)
-
-    LaunchedEffect(selectedIndex) {
-        if (listState.layoutInfo.visibleItemsInfo.none { it.index == selectedIndex }) {
-            listState.animateScrollToItem(selectedIndex)
-        }
-    }
-
-    LazyRow(
-        state = listState,
+    ScrollableTabRow(
+        selectedTabIndex = selectedIndex,
         modifier = modifier
             .fillMaxWidth()
             .background(MaterialTheme.colorScheme.surface.copy(alpha = 0.95f)),
-        contentPadding = PaddingValues(horizontal = 16.dp),
-        verticalAlignment = Alignment.CenterVertically,
+        edgePadding = 16.dp,
+        indicator = { tabPositions ->
+            TabRowDefaults.SecondaryIndicator(
+                modifier = Modifier.tabIndicatorOffset(tabPositions[selectedIndex]),
+                color = MaterialTheme.colorScheme.secondary
+            )
+        }
     ) {
-        itemsIndexed(
-            items = groups,
-            key = { _, group -> group.id },
-        ) { index, group ->
+        groups.forEachIndexed { index, group ->
             val serverFlow = remember(group.id, mainViewModel) {
                 mainViewModel.serversForGroup(group.id)
             }
@@ -84,11 +71,12 @@ private fun GroupTabItem(
         "${group.remarks} (${servers.size})"
     }
 
-    Box(Modifier.widthIn(min = 56.dp)) {
     Tab(
         selected = selected,
         onClick = onClick,
-            modifier = Modifier.heightIn(min = 48.dp),
+        modifier = Modifier
+            .widthIn(min = 56.dp)
+            .heightIn(min = 48.dp),
         text = {
             Text(
                 text = text,
@@ -98,15 +86,4 @@ private fun GroupTabItem(
             )
         }
     )
-        if (selected) {
-            Box(
-                Modifier
-                    .align(Alignment.BottomCenter)
-                    .fillMaxWidth()
-                    .height(3.dp)
-                    .clip(RoundedCornerShape(3.dp))
-                    .background(MaterialTheme.colorScheme.secondary)
-            )
-        }
-    }
 }