Start native apps faster with the Composables CLI ->
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. */
@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")
    }
}

ResizableWithStateSample

/**
 * A sample demonstrating a resizable component where the developer manages the state and applies
 * the resulting size.
 */
@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.")
    }
}

Last updated: