Jetpack Compose Exposed下拉菜单赋值指定变量报错问题

问题根源 #

你在ExposedDropdownMenuTax里直接给参数taxVar赋值，但这个参数是只读的String类型，不是可修改的状态变量，所以编译器报错“var cannot be changed”。正确的做法是通过你定义的taxVarChanged回调函数，通知父组件更新它的taxVar状态。

修复后的下拉菜单代码 #

修改DropdownMenuItem的onClick逻辑，调用taxVarChanged传递选中的选项：

@Composable
fun ExposedDropdownMenuTax(
    taxVar: String, 
    taxVarChanged: (newTaxVar: String) -> Unit,
    options: List<String>,
) {
    var expanded by remember {
        mutableStateOf(false)
    }
    ExposedDropdownMenuBox(
        expanded = expanded,
        onExpandedChange = { expanded = !expanded },
        Modifier
            .padding(vertical = 8.dp)
            .width(180.dp)
    ) {
        TextField(
            readOnly = true,
            value = taxVar,
            onValueChange = { taxVarChanged(it)},
            label = { Text("Tax") },
            trailingIcon = { ExposedDropdownMenuDefaults.TrailingIcon(expanded = expanded) },
            colors = ExposedDropdownMenuDefaults.textFieldColors(),
            modifier = Modifier.menuAnchor()
        )
        ExposedDropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
        ) {
            options.forEach { selectionOption ->
                DropdownMenuItem(
                    text = { Text(text = selectionOption) },
                    onClick = {
                        // 通过回调通知父组件更新状态
                        taxVarChanged(selectionOption)
                        expanded = false
                    },
                    contentPadding = ExposedDropdownMenuDefaults.ItemContentPadding,
                )
            }
        }
    }
}

父组件调用方式 #

在持有taxVar状态的父组件中，传入当前值和更新逻辑：

@Composable
fun ParentScreen() {
    val options = rememberSaveable {
        listOf("6% Sales Tax", "4% Res. Tax", "No Tax")
    }

    var taxVar by rememberSaveable {
        mutableStateOf("")
    }

    ExposedDropdownMenuTax(
        taxVar = taxVar,
        taxVarChanged = { newTax -> taxVar = newTax },
        options = options
    )
}

核心逻辑说明 #

• 父组件持有可修改的taxVar状态（通过mutableStateOf创建），将当前值和更新函数传递给子Composable。
• 子Composable不直接修改状态，而是通过回调通知父组件更新，这符合Compose的单向数据流原则，既保证了状态的可复用性，也让状态变更更易追踪。

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