Kotlin Compose中从子页面返回调用它的指定Tab的方法

问题背景 #

在Kotlin Compose环境中，应用包含长导航栈，某页面有三个Tab，其中两个Tab会打开同一个带参数的子页面（参数适配不同Tab功能）。从子页面返回父页面时，默认回到第一个Tab，需要改为回到发起跳转的原Tab。此前尝试在跳转前将当前tabIndex存入preIndex状态变量，返回时重新赋值但未生效，推测是状态丢失，常规方案不适用。

相关代码：

var tabIndex by remember { mutableStateOf(0) }

val tabs = listOf("Warranty", "Manufacturer", "Provider")

Column(
    modifier = Modifier
        .fillMaxWidth()
        .padding(top = 22.dp, start = 6.dp, end = 6.dp)
) {
    Text(text = "Add Warranty", fontSize = 22.sp)

    TabRow(selectedTabIndex = tabIndex) {
        tabs.forEachIndexed { index, title ->
            Tab(text = { Text(title) },
                selected = tabIndex == index,
                onClick = { tabIndex = index }
            )
        }
    }
    when (tabIndex) {
        0 -> {
            Column(
                horizontalAlignment = Alignment.Start,
                modifier = Modifier
                    .padding(top = 22.dp, start = 6.dp, end = 6.dp)
            ) {
                OutlinedTextField(
                    value = insn,
                    onValueChange = { enteredText ->
                        insn = enteredText
                    },
                    label = { Text(text = "Serial Number") },
                    placeholder = { Text(text = "Enter Serial Number") }
                )

                OutlinedTextField(
                    value = indescription,
                    onValueChange = { enteredText ->
                        indescription = enteredText
                    },
                    label = { Text(text = "Description") },
                    placeholder = { Text(text = "Enter Descrption") }
                )
            }
        }

        1 -> {
            Row(
                modifier = Modifier.fillMaxWidth(),
                verticalAlignment = Alignment.CenterVertically
            ) {
                Combobox(
                    inmanufacturer,
                    getOnlyManufacturers(viewModel),
                    "Manufacturer",
                    "Enter Manufacturer"
                )
                
                Spacer(modifier = Modifier.size(4.dp))

                Button(
                    onClick = { navController.navigate("InsertScreenProvider/${false}") },
                    colors = ButtonDefaults.buttonColors(Color.Blue)
                ) {
                    Text(text = "Insert Manufacturer")
                }
            }

            MyDate(instartdateM, btnName = "Manf. Warr. Start Date", "M. W. Start Date")

            Spacer(modifier = Modifier.size(4.dp))

            MyDate(inenddateM, btnName = "Manf. Warr. End Date", "M. W. End Date", true)
        }
        // 其他Tab代码
    }
}

注：这些Tab位于某个Screen内部，而非onCreate方法下方。

解决方案 #

1. 用rememberSaveable持久化Tab索引 #

常规remember仅在组件重组时保留状态，当父页面因导航栈操作被重建时，状态会丢失。改用rememberSaveable可将状态持久化到Bundle，页面重建时自动恢复：

// 替换原有的remember为rememberSaveable
var tabIndex by rememberSaveable { mutableStateOf(0) }

2. （可选）通过导航组件传递Tab索引，返回时同步状态 #

如果需要更精准控制（比如子页面操作可能影响返回逻辑），可在跳转时将当前Tab索引传递给子页面，返回时带回父页面更新：

• 修改跳转逻辑，携带Tab索引参数：

// Tab 1中的跳转按钮
Button(
    onClick = { 
        navController.navigate("InsertScreenProvider/${false}?tabIndex=${tabIndex}") 
    },
    colors = ButtonDefaults.buttonColors(Color.Blue)
) {
    Text(text = "Insert Manufacturer")
}

• 父页面监听子页面返回结果：

LaunchedEffect(Unit) {
    navController.currentBackStackEntry?.savedStateHandle?.getLiveData<Int>("selectedTab")?.observeForever { index ->
        tabIndex = index
    }
}

• 子页面返回时设置结果：

// 子页面的返回按钮逻辑
Button(onClick = {
    // 从路由参数中获取跳转时的tabIndex
    val originalTabIndex = navController.currentBackStackEntry?.arguments?.getInt("tabIndex") ?: 0
    navController.previousBackStackEntry?.savedStateHandle?.set("selectedTab", originalTabIndex)
    navController.popBackStack()
}) {
    Text("返回")
}

3. 检查导航配置，避免父页面被销毁 #

确保导航跳转时未使用launchSingleTop = true等会销毁父页面的配置，默认情况下Compose导航的navigate方法不会销毁前一个页面，若有特殊配置需调整，防止父页面重建导致状态丢失。

内容的提问来源于stack exchange，提问作者jetberrocal