focusOrder

Modifier in Compose Ui

Use this modifier to specify a custom focus traversal order.

Last updated: 2024-09-07 14:23

Installation

dependencies {
   implementation("androidx.compose.ui:ui:1.8.0-alpha01")
}

Overloads

@Deprecated(
    "Use focusProperties() instead",
    ReplaceWith(
        "this.focusProperties(focusOrderReceiver)",
        "androidx.compose.ui.focus.focusProperties"
    )
)
fun Modifier.focusOrder(
    @Suppress("DEPRECATION") focusOrderReceiver: FocusOrder.() -> Unit
): Modifier

Parameters

name	description
focusOrderReceiver	Specifies [FocusRequester]s that are used when the user wants to move the current focus to the [next][FocusOrder.next] item, or wants to move focus [left][FocusOrder.left], [right][FocusOrder.right], [up][FocusOrder.up] or [down][FocusOrder.down].

@Deprecated(
    "Use focusRequester() instead",
    ReplaceWith("this.focusRequester(focusRequester)", "androidx.compose.ui.focus.focusRequester")
)
fun Modifier.focusOrder(focusRequester: FocusRequester): Modifier

@Deprecated(
    "Use focusProperties() and focusRequester() instead",
    ReplaceWith(
        "this.focusRequester(focusRequester).focusProperties(focusOrderReceiver)",
        "androidx.compose.ui.focus.focusProperties, androidx.compose.ui.focus.focusRequester"
    )
)
fun Modifier.focusOrder(
    focusRequester: FocusRequester,
    @Suppress("DEPRECATION") focusOrderReceiver: FocusOrder.() -> Unit
): Modifier

Code Example

CustomFocusOrderSample

@Composable
fun CustomFocusOrderSample() {
    Column(Modifier.fillMaxSize(), Arrangement.SpaceEvenly) {
        val (item1, item2, item3, item4) = remember { FocusRequester.createRefs() }
        Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
            Box(
                Modifier.focusRequester(item1)
                    .focusProperties {
                        next = item2
                        right = item2
                        down = item3
                        previous = item4
                    }
                    .focusable()
            )
            Box(
                Modifier.focusRequester(item2)
                    .focusProperties {
                        next = item3
                        right = item1
                        down = item4
                        previous = item1
                    }
                    .focusable()
            )
        }
        Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
            Box(
                Modifier.focusRequester(item3).focusProperties {
                    next = item4
                    right = item4
                    up = item1
                    previous = item2
                }
            )
            Box(
                Modifier.focusRequester(item4).focusProperties {
                    next = item1
                    left = item3
                    up = item2
                    previous = item3
                }
            )
        }
    }
}