回应焦点

提供视觉提示,更轻松地直观呈现焦点

虽然 Material 主题中的所有可聚焦元素都已经具有焦点样式 那么您可能需要添加一些视觉元素 使用户更容易发现聚焦的元素一个很好的解决办法是 为元素选择与背景形成鲜明对比的颜色:

var color by remember { mutableStateOf(Color.White) }
Card(
    modifier = Modifier
        .onFocusChanged {
            color = if (it.isFocused) Red else White
        }
        .border(5.dp, color)
) {}

在此示例中,remember 用于存储 重组,并且每次元素都会更新其轮廓 获得或失去焦点。

实现高级视觉提示

借助 Jetpack Compose,您还可以创建更复杂、更高级的可视化 更适合您的界面的提示

  1. 首先,创建一个 IndicationInstance,以在界面中直观地绘制所需提示:
    private class MyHighlightIndicationNode(private val interactionSource: InteractionSource) :
        Modifier.Node(), DrawModifierNode {
        private var isFocused = false
    
        override fun onAttach() {
            coroutineScope.launch {
                var focusCount = 0
                interactionSource.interactions.collect { interaction ->
                    when (interaction) {
                        is FocusInteraction.Focus -> focusCount++
                        is FocusInteraction.Unfocus -> focusCount--
                    }
                    val focused = focusCount > 0
                    if (isFocused != focused) {
                        isFocused = focused
                        invalidateDraw()
                    }
                }
            }
        }
    
        override fun ContentDrawScope.draw() {
            drawContent()
            if (isFocused) {
                drawRect(size = size, color = Color.White, alpha = 0.2f)
            }
        }
    }
    
  2. 接下来,创建一个 Indication 并记住聚焦状态:
    object MyHighlightIndication : IndicationNodeFactory {
        override fun create(interactionSource: InteractionSource): DelegatableNode {
            return MyHighlightIndicationNode(interactionSource)
        }
    
        override fun hashCode(): Int = -1
    
        override fun equals(other: Any?) = other === this
    }
  3. 通过 indication() 修饰符将 IndicationInteractionSource 添加到界面中:
    var interactionSource = remember { MutableInteractionSource() }
    
    Card(
        modifier = Modifier
            .clickable(
                interactionSource = interactionSource,
                indication = MyHighlightIndication,
                enabled = true,
                onClick = { }
            )
    ) {
        Text("hello")
    }

了解焦点状态

通常,每当焦点的状态发生变化时,系统都会触发 FocusEvent 该树,focusable() 修饰符的父级可以使用 onFocusChanged() 修饰符。

如果您需要了解焦点的状态,可以结合使用这些 API onFocusChanged 修饰符。

  • 如果附加了该修饰符的可组合项,则 isFocused 会返回 true 专注
  • hasFocus 的工作方式与 isFocused 类似,但有很大区别: 它不是仅检查当前元素,而是检查元素 儿童专注
  • 每当获得焦点时,isCaptured 都会返回 true。这种情况会发生 例如,当 TextField 包含不正确的数据时,就会尝试聚焦 其他元素不会清除焦点。

这些字段如下所示:

Modifier.onFocusChanged {
    val isFocused = it.isFocused
    val hasFocus = it.hasFocus
    val isCaptured= it.isCaptured
}