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)
+    ScrollableTabRow(
-
+        selectedTabIndex = selectedIndex,
-    LaunchedEffect(selectedIndex) {
-        if (listState.layoutInfo.visibleItemsInfo.none { it.index == selectedIndex }) {
-            listState.animateScrollToItem(selectedIndex)
-        }
-    }
-
-    LazyRow(
-        state = listState,
         modifier = modifier
             .fillMaxWidth()
             .background(MaterialTheme.colorScheme.surface.copy(alpha = 0.95f)),
-        contentPadding = PaddingValues(horizontal = 16.dp),
+        edgePadding = 16.dp,
-        verticalAlignment = Alignment.CenterVertically,
+        indicator = { tabPositions ->
+            TabRowDefaults.SecondaryIndicator(
+                modifier = Modifier.tabIndicatorOffset(tabPositions[selectedIndex]),
+                color = MaterialTheme.colorScheme.secondary
+            )
+        }
     ) {
-        itemsIndexed(
+        groups.forEachIndexed { index, group ->
-            items = groups,
-            key = { _, group -> group.id },
-        ) { index, group ->
             val serverFlow = remember(group.id, mainViewModel) {
                 mainViewModel.serversForGroup(group.id)
             }
@@ -84,29 +71,19 @@ private fun GroupTabItem(
         "${group.remarks} (${servers.size})"
     }
 
-    Box(Modifier.widthIn(min = 56.dp)) {
+    Tab(
-        Tab(
+        selected = selected,
-            selected = selected,
+        onClick = onClick,
-            onClick = onClick,
+        modifier = Modifier
-            modifier = Modifier.heightIn(min = 48.dp),
+            .widthIn(min = 56.dp)
-            text = {
+            .heightIn(min = 48.dp),
-                Text(
+        text = {
-                    text = text,
+            Text(
-                    maxLines = 1,
+                text = text,
-                    softWrap = false,
+                maxLines = 1,
-                    overflow = TextOverflow.Ellipsis
+                softWrap = false,
-                )
+                overflow = TextOverflow.Ellipsis
-            }
-        )
-        if (selected) {
-            Box(
-                Modifier
-                    .align(Alignment.BottomCenter)
-                    .fillMaxWidth()
-                    .height(3.dp)
-                    .clip(RoundedCornerShape(3.dp))
-                    .background(MaterialTheme.colorScheme.secondary)
             )
         }
-    }
+    )
 }