回應焦點

每當組合結構樹中的焦點變更時，Compose 都會觸發焦點事件，讓父項和子項修飾符觀察。您可以使用 onFocusChanged 修飾符監聽焦點狀態轉換、查詢目前的焦點屬性，以及觸發狀態導向的 UI 更新。

使用 onFocusChanged 觀察焦點狀態

每當元素取得或失去焦點時，onFocusChanged 修飾符都會提供 FocusState 物件。

舉例來說，您可以觀察焦點變更，更新自訂元件狀態 (例如變更元素的邊框顏色或觸發動畫)：

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

在這個範例中，remember 會在重組期間儲存邊框顏色，並在元素焦點狀態轉換時更新邊框顏色。

FocusState 屬性

傳遞至 onFocusChanged 的 FocusState 物件提供三個主要屬性：

• isFocused：如果附加這個修飾符的特定可組合項目前具有有效的輸入焦點，則傳回 true。
• hasFocus：如果這個可組合項或其任何子項可組合項目前為焦點，則傳回 true。如果父項容器 (例如資訊卡或工具列) 需要知道其中任何子項是否處於啟用狀態，這項功能就非常實用。
• isCaptured：如果焦點目前鎖定在元素上 (例如使用 captureFocus() 進行互動視窗子互動時)，則傳回 true。擷取時，嘗試將焦點移至其他元素不會清除焦點。

Modifier.onFocusChanged { focusState ->
    val isFocused = focusState.isFocused
    val hasFocus = focusState.hasFocus
    val isCaptured = focusState.isCaptured
}