Function

resizable

When the resizable modifier is present and enabled, UI controls will be shown that allow the user to resize the element in 3D space.

BasicResizableSample

/** A sample demonstrating a simple resizable component where the system manages the layout. */
@Sampled
@SubspaceComposable
@Composable
public fun BasicResizableSample() {
    SpatialPanel(
        modifier =
            SubspaceModifier.resizable(
                minimumSize = DpVolumeSize(100.dp, 100.dp, 0.dp),
                maximumSize = DpVolumeSize(800.dp, 800.dp, 0.dp),
            )
    ) {
        Text("Basic Resizable")
    }
}

/**
 * A sample demonstrating a resizable component where the developer manages the state and applies
 * the resulting size.
 */

ResizableWithStateSample

@Sampled
@SubspaceComposable
@Composable
public fun ResizableWithStateSample() {
    val density = LocalDensity.current
    var panelWidth by remember { mutableStateOf(400.dp) }
    var panelHeight by remember { mutableStateOf(300.dp) }

    SpatialPanel(
        modifier =
            SubspaceModifier.width(panelWidth)
                .height(panelHeight)
                .resizable(
                    resizePolicy =
                        ResizePolicy.custom { event ->
                            // The developer decides when and how to apply the new size.
                            // In this example, we update our state when the resize interaction
                            // ends.
                            if (event.type == SpatialResizeEventType.End) {
                                with(density) {
                                    panelWidth = event.size.width.toDp()
                                    panelHeight = event.size.height.toDp()
                                }
                            }
                        }
                )
    ) {
        Text("Resizable with size state.")
    }
}
Jetpack Compose beyond MaterialFree components, screens and templates for apps that don’t look like Google’s. Copy them into your app, or let your coding agent add them.Browse for free

Content updated: