Kolejność przechodzenia między elementami

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

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

Przechodzenie fokusu w jednym wymiarze

W przypadku jednowymiarowego przenoszenia zaznaczenia klawisz Tab przenosi zaznaczenie w interfejsie na podstawie kolejności wizualnej na ekranie.

Na przykład, gdy 4 przyciski są ułożone w rzędach:

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 kolejne przyciski w tej kolejności:

  1. 1 przycisk (góra – początek)
  2. 2nd button (top-end)
  3. 3rd button (bottom-start)
  4. 4 przycisk (na dole)

Naciśnięcie Tab na ostatnim elemencie powoduje powrót do pierwszego elementu, na którym można ustawić fokus. Naciśnięcie Shift+Tab powoduje przesunięcie zaznaczenia w odwrotnej kolejności.

Przechodzenie między elementami w 2D

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

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

Dwuwymiarowe przechodzenie fokusu nie zawija się. Jeśli użytkownik naciśnie klawisz w dół, gdy zaznaczony jest element znajdujący się na samym dole, zaznaczenie pozostanie na tym elemencie, zamiast przeskoczyć na górę ekranu.

Resetowanie przechodzenia między elementami za pomocą kliknięć wskaźnikiem

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

  • Wyczyść fokus po dotknięciu lub kliknięciu: kliknięcie lub dotknięcie myszą lub touchpadem nieinteraktywnego obszaru zwalnia fokus z aktywnego elementu.
  • Ponowne uruchomienie przechodzenia: po usunięciu zaznaczenia kolejne naciśnięcie klawisza Tab powoduje ponowne uruchomienie przechodzenia jednowymiarowego od pierwszego elementu w kolejności wizualnej, a nie wznowienie od wcześniej aktywnego elementu. Działa to tak samo jak w przypadku dwuwymiarowego przechodzenia między elementami. Klawisze kierunkowe przenoszą zaznaczenie klawiatury na najbliższy element, na którym można ustawić zaznaczenie, w wybranym kierunku.

Więcej informacji 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 kolejności przechodzenia w jednym wymiarze

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

  1. Utwórz FocusRequesterobiekt z remember { FocusRequester() }.
  2. Dołącz FocusRequester do docelowego komponentu za pomocą modyfikatora focusRequester.
  3. Zastosuj modyfikator focusProperties do źródłowego komponentu kompozycyjnego i przypisz FocusRequester do next (dla klawisza Tab) lub previous (dla 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 kolejności przechodzenia dwuwymiarowego

Podobnie możesz zastąpić dwuwymiarowe przechodzenie między elementami, 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ę za pomocą fokusu w określonym kierunku (np. na granicach układu), przypisz do tej właściwości wartość FocusRequester.Cancel (np. down = FocusRequester.Cancel). Aby w danym kierunku zachować domyślny algorytm przechodzenia systemu, przypisz wartość FocusRequester.Default.