哈哈，今天咱聊聊这个键盘焦点的事儿。说真的，这玩意儿kan似简单，但弄得不好整个界面就跟打了鸡血似的乱七八糟。那啥，你们懂的，尤其是Zuo无障碍开发时这东西绝对是关键中的关锾！

为啥要重视键盘焦点？

那什么那个...你想啊！用户用键盘导航的时候，要是没有明显的提示哪个元素被选中了那不是瞎吗？尤其是那些视力不太好或者使用屏幕阅读器的用户们。

害！我记得有一次Zuo个项目时忽略了这个细节，结果被客户骂得狗血喷头。后来一调查发现原先百度不收录就是因为缺少合适的焦点管理。不过话说回来...

为什么百度不收录？

咳咳...这个问题问得好！百度不收录可Neng有hen多原因：

内容质量低下

技术实现存在严重问题

用户体验差

其中第三条特别重要！因为百度现在非常注重用户体验和无障碍访问。Ru果你的页面在键盘导航时表现hen差劲儿，那么...

Compose下如何搞定焦点线？

言归正传！在Jetpack Compose里面搞定键盘焦点指示器主要有几个关键点：

kotlin val focusColor = focusIndicatorColor Modifier.keyboardFocusIndicator

kan这段代码就知道了吧？focusIndicatorColor会根据当前主题自动选择深色还是浅色模式下的颜色。这一点特别重要啊！

浅色、深色、动态色背景dou要考虑

咱不Neng只考虑一种情况对不对？深色模式和浅色模式下颜色应该不同化才Neng保证可见性。

kotlin @Composable fun focusIndicatorColor: Color { return if ) { AppFocusTokens.Dark } else { AppFocusTokens.Light } }

不要散在各处写颜色

Zui开始我也犯过这个错误...把颜色直接写在各种组件里面。结果后面改起来简直是地狱难度！所以一定要集中管理这些样式。

Ripple 和 Focus Indicator 的区别

Ripplegeng适合触摸反馈哈~而Focus Indicator则是给键盘导航设计的稳定可见提示。

kotlin InteractionSource // 这里Neng拿到 FocusInteraction 等事件

自定义一个统一风格

我之前遇到一个问题：有些组件需要全行显示焦点线，有些则需要部分显示。当时还纠结了一会儿呢！

后来发现Ke以通过IndicationNodeFactory + DrawModifierNode来统一处理：

kotlin private class KeyboardFocusNode( private val interactionSource: InteractionSource, private val color: Color, ) : Modifier.Node, DrawModifierNode, CompositionLocalConsumerModifierNode { private var focused by mutableStateOf

override fun ContentDrawScope.draw {
    drawContent
    if  return
    val thickness = 2.dp.toPx
    drawRect(
        color = color,
        topLeft = Offset,
        size = Size
    )
}

}

这个东西真的太方便了吧？所有组件douNeng复用同一个风格！

注意顺序问题

当初我在写代码时曾经犯过一次傻：把画布顺序搞错了！结果导致内容把边框遮住了。

正确Zuo法应该是先画内容再画边框：

kotlin override fun ContentDrawScope.draw { drawContent // 一定要先画内容！ // 再画边框... }

不同场景不同策略

手机上Ke以隐藏触摸模式下的指示器哈~但TV、车机这些场景则必须一直显示。

kotlin val inputMode = currentValueOf.inputMode if return

千万注意共享状态

Zui开始我犯过一个超级大错误：给Button传入两个不同的interactionSource...

kotlin // 错误方式！ Button( interactionSource = remember { MutableInteractionSource }, modifier = Modifier.keyboardFocusIndicator( remember { MutableInteractionSource } // 不同source! ), )

这样会导致Button本身收到focus事件但自定义indication却没收到！记住：一定要共享同一个source才行！

Switch Row 的特殊处理

Switch Row这种组件需要全行显示效果哈~所以Row本身负责toggleable操作即可：

kotlin Row(modifier = Modifier.keyboardFocusIndicator .toggleable)

而Switch本身只负责显示状态变化就够了。

避免硬编码值

像.dp这样的值别直接写死啊~特别是线宽不要太细否则kan不清楚！

建议使用至少1.5.dp或geng粗一点才Neng保证可见性良好呢~

哈哈Zui后一下吧！

一定要集中管理所有与焦点相关的样式信息！

注意深浅模式和动态颜色支持！

各种交互事件不Neng混淆使用

布局顺序hen重要——先画内容再加装饰！

不同设备场景应对策略也要分清哦～

---