Jetpack Compose状态提升：MainPage的三个回调参数如何正确传入？

状态提升的核心是把组件的状态移到父组件中管理，子组件通过回调函数通知父组件更新状态。你需要在NavHost所在的父组件里先定义好这三个回调的具体逻辑，再传递给MainPage。

步骤1：在父组件中声明需要提升的状态 #

先在你放置NavHost的Compose函数里，用remember和mutableStateOf管理需要共享的状态：

@Composable
fun AppNavHost(navController: NavHostController) {
    // 管理搜索关键词的状态
    val searchQuery = remember { mutableStateOf("") }
    // 管理选中分类的状态
    val selectedCategory = remember { mutableStateOf(Category("","",0)) }
    // 你的分类、产品数据
    val categories = ... // 你的分类列表数据源
    val pros = ... // 你的产品列表数据源

    NavHost(navController = navController, startDestination = Screen.Home.route) {
        // 后续在这里填写MainPage的调用逻辑
    }
}

步骤2：实现三个回调函数并传入MainPage #

针对每个回调编写具体处理逻辑，然后作为参数传入MainPage：

composable(Screen.Home.route) {
    MainPage(
        navController = navController,
        searchQuery = searchQuery.value,
        productCategories = categories,
        selectedCategory = selectedCategory.value,
        products = pros,
        // 搜索框内容变化时，更新父组件的搜索状态
        onSearchChange = { newQuery ->
            searchQuery.value = newQuery
        },
        // 分类选中变化时，更新父组件的选中分类状态
        onCategoryChange = { newCategory ->
            selectedCategory.value = newCategory
        },
        // 产品选中时，执行对应业务逻辑（比如导航到详情页）
        onProductSelect = { selectedProduct ->
            navController.navigate(Screen.ProductDetail.createRoute(selectedProduct.id))
            // 也可以添加其他逻辑，比如记录选中日志、更新全局状态等
        }
    )
}

逻辑说明 #

• onSearchChange：当MainPage内的搜索框内容改变时，通过回调把新值传递给父组件更新状态，父组件可基于该状态做产品筛选、接口请求等操作。
• onCategoryChange：选中新分类时通知父组件更新选中状态，父组件可根据选中分类过滤产品列表。
• onProductSelect：处理产品点击后的业务逻辑，把导航这类跨组件操作放在持有导航控制器的父组件中，更符合职责划分。

这样传入三个回调参数后，你的报错就能解决，同时也符合状态提升的设计原则，让MainPage成为只负责展示的无状态组件，状态和业务逻辑统一在父组件管理。

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