New Compose Multiplatform components arrived on Composables UICheck it out →

Modifier in Compose Ui

focusOrder

Common

Use this modifier to specify a custom focus traversal order.

Last updated:

Installation

dependencies {
   implementation("androidx.compose.ui:ui:1.7.0-beta04")
}

Overloads

@Deprecated(
    "Use focusProperties() instead",
    ReplaceWith(
        "this.focusProperties(focusOrderReceiver)",
        "androidx.compose.ui.focus.focusProperties"
    )

fun Modifier.focusOrder(
    @Suppress("DEPRECATION")
    focusOrderReceiver: FocusOrder.() -> Unit
)

Parameters

namedescription
focusOrderReceiverSpecifies [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)
@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
)

Code Example

CustomFocusOrderSample

@Composable
@Sampled
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
                    }
            )
        }
    }
}