Jetpack Compose中如何仅初始化一次记住值并保留用户输入？

方案一：将手机号状态移至ViewModel（推荐） #

你已经用StateFlow管理数据，把手机号输入状态放到ViewModel中，能精准控制初始值的设置时机，避免重组时被API响应覆盖用户输入。

ViewModel代码 #

class AddressViewModel : ViewModel() {
    // 原有地址数据的StateFlow
    private val _shippingAddress = MutableStateFlow<ShippingAddress>(ShippingAddress.empty())
    val shippingAddress = _shippingAddress.asStateFlow()

    // 手机号中间/末尾部分的输入状态
    private val _mobileMidValue = MutableStateFlow("")
    val mobileMidValue = _mobileMidValue.asStateFlow()

    private val _mobileLastValue = MutableStateFlow("")
    val mobileLastValue = _mobileLastValue.asStateFlow()

    // 标记手机号状态是否已完成首次初始化
    private var isMobileInitialized = false

    // 更新地址数据时调用（API返回新地址后执行）
    fun updateShippingAddress(newAddress: ShippingAddress) {
        _shippingAddress.value = newAddress
        // 仅在首次获取有效地址数据时初始化手机号
        if (!isMobileInitialized && newAddress.mobileData.second != null) {
            _mobileMidValue.value = newAddress.mobileData.second.orEmpty()
            _mobileLastValue.value = newAddress.mobileData.third.orEmpty()
            isMobileInitialized = true
        }
    }

    // 供输入框调用，更新中间四位内容
    fun onMobileMidChanged(newValue: String) {
        _mobileMidValue.value = newValue
    }

    // 供输入框调用，更新末尾四位内容
    fun onMobileLastChanged(newValue: String) {
        _mobileLastValue.value = newValue
    }
}

Compose代码 #

@Composable
fun AddressScreen(viewModel: AddressViewModel = viewModel()) {
    val shippingAddress by viewModel.shippingAddress.collectAsStateWithLifecycle()
    val mobileMid by viewModel.mobileMidValue.collectAsStateWithLifecycle()
    val mobileLast by viewModel.mobileLastValue.collectAsStateWithLifecycle()

    Column(Modifier.padding(16.dp)) {
        TextField(
            value = mobileMid,
            onValueChange = viewModel::onMobileMidChanged,
            label = { Text("手机号中间四位") }
        )
        Spacer(Modifier.height(16.dp))
        TextField(
            value = mobileLast,
            onValueChange = viewModel::onMobileLastChanged,
            label = { Text("手机号末尾四位") }
        )
        Spacer(Modifier.height(16.dp))
        Button(
            onClick = {
                // 模拟修改地址后调用API更新的逻辑
                val updatedAddress = shippingAddress.copy(/* 修改地址字段 */)
                viewModel.updateShippingAddress(updatedAddress)
            }
        ) {
            Text("更新地址计算运费")
        }
    }
}

方案二：在Compose中控制初始化时机 #

如果不想改动ViewModel，可以在Compose内部标记初始化状态，仅在首次获取有效API数据时设置初始值。

@Composable
fun AddressInput(shippingAddress: ShippingAddress) {
    var isMobileInitialized by rememberSaveable { mutableStateOf(false) }
    val mobileMidValue by rememberSaveable { mutableStateOf("") }
    val mobileLastValue by rememberSaveable { mutableStateOf("") }

    // 监听地址变化，仅首次初始化手机号内容
    LaunchedEffect(shippingAddress) {
        if (!isMobileInitialized && shippingAddress.mobileData.second != null) {
            mobileMidValue = shippingAddress.mobileData.second.orEmpty()
            mobileLastValue = shippingAddress.mobileData.third.orEmpty()
            isMobileInitialized = true
        }
    }

    Column(Modifier.padding(16.dp)) {
        TextField(
            value = mobileMidValue,
            onValueChange = { mobileMidValue = it },
            label = { Text("手机号中间四位") }
        )
        Spacer(Modifier.height(16.dp))
        TextField(
            value = mobileLastValue,
            onValueChange = { mobileLastValue = it },
            label = { Text("手机号末尾四位") }
        )
    }
}

原有方案失效原因 #

• 直接用rememberSaveable { mutableStateOf(shippingAddress...) }：每次shippingAddress更新触发重组时，状态会用新的API值重新初始化，直接覆盖用户输入。
• 用rememberSaveable(Unit)或LaunchedEffect(Unit)：首次执行时API可能还未返回数据，shippingAddress为空，导致初始值设为空，且后续无法再获取API返回的初始值。

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