En la sección Orden de recorrido del enfoque predeterminado, se describió cómo Compose
agrega automáticamente el comportamiento de recorrido del foco a tus elementos, tanto para
La navegación unidimensional (tecla tab
) y bidimensional (teclas de flecha) En algunos
quizás debas anular este comportamiento predeterminado y ser más explícito
acerca del orden de recorrido requerido.
Cómo anular el orden de recorrido unidimensional
Para cambiar el orden de recorrido del enfoque predeterminado para la navegación unidimensional, Crea un conjunto de referencias, una para cada elemento componible enfocable:
val (first, second, third, fourth) = remember { FocusRequester.createRefs() }
Luego, usa el modificador focusRequester
para asociar cada una con un
elemento componible:
Column { Row { TextButton({}, Modifier.focusRequester(first)) { Text("First field") } TextButton({}, Modifier.focusRequester(third)) { Text("Third field") } } Row { TextButton({}, Modifier.focusRequester(second)) { Text("Second field") } TextButton({}, Modifier.focusRequester(fourth)) { Text("Fourth field") } } }
Ahora puedes usar el modificador focusProperties
para especificar un orden de recorrido personalizado:
Column { Row { TextButton( {}, Modifier .focusRequester(first) .focusProperties { next = second } ) { Text("First field") } TextButton( {}, Modifier .focusRequester(third) .focusProperties { next = fourth } ) { Text("Third field") } } Row { TextButton( {}, Modifier .focusRequester(second) .focusProperties { next = third } ) { Text("Second field") } TextButton( {}, Modifier .focusRequester(fourth) .focusProperties { next = first } ) { Text("Fourth field") } } }
Cómo anular el orden de recorrido bidimensional
También es posible agregar un control detallado sobre el orden de recorrido del enfoque
para la navegación bidimensional con las teclas de flecha. Para cada elemento, puedes
anular el destino de navegación predeterminado para cada una de las indicaciones agregando
el modificador focusProperties
y especifica el elemento que surgirá,
hacia abajo o en cualquier otra dirección:
TextButton( onClick = {}, modifier = Modifier .focusRequester(fourth) .focusProperties { down = third right = second } ) {}
Esta técnica no solo usa eficazmente las flechas del teclado, sino que también funciona Pad direccional y sticks en controles inalámbricos y con cable.
Recomendaciones para ti
- Nota: El texto del vínculo se muestra cuando JavaScript está desactivado
- Cómo cambiar el comportamiento del enfoque
- Enfoque en Compose