Jetpack Compose：ComposableB中基于参数创建可重组的emailError状态

你需要结合remember和derivedStateOf来实现需求，同时在子Composable（CB）内部管理焦点状态，既保持CB的独立性，又能让Compose正确感知依赖变化并触发重组。

核心实现代码 #

@Composable
fun ComposableB(email: String, onEmailChange: (String) -> Unit) {
    // 管理焦点请求器和焦点状态
    val focusRequester = remember { FocusRequester() }
    var isFocused by remember { mutableStateOf(false) }

    // 用remember包裹derivedStateOf，指定依赖项email和isFocused
    val emailError by remember(email, isFocused) {
        derivedStateOf {
            // 根据邮箱内容和焦点状态计算错误信息
            when {
                isFocused && email.isBlank() -> "邮箱不能为空"
                isFocused && !email.matches(Regex("[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}")) -> "请输入有效的邮箱格式"
                else -> null
            }
        }
    }

    OutlinedTextField(
        value = email,
        onValueChange = onEmailChange,
        label = { Text("邮箱") },
        isError = emailError != null,
        supportingText = { emailError?.let { Text(it) } },
        modifier = Modifier
            .focusRequester(focusRequester)
            .onFocusChanged { state ->
                isFocused = state.isFocused
            }
    )
}

关键逻辑说明 #

1. 焦点状态管理：在CB内部用remember维护isFocused状态，通过onFocusChanged监听焦点变化，确保焦点变更能触发状态更新。
2. 派生状态计算：
   • remember(email, isFocused)：指定依赖的key为传入的email和内部的isFocused，当这两个值任一变化时，重新创建派生状态的计算逻辑。
   • derivedStateOf：专门用于计算依赖其他状态的派生值，Compose会自动跟踪其内部的依赖关系，当依赖变化时重新计算错误信息，并触发CB重组。
3. 状态保留：remember确保状态在Composable重组时不会被重置，解决了之前不加remember导致的Lint错误和状态不更新问题。

为什么之前的方法行不通 #

• 无remember的mutableStateOf/derivedStateOf：每次重组都会生成新的状态实例，Compose无法在重组间跟踪状态变化，导致状态丢失或不响应依赖更新，同时Lint报错是因为这种写法违反了Compose的状态管理规范。
• 普通变量：Compose的重组系统无法感知普通变量的变化，所以即使错误信息改变，也不会触发重组更新UI。
• rememberUpdateState：这个API的作用是在重组时保留最新的参数或回调引用，不适合用于计算依赖多个状态的派生值，因此无法满足你的需求。

优势 #

这种实现方式让CB独立承担邮箱的验证逻辑和焦点状态管理，CA只需要负责传递邮箱数据和接收更新回调，符合单一职责原则，同时保持了代码的模块化和可复用性。

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