焦點目標

焦點目標是鍵盤焦點可移動前往的目標 UI 元素。使用者可以利用 Tab 鍵或方向 (箭頭) 鍵移動鍵盤焦點：

  • Tab 鍵或 Shift + Tab 鍵：依一維外觀順序向前或向後移動焦點。
  • 方向鍵：在二維空間中移動焦點 (上、下、左和右)。

根據預設，互動式 UI 元素是焦點目標

互動式元件預設為焦點目標。換句話說，如果使用者可以輕觸或點選某個 UI 元素，該元素就是焦點目標。

舉例來說，請考慮三個 Card 元件。如果第一張和第三張卡片是互動式卡片 (定義 onClick 回呼)，但第二張卡片純粹是資訊卡片 (沒有點擊處理)，則在第一張卡片上按下 Tab 鍵時，系統會略過第二張卡片，直接前往第三張卡片。

Card(onClick = { /* First card action */ }) {
    Text("Card 1 (Interactive)")
}
Card {
    Text("Card 2 (Informational - not focusable)")
}
Card(onClick = { /* Third card action */ }) {
    Text("Card 3 (Interactive)")
}

您可以提供 onClick 參數，將第二張資訊卡設為焦點目標：

Card(onClick = { /* Second card action */ }) {
    Text("Card 2 (Now interactive and focusable)")
}

clickable 修飾符也會將自訂或標準 UI 元素轉換為焦點目標。詳情請參閱「輕觸並按壓」。

Box(
    modifier = Modifier
        .clickable { /* Handle click */ }
) {
    Text("Custom interactive element")
}

將可組合函式設為不可點選的焦點目標

focusable 修飾符可讓可組合函式成為焦點目標，不需要點擊語意。使用者可以將鍵盤焦點移至已修改的可組合函式 (例如使用無障礙工具檢查內容或捲動檢視區塊)，但按下 Enter 或 Space 鍵不會觸發點擊動作：

Box(
    modifier = Modifier
        .focusable()
) {
    Text("Non-clickable focus target")
}

讓可組合函式無法成為焦點

在某些情況下，您可能想從鍵盤導覽中排除互動元素，但不想停用指標或點擊事件。如要防止元件接收焦點，請在 focusProperties 修飾符中設定 canFocus = false：

var checked by remember { mutableStateOf(false) }

Switch(
    checked = checked,
    onCheckedChange = { checked = it },
    // Prevent component from being focused
    modifier = Modifier
        .focusProperties { canFocus = false }
)

上一頁
總覽
下一頁
焦點遍歷順序