指出焦點狀態

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

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")
}

實作自訂焦點指標

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

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

var interactionSource = remember { MutableInteractionSource() }

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

上一頁
還原焦點
下一頁
回應焦點