Jetpack Compose自定义组件聚焦样式：聚焦状态丢失问题排查

你遇到的焦点丢失问题，核心是聚焦状态变化时覆盖了原Modifier：
当focused变为true时，你直接用modifier.border(...).padding(...)创建了新的Modifier实例，完全替换了原本包含onFocusEvent监听的原modifier。Compose的Modifier是不可变对象，新实例不会继承原modifier的焦点监听逻辑，导致焦点状态的回调被移除，焦点自然立即丢失。

修改Component中Modifier的处理逻辑，在原modifier的基础上追加边框和内边距，而不是直接替换：

@Composable
fun Component(
    modifier: Modifier = Modifier,
    focused: Boolean = false
) {
   // ... 其他逻辑
   val colorStuff = if(focused) focusColors else otherColors
   // 保留原modifier，仅在聚焦时追加边框和内边距
   val finalModifier = if(focused) {
       modifier.border(BorderStroke(2.dp, Color.Red)).padding(16.dp)
   } else {
       modifier
   }
    NextComponent(
       modifier = finalModifier,
       colorStuff = colorStuff,
       // ... 其他参数
    )
}

1. 可以把聚焦相关的Modifier封装成可复用的扩展函数，方便后续多次使用：

fun Modifier.focusBorderAndPadding(focused: Boolean): Modifier {
    return this.then(
        if(focused) {
            Modifier.border(BorderStroke(2.dp, Color.Red)).padding(16.dp)
        } else {
            Modifier
        }
    )
}

然后在Component中直接使用：

val finalModifier = modifier.focusBorderAndPadding(focused)

2. 顶层的焦点状态管理可以简化，无需手动维护mutableStateOf(false)，可以使用Compose的FocusState直接传递：

// 顶层调用处
val focusRequester = remember { FocusRequester() }
val focusState = remember { mutableStateOf(FocusState.Inactive) }
val focusModifier = modifier
    .focusRequester(focusRequester)
    .onFocusChanged { focusState.value = it }

Component(modifier = focusModifier, focused = focusState.value.isFocused)

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