指出焦點狀態

焦點狀態會提供清楚的視覺提示，協助使用者瞭解目前哪個 UI 元素具有輸入焦點。所有互動式 Material 3 元件預設都會提供內建的焦點指標。

注意： 本指南說明如何繪製視覺焦點指標。如要以程式輔助方式監聽焦點轉移、查詢焦點標記 (isFocused、hasFocus、isCaptured) 或觸發狀態驅動的 UI 變更，請參閱「對焦點做出反應」一節。

Material Design 主題焦點指標

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")
}
FocusedState.kt

實作自訂焦點指標

如要使用自訂視覺提示 (例如縮放、邊框或發光效果)：

1. 建立 IndicationNodeFactory。
2. 觀察元素 InteractionSource 發出的焦點互動。
3. 使用 indication 修飾符套用自訂指標。

var interactionSource = remember { MutableInteractionSource() }

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