指示焦点状态

聚焦状态提供清晰的视觉提示，帮助用户了解哪个界面元素当前处于输入焦点。所有互动式 Material 3 组件默认提供内置的焦点指示。

Material 主题焦点指示

Material 组件使用 ripple 函数和 LocalIndication 来绘制视觉状态变化。如需将标准 Material 焦点反馈附加到自定义组件，请执行以下操作：

  1. 使用 remember { MutableInteractionSource() } 创建 MutableInteractionSource。
  2. 将互动来源传递给 indication 修饰符，同时传递 ripple()。

val interactionSource = remember { MutableInteractionSource() }

Box(
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = null
        ) { /* onClick */ }
        .indication(
            interactionSource = interactionSource,
            indication = ripple()
        )
) {
    Text("Custom component with Material ripple")
}

实现自定义焦点指示

对于自定义视觉提示（例如缩放、边框或发光效果）：

  1. 创建 IndicationNodeFactory。
  2. 观察元素 InteractionSource 发出的焦点互动。
  3. 使用 indication 修饰符应用自定义指示器。

var interactionSource = remember { MutableInteractionSource() }

Card(
    modifier = Modifier
        .clickable(
            interactionSource = interactionSource,
            indication = MyHighlightIndication,
            enabled = true,
            onClick = { }
        )
) {
    Text("hello")
}

上一页
恢复焦点
下一页
回应焦点