Kotlin Jetpack Compose：如何在Composable函数间传值并返回修改后结果

核心问题解答 #

1. 传递并返回值的常用方案 #

Composable确实只能返回Unit，无法直接返回值，但传递MutableState不是唯一方案，目前常用的有两种：

方案一：通过MutableState传递状态

将可变状态从父Composable传给子Composable，子Composable直接修改状态值，父Composable会因状态变化自动重组，从而感知到更新后的结果。这种方式适合需要持续同步的状态。

方案二：通过高阶函数（回调）传递结果

子Composable接收一个回调函数作为参数，当子Composable内产生需要传递的结果时（如下拉菜单选择完成），调用该回调将结果传回父Composable。这种方式更适合一次性结果传递场景。

2. remember vs rememberSaveable #

• remember：仅在Composable的重组过程中保留状态，当发生**配置变化（如屏幕旋转、语言切换）**时，状态会被重置。适合临时状态（如页面内的输入草稿）。
• rememberSaveable：继承remember的重组保活能力，同时会将状态序列化后存入Bundle，配置变化后能自动恢复状态。适合需要持久化的用户选择、表单输入等状态（如你场景中用户选择的货币类型）。

补充场景实现示例 #

针对你的交易列表+添加表单+货币下拉菜单场景，以下是具体实现代码：

1. 交易列表页面 #

@Composable
fun TransactionListScreen() {
    // 用rememberSaveable保存选中的货币，配置变化不丢失
    val selectedCurrency = rememberSaveable { mutableStateOf("CNY") }
    var showAddForm by remember { mutableStateOf(false) }

    Column(modifier = Modifier.padding(16.dp)) {
        Button(onClick = { showAddForm = true }) {
            Text("添加交易")
        }

        if (showAddForm) {
            // 将状态传递给表单Composable
            AddTransactionForm(selectedCurrency = selectedCurrency)
        }

        // 交易列表展示逻辑...
    }
}

2. 添加交易表单Composable #

@Composable
fun AddTransactionForm(selectedCurrency: MutableState<String>) {
    Card(modifier = Modifier.fillMaxWidth()) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(text = "添加新交易", fontSize = 18.sp, modifier = Modifier.padding(bottom = 16.dp))
            
            // 将状态传递给下拉菜单Composable
            CurrencyDropdown(selectedCurrency = selectedCurrency)

            Button(
                onClick = { /* 提交表单逻辑，可直接使用selectedCurrency.value */ },
                modifier = Modifier.fillMaxWidth().padding(top = 16.dp)
            ) {
                Text("保存交易")
            }
        }
    }
}

3. 货币下拉菜单Composable（两种实现方式） #

方式一：接收MutableState直接修改

@Composable
fun CurrencyDropdown(selectedCurrency: MutableState<String>) {
    val currencyList = listOf("CNY", "USD", "EUR", "JPY")
    var expanded by remember { mutableStateOf(false) }

    Box(modifier = Modifier.fillMaxWidth()) {
        TextButton(onClick = { expanded = true }) {
            Text(text = selectedCurrency.value)
        }

        DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
            currencyList.forEach { currency ->
                DropdownMenuItem(
                    onClick = {
                        selectedCurrency.value = currency
                        expanded = false
                    }
                ) {
                    Text(text = currency)
                }
            }
        }
    }
}

方式二：接收回调函数传递结果

@Composable
fun CurrencyDropdown(onCurrencySelected: (String) -> Unit) {
    val currencyList = listOf("CNY", "USD", "EUR", "JPY")
    var expanded by remember { mutableStateOf(false) }
    var tempSelected by remember { mutableStateOf("CNY") }

    Box(modifier = Modifier.fillMaxWidth()) {
        TextButton(onClick = { expanded = true }) {
            Text(text = tempSelected)
        }

        DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
            currencyList.forEach { currency ->
                DropdownMenuItem(
                    onClick = {
                        tempSelected = currency
                        onCurrencySelected(currency) // 通过回调传递结果
                        expanded = false
                    }
                ) {
                    Text(text = currency)
                }
            }
        }
    }
}

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