New Compose Multiplatform components arrived on Composables UICheck it out →

Modifier in Compose Foundation

bringIntoViewRequester

Common

Modifier that can be used to send [scrollIntoView][BringIntoViewRequester.bringIntoView] requests.

The following example uses a bringIntoViewRequester to bring an item into the parent bounds. The example demonstrates how a composable can ask its parents to scroll so that the component using this modifier is brought into the bounds of all its parents.

Last updated:

Installation

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

Overloads

@ExperimentalFoundationApi
@Suppress("ModifierInspectorInfo"
fun Modifier.bringIntoViewRequester(
    bringIntoViewRequester: BringIntoViewRequester
)

Parameters

namedescription
bringIntoViewRequesterAn instance of [BringIntoViewRequester]. This hoisted object can be used to send [scrollIntoView][BringIntoViewRequester.scrollIntoView] requests to parents of the current composable.

Code Example

BringIntoViewSample

@Composable
@Sampled
@OptIn(ExperimentalFoundationApi::class
fun BringIntoViewSample() {
    Row(Modifier.horizontalScroll(rememberScrollState())) {
        repeat(100) {
            val bringIntoViewRequester = remember { BringIntoViewRequester() }
            val coroutineScope = rememberCoroutineScope()
            Box(
                Modifier
                    // This associates the RelocationRequester with a Composable that wants to be
                    // brought into view.
                    .bringIntoViewRequester(bringIntoViewRequester)
                    .onFocusChanged {
                        if (it.isFocused) {
                            coroutineScope.launch {
                                // This sends a request to all parents that asks them to scroll so
                                // that this item is brought into view.
                                bringIntoViewRequester.bringIntoView()
                            }
                        }
                    }
                    .focusTarget()
            )
        }
    }
}