焦點目標

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

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

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

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

舉例來說，假設有三個卡片元件。如果第一張和第三張卡片是互動式 (定義 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 或空格鍵不會觸發點擊動作：

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

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