BringIntoViewResponder

Interface

Common

Deprecated Use BringIntoViewModifierNode instead

interface BringIntoViewResponder

A parent that can respond to bringChildIntoView requests from its children, and bring its content so that the item is visible on the screen. To apply a responder to an element, pass it to the bringIntoViewResponder modifier.

When a component calls BringIntoViewRequester.bringIntoView, the nearest BringIntoViewResponder is found, which is responsible for, in order:

Calculating a rectangle that its parent responder should bring into view by returning it from calculateRectForParent.
Performing any layout adjustments needed to ensure the requested rectangle is brought into view in bringChildIntoView.

Here is a sample where a composable is brought into view:

Here is a sample where a part of a composable is brought into view:

Functions

fun calculateRectForParent(localRect: Rect): Rect

Return the rectangle in this node that should be brought into view by this node's parent, in coordinates relative to this node. If this node needs to adjust itself to bring localRect into view, the returned rectangle should be the destination rectangle that localRect will eventually occupy once this node's content is adjusted.

Parameters


localRect	The rectangle that should be brought into view, relative to this node. This will be the same rectangle passed to `bringChildIntoView`.

Returns


	The rectangle in this node that should be brought into view itself, relative to this node. If this node needs to adjust to bring `localRect` into view, the returned rectangle should be the destination rectangle that `localRect` will eventually occupy, once the adjusting animation is finished.

suspend fun bringChildIntoView(localRect: () -> Rect?)

Bring this specified rectangle into bounds by making this parent to move or adjust its content appropriately.

This method should ensure that only one call is being handled at a time. If you use Compose's Animatable you get this for free, since it will cancel the previous animation when a new one is started while preserving velocity.

Parameters

localRect A function returning the rectangle that should be brought into view, relative to this node. This is the same rectangle that will have been passed to calculateRectForParent. The function may return a different value over time, if the bounds of the request change while the request is being processed. If the rectangle cannot be calculated, e.g. because the LayoutCoordinates are not attached, return null.


localRect	A function returning the rectangle that should be brought into view, relative to this node. This is the same rectangle that will have been passed to `calculateRectForParent`. The function may return a different value over time, if the bounds of the request change while the request is being processed. If the rectangle cannot be calculated, e.g. because the `LayoutCoordinates` are not attached, return null.

Code Examples

BringIntoViewSample

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

BringPartOfComposableIntoViewSample

@Composable
fun BringPartOfComposableIntoViewSample() {
    with(LocalDensity.current) {
        val bringIntoViewRequester = remember { BringIntoViewRequester() }
        val coroutineScope = rememberCoroutineScope()
        Column {
            Box(
                Modifier.border(2.dp, Color.Black)
                    .size(500f.toDp())
                    .horizontalScroll(rememberScrollState())
            ) {
                Canvas(
                    Modifier.size(1500f.toDp(), 500f.toDp())
                        // This associates the RelocationRequester with a Composable that wants
                        // to be brought into view.
                        .bringIntoViewRequester(bringIntoViewRequester)
                ) {
                    drawCircle(color = Color.Red, radius = 250f, center = Offset(750f, 250f))
                }
            }
            Button(
                onClick = {
                    val circleCoordinates = Rect(500f, 0f, 1000f, 500f)
                    coroutineScope.launch {
                        // This sends a request to all parents that asks them to scroll so that
                        // the circle is brought into view.
                        bringIntoViewRequester.bringIntoView(circleCoordinates)
                    }
                }
            ) {
                Text("Bring circle into View")
            }
        }
    }
}