Jetpack Compose嵌套可组合项的错误字段滚动指令传递问题

问题分析 #

核心问题在于：ViewModel更新错误状态后立刻发送滚动事件，但Compose侧的passengerState还未完成重组更新，导致收集滚动事件时拿到的仍是旧状态，无法正确识别错误字段。

解决方案 #

方案1：基于状态变化触发滚动（推荐） #

直接监听passengerState的变化，当错误状态出现时自动滚动到第一个错误字段，完全遵循Compose的状态驱动理念，无需额外事件流。

修改ViewModel

移除多余的needScroll相关代码，保留核心状态更新逻辑：

class MyViewModel : ViewModel() {
    private val _passengerState = MutableStateFlow(PassengerState())
    val passengerState = _passengerState.asStateFlow()

    fun onChangeField1(value: String) {
        _passengerState.update {
            it.copy(field1 = it.field1.copy(value = value, isError = false))
        }
    }

    fun onChangeField2(value: String) {
        _passengerState.update {
            it.copy(field2 = it.field2.copy(value = value, isError = false))
        }
    }

    fun onSave() {
        val currentState = _passengerState.value
        val field1Error = currentState.field1.value.isEmpty()
        val field2Error = currentState.field2.value.isEmpty()
        
        if (field1Error || field2Error) {
            _passengerState.update {
                it.copy(
                    field1 = it.field1.copy(isError = field1Error),
                    field2 = it.field2.copy(isError = field2Error),
                )
            }
        }
    }
}

修改MyScreen

无需传递滚动事件相关参数：

@Composable
fun MyScreen(
    viewModel: MyViewModel,
) {
    val passengerState by viewModel.passengerState.collectAsStateWithLifecycle()

    MyPassengerForm(
        passengerState = passengerState,
        onChangeField1 = { viewModel.onChangeField1(it) },
        onChangeField2 = { viewModel.onChangeField2(it) },
        onSave = { viewModel.onSave() },
    )
}

修改MyPassengerForm

监听passengerState变化，错误出现时滚动到对应字段：

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun MyPassengerForm(
    passengerState: PassengerState,
    onChangeField1: (String) -> Unit,
    onChangeField2: (String) -> Unit,
    onSave: () -> Unit,
) {
    val lifecycle = LocalLifecycleOwner.current.lifecycle
    val field1BringIntoView = remember { BringIntoViewRequester() }
    val field2BringIntoView = remember { BringIntoViewRequester() }
    
    // 错误状态变化时，滚动到第一个错误字段
    LaunchedEffect(passengerState) {
        lifecycle.repeatOnLifecycle(Lifecycle.State.STARTED) {
            val firstErrorRequester = when {
                passengerState.field1.isError -> field1BringIntoView
                passengerState.field2.isError -> field2BringIntoView
                else -> null
            }
            firstErrorRequester?.bringIntoView()
        }
    }

    Column(
        modifier = Modifier.verticalScroll(rememberScrollState())
    ) {
        TextField(
            modifier = Modifier
                .padding(horizontal = 16.dp, vertical = 8.dp)
                .bringIntoViewRequester(field1BringIntoView),
            value = passengerState.field1.value,
            onValueChange = onChangeField1,
            isError = passengerState.field1.isError,
            label = { Text("字段1") }
        )

        TextField(
            modifier = Modifier
                .padding(horizontal = 16.dp, vertical = 8.dp)
                .bringIntoViewRequester(field2BringIntoView),
            value = passengerState.field2.value,
            onValueChange = onChangeField2,
            isError = passengerState.field2.isError,
            label = { Text("字段2") }
        )

        Button(
            onClick = onSave,
            modifier = Modifier.padding(top = 16.dp, horizontal = 16.dp)
        ) {
            Text(text = "保存")
        }
    }
}

方案2：传递具体错误字段事件 #

如果需要仅在保存操作时触发滚动，可以让ViewModel直接发送第一个错误字段的标识，避免依赖Compose侧的状态同步。

修改ViewModel

添加scrollToErrorField流，发送具体错误字段：

class MyViewModel : ViewModel() {
    private val _passengerState = MutableStateFlow(PassengerState())
    val passengerState = _passengerState.asStateFlow()

    private val _scrollToErrorField = MutableSharedFlow<String>()
    val scrollToErrorField = _scrollToErrorField.asSharedFlow()

    fun onChangeField1(value: String) {
        _passengerState.update {
            it.copy(field1 = it.field1.copy(value = value, isError = false))
        }
    }

    fun onChangeField2(value: String) {
        _passengerState.update {
            it.copy(field2 = it.field2.copy(value = value, isError = false))
        }
    }

    fun onSave() {
        val currentState = _passengerState.value
        val field1Error = currentState.field1.value.isEmpty()
        val field2Error = currentState.field2.value.isEmpty()
        
        if (field1Error || field2Error) {
            _passengerState.update {
                it.copy(
                    field1 = it.field1.copy(isError = field1Error),
                    field2 = it.field2.copy(isError = field2Error),
                )
            }
            viewModelScope.launch {
                when {
                    field1Error -> _scrollToErrorField.emit("field1")
                    field2Error -> _scrollToErrorField.emit("field2")
                }
            }
        }
    }
}

修改MyScreen

收集滚动事件：

@Composable
fun MyScreen(
    viewModel: MyViewModel,
) {
    val passengerState by viewModel.passengerState.collectAsStateWithLifecycle()
    val scrollToErrorField by viewModel.scrollToErrorField.collectAsStateWithLifecycle(initialValue = null)

    MyPassengerForm(
        passengerState = passengerState,
        scrollToErrorField = scrollToErrorField,
        onChangeField1 = { viewModel.onChangeField1(it) },
        onChangeField2 = { viewModel.onChangeField2(it) },
        onSave = { viewModel.onSave() },
    )
}

修改MyPassengerForm

根据收到的字段标识滚动：

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun MyPassengerForm(
    passengerState: PassengerState,
    scrollToErrorField: String?,
    onChangeField1: (String) -> Unit,
    onChangeField2: (String) -> Unit,
    onSave: () -> Unit,
) {
    val field1BringIntoView = remember { BringIntoViewRequester() }
    val field2BringIntoView = remember { BringIntoViewRequester() }
    
    LaunchedEffect(scrollToErrorField) {
        when (scrollToErrorField) {
            "field1" -> field1BringIntoView.bringIntoView()
            "field2" -> field2BringIntoView.bringIntoView()
        }
    }

    Column(
        modifier = Modifier.verticalScroll(rememberScrollState())
    ) {
        TextField(
            modifier = Modifier
                .padding(horizontal = 16.dp, vertical = 8.dp)
                .bringIntoViewRequester(field1BringIntoView),
            value = passengerState.field1.value,
            onValueChange = onChangeField1,
            isError = passengerState.field1.isError,
            label = { Text("字段1") }
        )

        TextField(
            modifier = Modifier
                .padding(horizontal = 16.dp, vertical = 8.dp)
                .bringIntoViewRequester(field2BringIntoView),
            value = passengerState.field2.value,
            onValueChange = onChangeField2,
            isError = passengerState.field2.isError,
            label = { Text("字段2") }
        )

        Button(
            onClick = onSave,
            modifier = Modifier.padding(top = 16.dp, horizontal = 16.dp)
        ) {
            Text(text = "保存")
        }
    }
}

方案对比 #

• 方案1：代码简洁，完全遵循状态驱动，任何导致错误状态变化的操作都会触发滚动，适合大多数场景。
• 方案2：精准控制滚动时机，仅在保存操作时触发，适合有特殊需求的场景。

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