Kolejność przechodzenia między elementami

Użytkownicy mogą przenosić zaznaczenie klawiatury między elementami interfejsu za pomocą klawisza Tab lub klawiszy kierunkowych (strzałek / pada kierunkowego):

  • Tab / Shift+Tab: przesuwanie zaznaczenia do przodu lub do tyłu w jednowymiarowej kolejności wyświetlania.
  • Klawisze kierunkowe: przesuwanie zaznaczenia w 2 wymiarach (w górę, w dół, w lewo i w prawo).

Jednowymiarowe przechodzenie fokusu

W jednowymiarowym przechodzeniu zaznaczenie przesuwa się po interfejsie po naciśnięciu klawisza Tab zgodnie z kolejnością wyświetlania elementów na ekranie.

Jeśli na przykład 4 przyciski są ułożone w wierszach:

Column {
    Row {
        Button(onClick = { /* ... */ }) { Text("1st") }
        Button(onClick = { /* ... */ }) { Text("2nd") }
    }
    Row {
        Button(onClick = { /* ... */ }) { Text("3rd") }
        Button(onClick = { /* ... */ }) { Text("4th") }
    }
}

Naciśnięcie klawisza Tab powoduje przeniesienie zaznaczenia na przyciski w tej kolejności:

  1. Pierwszy przycisk (u góry po lewej)
  2. Drugi przycisk (górny)
  3. Trzeci przycisk (na dole po lewej)
  4. Czwarty przycisk (na dole)

Naciśnięcie klawisza Tab na ostatnim elemencie powoduje powrót do pierwszego elementu. Naciśnięcie Shift + Tab powoduje przeniesienie zaznaczenia w odwrotnej kolejności.

Dwuwymiarowe przechodzenie fokusa

Naciśnięcie klawiszy strzałek na klawiaturze lub użycie pada kierunkowego powoduje dwuwymiarowe przechodzenie między elementami.

W przypadku nawigacji dwuwymiarowej system sprawdza współrzędne geometryczne i granice przestrzenne elementów interfejsu, aby określić najbliższy cel w żądanym kierunku.

Dwuwymiarowe przechodzenie między elementami nie zapętla się. Jeśli użytkownik naciśnie klawisz W dół, gdy zaznaczony jest element na samym dole, zaznaczenie pozostanie na tym elemencie, zamiast przeskakiwać na górę ekranu.

Resetowanie przechodzenia fokusu za pomocą kliknięć wskaźnika

Podczas przełączania się między klawiaturą fizyczną a myszą lub panelem dotykowym na komputerze lub urządzeniu z dużym ekranem:

  • Usuwanie zaznaczenia po kliknięciu: kliknięcie myszą lub touchpadem nieinteraktywnego obszaru powoduje usunięcie zaznaczenia aktywnego elementu.
  • Ponowne uruchomienie przechodzenia: po wyczyszczeniu zaznaczenia następne naciśnięcie klawisza Tab powoduje ponowne uruchomienie jednowymiarowego przechodzenia od pierwszego celu zaznaczenia w kolejności wizualnej, a nie od poprzednio aktywnego elementu. Działa to tak samo jak dwuwymiarowe przechodzenie fokusa. Klawisze kierunkowe przenoszą zaznaczenie klawiatury na najbliższy element docelowy w żądanym kierunku.

Szczegółowe informacje o programowym usuwaniu zaznaczenia znajdziesz w artykule Przenoszenie i usuwanie zaznaczenia.

Dostosowywanie kolejności przechodzenia między elementami

Możesz dostosować sposób przechodzenia za pomocą modyfikatora focusProperties.

Dostosowywanie jednowymiarowej kolejności przechodzenia między elementami

Aby zastąpić jednowymiarowe przechodzenie, określ właściwość next lub previous za pomocą FocusRequester:

  1. Utwórz obiekt FocusRequester za pomocą remember { FocusRequester() }.
  2. Dołącz FocusRequester do docelowego elementu kompozycyjnego za pomocą modyfikatora focusRequester.
  3. Zastosuj modyfikator focusProperties do elementu kompozycyjnego źródła i przypisz FocusRequester do next (w przypadku klawisza Tab) lub previous (w przypadku klawiszy Shift+Tab).

val (first, second, third) = remember { FocusRequester.createRefs() }

Column {
    Button(
        onClick = { /* ... */ },
        modifier = Modifier
            .focusRequester(first)
            .focusProperties { next = third }
    ) {
        Text("First (Tab jumps to Third)")
    }
    Button(
        onClick = { /* ... */ },
        modifier = Modifier.focusRequester(second)
    ) {
        Text("Second")
    }
    Button(
        onClick = { /* ... */ },
        modifier = Modifier.focusRequester(third)
    ) {
        Text("Third")
    }
}

Dostosowywanie dwuwymiarowej kolejności przechodzenia między elementami

Podobnie możesz zastąpić dwuwymiarowe przechodzenie zaznaczenia, przypisując instancje FocusRequester do up, down, start, end, left lub right w focusProperties:

val (topButton, bottomButton) = remember { FocusRequester.createRefs() }

Button(
    onClick = { /* ... */ },
    modifier = Modifier
        .focusRequester(topButton)
        .focusProperties {
            down = bottomButton
            right = bottomButton
        }
) {
    Text("Top button")
}
Button(
    onClick = { /* ... */ },
    modifier = Modifier.focusRequester(bottomButton)
) {
    Text("Bottom button")
}

Aby zablokować nawigację z fokusem w określonym kierunku (np. na granicach układu), przypisz do tej właściwości wartość FocusRequester.Cancel (np. down = FocusRequester.Cancel). Aby wyraźnie zachować domyślny algorytm przechodzenia systemu w danym kierunku, przypisz wartość FocusRequester.Default.