如何阻止Jetpack Compose中Products页面返回时重组合？

问题根源 #

1. 用when语句直接切换Home/Products组件的方式，没利用Navigation Component的状态管理能力。从商品详情页返回时，Products组件会被重新创建，导致LaunchedEffect(Unit)再次执行，触发重复请求。
2. getAllProducts()方法未做缓存处理，每次调用都会发起新的网络请求。

解决方案 #

方案1：用Navigation Component管理页面路由 #

将Home和Products注册为导航目的地，通过抽屉点击触发navController.navigate切换页面，而非依赖selectedItem控制条件渲染。Navigation会自动维护页面状态，从详情页返回时不会重建Products页面。

步骤1：定义导航图

@Composable
fun MainNavGraph(navController: NavHostController) {
    NavHost(navController = navController, startDestination = "home") {
        composable("home") {
            Home()
        }
        composable("products") {
            Products(viewModel = hiltViewModel())
        }
        composable("product_detail/{productId}") { backStackEntry ->
            val productId = backStackEntry.arguments?.getString("productId") ?: ""
            ProductDetail(productId = productId)
        }
    }
}

步骤2：修改抽屉点击逻辑

// 抽屉项点击事件
NavigationDrawerItem(
    label = { Text(item.name) },
    icon = { Icon(item.icon, contentDescription = item.name) },
    selected = currentDestination?.route == item.route,
    onClick = {
        navController.navigate(item.route) {
            // 避免重复入栈，保留页面状态
            popUpTo(navController.graph.startDestinationId) { saveState = true }
            launchSingleTop = true
            restoreState = true
        }
        drawerState.close()
    }
)

步骤3：调整主布局结构

ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        val navController = rememberNavController()
        val currentDestination by navController.currentDestinationAsState()
        // 渲染Home和Products抽屉项
        NavigationDrawerItem(route = "home", name = "Home", icon = Icons.Default.Home)
        NavigationDrawerItem(route = "products", name = "Products", icon = Icons.Default.List)
    },
    content = {
        Scaffold(topBar = {}) { padding ->
            val navController = rememberNavController()
            Box(modifier = Modifier.fillMaxSize().padding(padding)) {
                MainNavGraph(navController = navController)
            }
        }
    }
)

方案2：给ViewModel添加请求缓存逻辑 #

即使页面意外重建，也能通过缓存避免重复请求。在MainViewModel中检查数据是否已加载，仅当数据为空时发起请求：

class MainViewModel @Inject constructor(private val repo: ProductRepo) : ViewModel() {
    private val _products = mutableStateListOf<Product>()
    val products: List<Product> get() = _products

    fun getAllProducts() {
        // 已有数据直接返回，不重复发起请求
        if (_products.isNotEmpty()) return
        
        viewModelScope.launch {
            val result = repo.getProducts()
            if (result.isSuccess) {
                _products.clear()
                _products.addAll(result.getOrNull() ?: emptyList())
            }
        }
    }
}

方案3：优化LaunchedEffect触发条件 #

将LaunchedEffect的依赖key从Unit改为viewModel.products，确保只有数据为空时才触发请求：

fun Products(
    viewModel: MainViewModel = hiltViewModel(),
) {
    LaunchedEffect(viewModel.products) {
        if (viewModel.products.isEmpty()) {
            viewModel.getAllProducts()
        }
    }
    // 原有UI渲染逻辑保持不变
}

最终建议 #

优先采用方案1，从根源解决页面重建问题；搭配方案2的缓存逻辑，双重保障不会重复发起请求。

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