Jetpack Compose实现可动态增删的ScrollableTabRow及独立底部导航

问题根源 #

你当前遇到的新增标签页共享同一底部导航状态的问题，核心原因有三个：

1. 所有新增的TabScreen复用了同一个GenericVM实例——默认viewModel()方法会使用父组件的ViewModelStoreOwner，导致同类型Composable共享状态容器。
2. 标签数据仅用字符串存储，缺少唯一标识，无法为每个标签绑定独立状态。
3. TabContent调用TabScreen时未传递必填的deviceName参数，导致逻辑不完整。

解决方案 #

1. 重构标签数据模型 #

定义包含唯一标识的数据类，为每个标签生成独立ID，确保状态隔离：

data class TabItem(
    val id: String,
    val name: String,
    val isDefault: Boolean = false // 标记是否为初始不可关闭标签
)

2. 更新ViewModel状态管理 #

修改TabLayoutVM，用TabItem替代字符串存储标签，新增标签时生成唯一ID：

class TabLayoutVM: ViewModel() {
    private val _tabs = mutableStateListOf(
        TabItem(id = "scanner", name = "Scanner", isDefault = true),
        TabItem(id = "bonded", name = "Bonded", isDefault = true),
        TabItem(id = "advertiser", name = "Advertiser", isDefault = true)
    )
    val tabs: List<TabItem> = _tabs

    private var _selectedTabIndex = mutableIntStateOf(0)
    val selectedTabIndex: MutableIntState = _selectedTabIndex

    var currentSelectedDevice = mutableStateOf<String?>(null)
        private set

    fun addTab(deviceName: String) {
        val newTab = TabItem(
            id = UUID.randomUUID().toString(), // 生成唯一ID
            name = deviceName
        )
        _tabs.add(newTab)
    }

    fun removeTab(index: Int) {
        val tab = _tabs[index]
        if (!tab.isDefault) { // 仅允许删除非默认标签
            _tabs.removeAt(index)
            if (selectedTabIndex.intValue >= _tabs.size) {
                selectedTabIndex.intValue = _tabs.size - 1
            }
        }
    }

    fun selectTab(index: Int) {
        selectedTabIndex.intValue = index
    }

    fun currentSelectedDeviceForGraph(device: String?) {
        currentSelectedDevice.value = device
    }
}

3. 调整TabRow渲染逻辑 #

在HomeScreenWithScrollableTabRow中，根据TabItem.isDefault判断是否显示关闭按钮，而非依赖索引：

@Composable
fun HomeScreenWithScrollableTabRow(
    modifier: Modifier = Modifier,
    tabsViewModel: TabLayoutVM = viewModel()
) {
    val scope = rememberCoroutineScope()

    Column(modifier = modifier.fillMaxSize()) {
        ScrollableTabRow(
            edgePadding = 4.dp,
            modifier = Modifier
                .fillMaxWidth()
                .background(MaterialTheme.colorScheme.onSurface),
            selectedTabIndex = tabsViewModel.selectedTabIndex.intValue
        ) {
            tabsViewModel.tabs.forEachIndexed { index, tab ->
                Tab(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height(50.dp)
                        .padding(horizontal = 10.dp),
                    selected = tabsViewModel.selectedTabIndex.intValue == index,
                    onClick = { tabsViewModel.selectTab(index) },
                    text = {
                        Row(verticalAlignment = Alignment.CenterVertically) {
                            Text(tab.name, fontWeight = FontWeight.Bold)
                            if (!tab.isDefault) { // 非默认标签显示关闭按钮
                                Spacer(modifier = Modifier.width(1.dp))
                                IconButton(onClick = { tabsViewModel.removeTab(index) }) {
                                    Icon(Icons.Default.Close, contentDescription = "关闭标签")
                                }
                            }
                        }
                    }
                )
            }
        }
        TabContent(
            tabs = tabsViewModel.tabs,
            selectedIndex = tabsViewModel.selectedTabIndex.intValue,
            onAddTab = { newTabName ->
                tabsViewModel.addTab(newTabName)
                scope.launch {
                    delay(100)
                    tabsViewModel.selectTab(tabsViewModel.tabs.size - 1)
                }
            },
            onPress = { tabsViewModel.currentSelectedDeviceForGraph(it) },
            currentSelectedDevice = tabsViewModel.currentSelectedDevice.value
        )
    }
}

4. 实现独立的TabScreen状态 #

在TabContent中传递标签的唯一ID给TabScreen，并通过viewModel(key = tabId)获取独立的ViewModel实例：

@Composable
fun TabContent(
    selectedIndex: Int,
    tabs: List<TabItem>,
    onPress: (String) -> Unit,
    onAddTab: (String) -> Unit,
    currentSelectedDevice: String?
) {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(8.dp),
        contentAlignment = Alignment.TopStart
    ) {
        when (selectedIndex) {
            0 -> ScannerScreen(currentSelectedDevice, onPress, onAddTab)
            1 -> BondedScreen()
            2 -> AdvertiserScreen()
            else -> {
                val tab = tabs[selectedIndex]
                TabScreen(deviceName = tab.name, tabId = tab.id)
            }
        }
    }
}

修改TabScreen，通过key参数确保每个标签拥有独立的GenericVM：

@Composable
fun TabScreen(deviceName: String, tabId: String, genericVM: GenericVM = viewModel(key = tabId)) {
    val bottomNavIndex = genericVM.bottomNavIndex.value
    val tabs = listOf("GPS", "GSM", "CAN", "ACC", "DEVICE")

    Scaffold(
        bottomBar = {
            ScrollableTabRow(
                selectedTabIndex = bottomNavIndex,
                modifier = Modifier.fillMaxWidth(),
                edgePadding = 4.dp
            ) {
                tabs.forEachIndexed { index, title ->
                    Tab(
                        text = { Text(title) },
                        selected = bottomNavIndex == index,
                        onClick = { genericVM.setBottomNavIndex(index) },
                        icon = {
                            when (index) {
                                0 -> Icon(Icons.Default.GpsFixed, contentDescription = null)
                                1 -> Icon(Icons.Default.SettingsInputAntenna, contentDescription = null)
                                2 -> Icon(Icons.Default.Settings, contentDescription = null)
                                3 -> Icon(Icons.Default.Lock, contentDescription = null)
                                4 -> Icon(Icons.Default.Devices, contentDescription = null)
                            }
                        }
                    )
                }
            }
        }
    ) { paddingValues ->
        Box(
            modifier = Modifier
                .padding(paddingValues)
                .fillMaxSize(),
            contentAlignment = Alignment.Center
        ) {
            Text("${deviceName} - ${tabs[bottomNavIndex]} Content")
        }
    }
}

5. 补充GenericVM实现 #

确保GenericVM持有独立的底部导航状态：

class GenericVM : ViewModel() {
    private val _bottomNavIndex = mutableIntStateOf(0)
    val bottomNavIndex: MutableIntState = _bottomNavIndex

    fun setBottomNavIndex(index: Int) {
        _bottomNavIndex.intValue = index
    }
}

核心优化点总结 #

• 唯一标识绑定：用TabItem.id作为ViewModel的key，确保每个标签的状态完全独立。
• 状态隔离：默认标签与新增标签通过isDefault区分，避免误删初始标签。
• 参数补全：修复TabScreen参数缺失问题，保证逻辑完整性。

内容的提问来源于stack exchange，提问作者The Abhishek Kumar